runeveryday — 2012-07-11T08:00:31-04:00 — #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
fizixrichard — 2012-07-11T08:15:22-04:00 — #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.
runeveryday — 2012-07-11T08:28:59-04:00 — #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:
background:transparent url('../images/tes.gif') no-repeat 0 0;
border-bottom: 2px solid #DEDEDF;
fizixrichard — 2012-07-11T08:53:18-04:00 — #4
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.
ralphm — 2012-07-11T10:57:18-04:00 — #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:
<li id="weeklyonthenews">Weekly On The News<font color='"#FF0000"'><span></span></font></li>
<li id="becosteffective">Be Cost Effective<font color='"#FF0000"'><span></span></font></li>
<li id="freedelivery">Free Delivery<font color='"#FF0000"'><span></span></font></li>
<li id="changeyourmind">You get the point<font color='"#FF0000"'><span></span></font></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="http://www.pmob.co.uk/temp/headerreplacement3.htm"]image replacement technique](http://www.alistapart.com/articles/sprites/) that means the menu won't fail if images don't load (because the text doesn't have to be hidden off screen).
cpradio — 2012-07-11T12:10:24-04:00 — #6