Is it a navigation or just information?
OK, probably the easiest way:
- In Photoshop create the line (literally just the rule and save as bar.jpg)
- For each button, cut the icons out in Photoshop and save as whatever_the_icon_is.jpg)
<li id="weeklyonthenews">Weekly On The News</li>
<li id="becosteffective">Be Cost Effective</li>
<li id="freedelivery">Free Delivery</li>
<li id="changeyourmind">You get the point</li>
Then the CSS for the HR in the UL cell:
background-position: x_pos px y_pos px;
/* height and width set to whatever the height and width are, also set margin and padding etc. as required */
/* Adjust the background position x and y pos so that the HR is in the right place (its probably just the y_pos you will need to set, x_pos will likely be 0px
i.e. background-position: 0px 25px;
And the CSS for each icon:
... and so on for each image
Adjust the width and height as required and set any left/right margin as required.
That's the easiest I think, though that code isn't tested written off the cuff so might not work perfectly.