4 replies [Last post]
robbieg
Offline
Regular
Last seen: 12 years 40 weeks ago
Timezone: GMT-5
Joined: 2004-11-25
Posts: 17
Points: 0

I'm using lists to make two horizontal menus. I want them stretch to the full width of the page. I'm almost there, however the menus aren't stretching the full width. They're both stretching to different widths and I can't figure out why.

The template is available at:
http://www.robertgraves.ca/wl/

I've outlined the #nav and #footer divs in red and the ul lists in green to demonstrate how far each block is stretching to.

Any ideas?

all_smylz
all_smylz's picture
Offline
newbie
Last seen: 12 years 46 weeks ago
Timezone: GMT-5
Joined: 2008-03-07
Posts: 2
Points: 0

List stretching

The top nav isn't stretching the full amount because you have each:
#nav ul li, #nav ul li.last {
width: 12%;

There are 7 list elements. 7 x 12 = 84
The width should be a little over 14%

The bottom nav isn't set to % that is why it isn't stretching it is set to a fixed px widhth.

Hope that helps,
Kamren Z
Software Technologist @ Developintelligence
http://developintelligence.com

robbieg
Offline
Regular
Last seen: 12 years 40 weeks ago
Timezone: GMT-5
Joined: 2004-11-25
Posts: 17
Points: 0

I tried putting the width

I tried putting the width for the top nav to 14% and it ended up pushing the "Help" link on to the next line. 12% was the only thing that would make it fit all on one line.

I had the bottom set to 20% at one point and it did the same thing. I've changed the style sheet to have the bottom set to width: 20% to demonstrate what it's doing, even though the percentages make sense when doing the math.

all_smylz
all_smylz's picture
Offline
newbie
Last seen: 12 years 46 weeks ago
Timezone: GMT-5
Joined: 2008-03-07
Posts: 2
Points: 0

You are getting close...

You did the correct thing In the footer if you set the width to 20% as you have done. There are 5 items and the math multiplies correctly.

However, the borders have a width to them also. That means you have a width of 5 X 20 = 100% for the 5 items + all of the border width which you have designated to 1 px. It gets a little messy when you are dealing with % & px. So you will have to set the width to be 19.???% to make it fit closer to the 100% width.

Make sense?

Kamren Z
Software Technologist @ DevelopIntelligence
http://developintelligence.com

robbieg
Offline
Regular
Last seen: 12 years 40 weeks ago
Timezone: GMT-5
Joined: 2004-11-25
Posts: 17
Points: 0

Thanks

Thanks for your help with this. Problem solved!