asked on

fixed width UL with auto width LI

I have a fixed width CSS menu. I want each menu item to have an auto width. I would also like all the menu items to fill up the entire menu bar.

My menu bar uses <ol> as I feel the menu items should be ordered if CSS is turned off. The width is fixed at 960 pixels.

At the moment I have 4 menu items: Home, Adventures, Why Us and Map (but more can be added).

<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Adventures</a></li>
<li><a href="#">Why Us</a></li>
<li><a href="#">Maps</a></li>
</ol>

I would like to have the menu items fill up the entire width of the menu bar so for example, the 4 menu items width's would equal 960px. I read width:auto would achieve this but it doesn't - well not the code I was trying to get working.

Whats your advice?

I do not want to specific a fixed width for each menu item - for example to achieve what i'm doing above each LI width would be 960px / 4 = 240px and this would work fine if i was too only have 4 menu items but this will lead to problems if I add more menu items to the OL.

Tony O'Byrne

Just to clear up what seems to be a misunderstanding of <ol> versus <ul>. Both lists will show things in the order in which you code it. The ordered list basically means that the first to appear is more important, or for some reason, deserves more attention than those below it. The ol would make most sense for a "ranking" type thing - exactly like the EE Hall of Fame - they use an ol for that. They use a ul for the links in "my account", and it makes no difference to the order in which they appear - each item has equal basic significance.

As for your question, width:auto; attempts to set the width to fit its content. You're quite right in the statement that things will break if you want to add more links, and there's just no way (that I know of) around this. CSS isn't meant to figure things out for you and as such has no mathematical ability (which would be nice).

If this is a personal site, my advice would be to save yourself the headache and don't bother with having things take up the entire menu bar. It'll be more flexible.

If this is for a client, you'll have to endure the headache, figure out the math, change it if they want a change, and hope and pray to whatever power you believe in (even the CSS gods) that you don't need to mess with margins & padding.

If you've got some server-side scripting language available, you could put the math in there and use inline styles.

Not much help I know, but there's not much that can be done with issues like these.

ellandrd

ASKER

No, that's fair enough advice! I have PHP available and TBH I wouldn't mind using inline styles for the width's. However it is a client project so I need to endure the headaches....

Wish me luck!

ASKER CERTIFIED SOLUTION

Tony O'Byrne

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ellandrd

ASKER

Thanks for the code examples. Im going to try get an example working in the next 30 mins and see how it goes.

Tony O'Byrne

Sure thing. Keep me posted :)

ellandrd

ASKER

hey dude!

I have managed to get what I wanted worked using your idea of setOfFour, setOfFive, setOfSix and so on mixed with some PHP...

I set the UL to 100% width of its parent container.

Then depending on the number of LI, I set their widths to XYZ% (altho Opera doesn't handle percentages correctly due to a bug it mess the menu bar up)

Then the href inside each LI is set to 100% width with display:block and some padding.

Im happy with the solution I have and the help from good self. thanks for pointing me in the right direction!

Good night

ellandrd

ASKER

Excellent Solution and Advice

Tony O'Byrne

You're welcome :) Glad it all worked out.