How to do this layout?

if not using a whole image as the background. how would you may do the layout?

i maybe split all the small images as a whole image then using it as background. i know it will be worse. is there a good way to layout it

I’d probably segment it; as you’ll want rollovers right?

So a cell with the background line, inside that cell have each link, use each individual link as a rollover image.

could you give me more details. thank you.

my way. i fell it’s too stupid

my html layout:

<div class=“promo”><span>Weekly On The News</span><span>Weekly On The News</span><span>Weekly On The News</span></div>

the css layout:

background:transparent url(‘…/images/tes.gif’) no-repeat 0 0;
border-bottom: 2px solid #DEDEDF;

Is it a navigation or just information?

OK, probably the easiest way:

  1. In Photoshop create the line (literally just the rule and save as bar.jpg)
  2. For each button, cut the icons out in Photoshop and save as whatever_the_icon_is.jpg)


<ul class="graphic">
   <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:

   width: 400px;
   height: 50px;
   background-image: url('url_to_bar_image');
   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:

   width: 25px;
   height: 50px;
   background-image: url('url_to_the_image');
   text-indent: -3000px;

... 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.

I would do similar to what FR suggested, starting with the same HTML. But I’d also put a span inside each list item like so:

<ul class="menu">
   <li id="weeklyonthenews">Weekly On The News[COLOR="#FF0000"]<span></span>[/COLOR]</li>
   <li id="becosteffective">Be Cost Effective[COLOR="#FF0000"]<span></span>[/COLOR]</li>
   <li id="freedelivery">Free Delivery[COLOR="#FF0000"]<span></span>[/COLOR]</li>
   <li id="changeyourmind">You get the point[COLOR="#FF0000"]<span></span>[/COLOR]</li>

Now give each <li> a width and height and position: relative. Then set the spans to the same width and height and set to position: absolute; top: 0; left: 0;

Then put your image as a background on those spans in different positions, using it as a sprite. This is an [URL=“”]image replacement technique that means the menu won’t fail if images don’t load (because the text doesn’t have to be hidden off screen).

This may be of interest to you as well.