Auto Width and Centred Menu (also IE hover problem)

[ryani210693]

Hi there...

I've searched high and low looking for a solution.

What i'm after is an automatically adjusting horizontal CSS menu that will automatically space each item evenly across the width of the browser, and when resized, without having a fixed width so it does it itself.

I've attached an image, which i made as a mockup to show what i'm trying to acheive...at the moment all that seems to be happening is centered items when i use the following CSS-

#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;
}

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

<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>

Hopefully you understand what i'm trying to get at...if not, give me shout!

Also, IE seems to be ignoring the a:hover attribute?

Thanks, Ryan.

[Medyman]

Add the following:

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

Play around with the width to get the proportions you want. It would also be smart to add a min-width to either #nav or it's parent element. Make that value the smallest width that the nav bar needs to be before each button start collapsing on each other.

Also, the typeface you're using isn't really a web-safe font. On a live site, you'll want to either use images or a font-replacement technique to get that typeface.

[monicasaha]

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

#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;
}

i think when u r using font size, line height is necessary to mention which should be atleast 1px higher than the font size.

i hope this code will work.

[Medyman]

i think when u r using font size, line height is necessary to mention which should be atleast 1px higher than the font size.

No, it's not absolutely necessary. There are browser defaults that will account for changes in font size. It's only required if you wish to override that default.

If you're going to specify a line-height though, I'd recommend using a dynamic value (a precentage, or EMs). That way, when someone resizes the text through their browser, the line-height is scaled relatively. Otherwise, the text will be unreadable.

[ryani210693]

Hi guys, much appreciated for the help.

Firstly, with the font not being 'friendly'...i understand that...i will be using a different method to make it friendly...that's not a problem at the moment..i'm sure it will be after i have sorted the navigation itself out haha!

A with the IE hover difficulty... It seems that it dislikes having the hover outside of the nav, hence why the thick line appearing outside of the red box is not showing...you can see this with the attached images...firefox shows how it is being done now with the line height being changed, and then compare it to the IE picture.

And also you can see in the picture it still seems to be ignoring the new width and display attributes added to the #nav ul li a. I also had to change the display to 'inline' instead of 'block'...as block ended up with it being vertical (see attached picture). Also, with block, it is also pushing the menu to the left in FF, but IE is doing something good for once by centering it. I unfortunately couldn't upload more than 3 files, so left these extra 2 images out!

I'll post the CSS again of what i have.

#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 again for your help!

Ryan.

[monicasaha]

yah medyman.i agree with you..but he has given the font-size in "px" so i have mentioned that.......by simply giving the line height added with this code you could find a positive change in IE 6 with out giving display: block.

[monicasaha]

can u use this code once again

#nav{
width:100%;
border: 1px solid #FF0000;
border-width: 1px 0;
text-align:center;
margin:0;
padding:0;
background-color:#000;
height:27px;
}

#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:27px;
}

#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:27px;
}

here are my screenshots

[ryani210693]

Hi again,

Using the CSS you posted above monicasaha, it has solved the hover problem in IE and FF...see the screenshot.

Also, magically, it's padded or added margins between each link as you can also see in the picture but i'm trying to figure out where from haha?!

At the moment, the links are padded apart and centered, which is good, but they're not spanning the entire width of the navigation.

Thanks, Ryan.

[ryani210693]

Hi guys,

I've came across another hover problem with the hovering...For once IE is doing how i want it to do it and FF not.

On the hover over, it is a 2px underline. In FF it is pushing down the bottom border on hover over, where as in IE it is doing it how i want to, by leaving the nav border as is and just implementing the 2px underline on hover over without nudging down the navigation border.

The following code is what i am using-

#nav{
width:100%;
border: 1px solid #FF0000;
border-width: 1px 0;
text-align:center;
margin: 0;
padding: 0;
background-color:#000;
height: auto;
}

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

#nav ul li{
display:inline;
list-style:none;
margin: 0 15px 0 15px;
padding: 0;
}

#nav ul li a{
background: 0;
font-family: Xenophone;
text-transform: lowercase;
/*color: #FFFFFF;*/
font-size: 20px;
text-decoration: none;
line-height: inherit;
margin: 0;
padding: 0;
}

#nav a:hover{
border-bottom: 2px solid #FF0000;
font-family: Xenophone;
text-transform: lowercase;
/*color: #FFFFFF;*/
font-size: 20px;
text-decoration: none;
line-height:27px;
margin: 0;
padding: 0;
}

I hope that makes sense and that you are able to help.

Thanks once again, Ryan.