?
Solved

fixed width UL with auto width LI

Posted on 2010-01-06
8
Medium Priority
?
1,636 Views
Last Modified: 2012-06-27
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.
0
Comment
Question by:ellandrd
  • 4
  • 4
8 Comments
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26192750
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.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 26192795
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!
0
 
LVL 6

Accepted Solution

by:
Tony O'Byrne earned 2000 total points
ID: 26192887
Php it is then.

Something that I've learned in the past few weeks about dynamic styling...  You could pre-style stuff for the event that you'll need to update.  It'll keep things clean in your code, and remove the inline styles...

Start by styling for all the likely cases...

#navigationList ol.setOfFour li{
    width: 25%;
}

#navigationList ol.setOfFive li{
    width: 20%;
}

and so on and so forth.

This way, when your php realizes out that there's 5 list items, you could
echo "<ul class='setOfFive'>" ;

I think this keep things very clean, the php is easier to read, and all the styling is where it belongs.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 16

Author Comment

by:ellandrd
ID: 26192918
Thanks for the code examples.  Im going to try get an example working in the next 30 mins and see how it goes.
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26192956
Sure thing.  Keep me posted :)
0
 
LVL 16

Author Comment

by:ellandrd
ID: 26193919
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
0
 
LVL 16

Author Closing Comment

by:ellandrd
ID: 31673600
Excellent Solution and Advice
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26194044
You're welcome :)  Glad it all worked out.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question