Horizontal navigation - distributed list items

horizontal navigation list distribute

[shed124]

Hi

I've almost finished building a site which is all within a centralised rectangle and has a horizontal menu at the top of the screen (and a logo just to the left of it).

I need the menu to fill it's respective <div> so that each item is distributed evenly across it, and so the last item (i.e one furthest right)is aligned right with the rest of the site. It's almost there...

<div id="nav">
<img src="images/kcd-logo_smaller.gif" alt="" width="143" height="50" border="0" align="left" usemap="#Map" />
<ul>
<li><a href="home.html" target="section">about us</a></li>
<li><a href="whatwedo.html" target="section">what we do</a></li>
<li><a href="our_clients.html" target="section">our clients</a></li>
<li><a href="whatourclients.html" target="section">what our clients say</a></li>
<li><a href="our_team.html" target="section">our team</a></li>
<li><a href="downloads.html" target="section">downloads</a></li>
<li><a href="contact.html" target="section">contact us</a></li>
</ul>
</div>

I have used fixed padding (6.6px!)which looks ok in IE and Firefox on PC, but seems to be treated differently by all Mac browsers so that the menu's width comes up 'too short' and 'contact' link is only about 3/4 across the screen. Here's the CSS:

#nav {
height: 50px;
background-color: #FFFFFF;
width: 100%;
border-bottom: solid #352C25 10px;
text-align: left;
margin: 0px;
padding: 0px;
}

#nav ul, #nav li {

display: inline;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
line-height: 50px;
vertical-align: middle;
}

#nav a, #nav a:link {
background: #FFFFFF;
color: #352c25;
font: bold 12px verdana, arial, sans-serif;
line-height: 50px;
margin: 0px;
padding: 3px 6.6px;
text-decoration: none;

}

I just can't seem to work it out, and I really don't want to use fixed width images for the buttons.

It's going to go live tomorrow and it would be great if I could just sort this last bit out.

Any help would be greatly appreciated...

cheers

[shed124]

Right, I tried using absolute and relative positioning but that broke on Mac browsers so in the end this method works perfectly on every single browser ever invented, ever. It just used fixed widths for each floated-left div.

It may not be rocket science but if it can save someone a few hours work then it's not all in vain...

1)Change all list items to divs and give them a separate class:

<div id="nav">
<div><img src="images/kcd-logo_smaller.gif" alt="" width="143" height="50" border="0" align="left" usemap="#Map" /></div>
<div class = "n1"><a href="home.html" target="section">about us</a></div>
<div class = "n2"><a href="whatwedo.html" target="section">what we do</a></div>
<div class = "n3"><a href="our_clients.html" target="section">our clients</a></div>
<div class = "n4"><a href="whatourclients.html" target="section">what our clients say</a></div>
<div class = "n5"><a href="our_team.html" target="section">our team</a></div>
<div class = "n6"><a href="downloads.html" target="section">downloads</a></div>
<div class = "n7"><a href="contact.html" target="section">contact us</a></div>
</div>

2) CSS...

#nav {
white-space: nowrap;
height: 50px;
background-color: #FFFFFF;
border-bottom: solid #352C25 10px;
width: 800px;
margin: 0px;
display: block;
}

#nav a, #nav a:link {
background: #FFF;
color: #352c25;
font: bold 12px verdana, arial, sans-serif;
line-height: 50px;
margin: 0px;
text-decoration: none;
padding: 3px;
}

#nav a:hover {background: #BED9ED;}

.n1{float:left;width: 75px;}
.n2{float:left;width: 100px;}
.n3{float:left;width: 90px;}
.n4{float:left;width: 155px;}
.n5{float:left;width: 75px;}
.n6{float:left;width: 80px;}
.n7{float:right;width: 72px;text-align: center;}

I can sleep now...

thanks for listening.