Central Horizontal Alignment (and IE a:hover problem)

[ryani210693]

Hi there,

Currently i have a working horizontal centred CSS menu with the following code-

#nav{
margin: 0;
padding: 0;
}

#nav ul{
text-align: center;
border: 1px solid #FF0000;
border-width: 1px 0;
padding: 0;
margin: 0;
list-style: none;
}

#nav li{
display: inline;
margin: 0px 20px 0px 20px;
padding: 0;
}

* html #nav ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}

#nav a{
font-family: Xenophone;
text-transform: lowercase;
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
text-align:center;
margin:0;
padding:0;
}

#nav ul li a:hover{
border-bottom: 3px solid #FF0000;
margin: 0;
padding:0;
}

and the HTML-

<div id="nav">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Gallery">Gallery</a></li>
<li><a href="#" title="Video">Video</a></li>
<li><a href="#" title="Live">Live</a></li>	
<li><a href="#" title="Sign Up">Sign Up</a></li>	
<li><a href="#" title="Contact">Contact</a></li>	
</ul>
</div>

I've attached an image of what it looks like at the moment. Yes, it looks fine, but i want it so each link is spread evenly across the width of the page (at the moment there is specified margins between each link) and also so the gap is automatically adjusted between each link when the window is resized, but to keep eveything in line, then when it reaches the minimum it can get to when resizing has happened without the navigation going along more than one line, it will stop the window from getting any smaller so that everything is kept inline.

Hopefully that makes some sense =]

Also i've noticed when in IE (it's fine in firefox) the a:hover does nothing! It should be showing a thick red line under the link, like it does in FF.

Attached is the picture of what it is looking like at the moment.

Thanks in advance. Ryan.

[optimus203]

How about making a Div container for the links with a style width:100%;, then making 9 divs, each containing a link, with the style width:11%;

[ryani210693]

Hi 'Optimus203',

I gave what you said a go, but unfortunately it managed things to become shifted to left aligned and vertical.

And i've managed to sort out the IE hover problem thankfully! That's one more thing to cross off the list, but sadly i'm still having problems in trying to get this navigation to do what i want it to.

Here's the code i have now by the way as it has changed a fair bit-

#nav{
width:100%;
border: 1px solid #FF0000;
border-width: 1px 0;
text-align:center;
margin:0;
padding:0;
white-space:nowrap;
}

#nav ul{
width: 100%;
list-style:none;
margin:0;
padding:0;
}

#nav ul li{
display:inline;
list-style:none;
margin-right: auto;
margin-left: auto;
}

#nav ul li a{
font-family: Xenophone;
text-transform: lowercase;
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
line-height:25px;
display:inline;
width:12.5%;
}

#nav ul li a:hover{
border-bottom: 3px solid #FF0000;
font-family: Xenophone;
text-transform: lowercase;
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
line-height:25px;
}

Thanks for all your help, it is much appreciated.

Thanks, Ryan.