How to do this layout?

HTML & CSS
1

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

2

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.

3

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:

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

4

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)

The HTML:


<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>
</ul>

Then the CSS for the HR in the UL cell:


.graphic
{
   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:


#weeklyonthenews
{
   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.

5

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>
</ul>

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=“http://www.pmob.co.uk/temp/headerreplacement3.htm”]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).

6

This may be of interest to you as well.