I am attempting to create a simple horizontal navigation for my site. The problem is I would like the text to be justified. So each item is evenly spaced and spans the entire width (600px) of the site. It appears there is no defined method to accomplish a task like this. Can anyone suggest a way to justify the <li> items in my navigation?
600px wide and 6 items. I am trying to keep it flexible though. I don't want to have a broken menu if someone increases font size or if I need to add or subtract something from the menu.
My horizontal menus always either break at a text enlargement OR there's a crapload of space on one side (usually the right side). Can't win for losing. I remember some other people asking for this sort of thing. If you've got some magic, Dan... ...btw what's with the new Bender-bot? Looking up to someone with an evil baby as their avatar is doable, but a drinking, gambling, pimping, stealing, evil human-killing robot... I dunno...
^ Yes. Bender. For the menu, what can be done? Could percentages be used for padding?? Cause the only thing I can think of is let the menu only take up some of the space, giving it room to expand to the right (or left depending) on text-enlarge. Some Math in CSS would be nice, as well as some combinator to refer to parents instead of just children. *Edit, heh, my colleague does a menu which is always centered and expands as needed. He builds his whole page in tables. The menu is a table. Each list item has the text vertically- and horizontally-aligned to the center. More than one word wraps down (and doubles the height of the menu in total) when the screen is made smaller, while the other menu items merely stay in the middle of their fields. Maybe a table is the only way to do this?
Yes a table or some javascript might be the only way to accomplish it, unfortunately. Hopefully CSS offers a way to justify elements in the future!
NOT if you are going to add or remove elements in the HTML without having to edit the CSS every time, and even then it will only work if they are an even divisor of 100... otherwise you WILL have to add borders or white-space to the sides... IF he wants it 100% dynamic based on the html without having to edit the CSS every time a menu item is added or removed, the BEST solution to the problem is in fact a table. Especially with Opera not knowing what a fraction of a percent is.
^Ack, I was hoping you wouldn't say that... But a flex-width page where the menu always spans the pagewidth while the menu items are always perfectly spaced apart... : (