Forum Moderators: not2easy
I can seem to get an arbitrary number of menu items to take up the available horizontal space and automaticaly set the padding or margins so that the full width is taken up and each link floats in an even amount of horizontal padding or margin.
For example, the below block is in a content management system and the menu is generated by Suckerfish. The result is that each <a> link is inside UL/LI which are arranged in a horizontal menu which fits into a body that's 900px wide. Normally such menus are left justified and take up only as much space as needed, usually leaving some left over space on the right. But my design is to have them in a nicely centered line, justified left-to-right. What I've resorted to doing is to manually adjust the padding via #nav2 ul li {}.
But this site is a CMS diliverd to a client, and this means that whenever they change the menu, they subsequently have to go into CSS and manually adjust the padding to realign the menu.
Another problem comes when the page is viewed in browsers on Mac OSX (actualy most browsers on OSX) -- the font is rendered slightly larger so that [unless I find a solution] I'll have to setup a second CSS file just for OSX; that means the client will have to edit two css styles, and in separate files! (yikes!)
I've tried a bunch of properties like text-align:center and width/padding/margin:auto, but have had no success.
Can anyone show me how to get the UL/LI to float with some soert of auto spacing so they take up all the available space?
Thanks in advance!
(using XHTML 1.0 Transitional)
<div id="wrap">
<div id="nav2">
<ul>
<li><a href=...>link 1</a></li>
<li><a href=...>link 2</a></li>
<li><a href=...>link 3</a></li>
</ul>
</div>
</div>
#wrap {width:900px;}
#nav2 {float: left;}
#nav2 ul li {white-space: nowrap; position: relative; padding: 0 20px;}
floats without a width shrinkwrap (that's where you are adjusting the padding)
floats with a width won't work either as you still need to adjust the width every time you add a new link
inline-blocks will center the links with even padding regardless of the amount of them but they will not stretch to fill the 900px, however it would allow links to be added (up until they naturally wrap) without CSS adjustment
a good old table might work, but positioning might need a bit of work and obviously markup would need to change put for ease of cms input it might be the only solution.. where you would be adding a <td><a....> instead of an <li><a...>
or have you got a solution yet?
Okay, so perhaps I didn't provide somethign that's easily cut/paste for you all to see what I mean... Let me try again.
This shows that in order to even out the spacing of the 3 menu items, I have to manually adjust the left/right padding -- here I've left it at 20px. Ideally there would be some CSS rules to let the <UL><LI><A>'s fill up the available horizontal space so the LI containers are justified, and the <A> links float in the center of each.
Can anyone help?
<style type="text/css">
#wrap {width:600px; height:30px; border:1px solid #aaa;}
#nav2 {float: left;}
#nav2 ul li {
border:1px solid #ddd;
position: relative;
padding: 0 20px;
height: 28px;
}
#nav2 li {display: block; float: left; height:30px;}
</style>
<div id="wrap">
<div id="nav2">
<ul>
<li><a href=...>link-1</a></li>
<li><a href=...>link-2</a></li>
<li><a href=...>link-3</a></li>
</ul>
</div>
</div>
In regard to your suggestion, if necessary I suppose I could edit the script to use different tags.
Other than that, you could use javascript or server side code if you desire. (count the number of items, and set widths based on the value)
When it comes to font size being larger, don't assume browsers have any font size at all (except keep somewhat realistic limits). Users' browsers may have settings such as minimum font size enabled, and have them larger than your specified font. Because of this designs should be flexible. When certain widths/heights are required, try to use ems.
[edited by: Xapti at 4:56 am (utc) on May 15, 2008]
I just can't get anything close. :(
The symptom of the situation that was ailing me was that Lucida font was rendering wider on Mac. So I've just changed the font to Ariel/Helvetica whils looks more reliable. And although IE6 ignore :last-child, I removed the right padding on the last element just in case.
So, someday I hope to find a magic combination of CSS that will let the first level of LI's float so that they all split the available horizontal space and pad their contents evenly. Of course, in the future I be careful to not promise such a design on a dynamic menu (this should have all been floated left with room on the right to expand/contract as needed)
--Justin's
An example of the menu is:
<UL>
<LI></LI>
<LI></LI>
<LI>
<UL>
<LI></LI>
<LI></LI>
</UL></LI>
<LI></LI>
</UL>
With <A> links within all the LI's. Now, this menu could take on any tree structure, again, configured from a content management GUI (so I won't be around to rebuild the menu). The dynamic dropdowns of these various levels are controlled entirely by CSS. It's Joomla and Suckerfish, by the way.
So, I don't really want to rewrite the code that generates the menu, unless this were so important to the client that they would agree to pay me to struggle through it. So far they understand and are agreeable with my workaround, which is to manually change the padding when they rearrange the menu.
My original post drastically simplified the problem, and of course folks will offer workaround solutions that make sense if the task were only as simple as the posed problem. However, in my case there are too many factors acting against the adoption of tables for this.
Again, I appreciate that you folks dropped by with more sets of eyes.
Cheers.
