[Stanza]

The title more or less says it all. I've done a fair bit of Googling plus a load of experimenting to try and figure out a decent way to evenly space a nav bar's menu items and wondered if anyone had any good suggestions?

Originally I was going to generate the menu items dynamically through wordpress, but I probably don't need to do that as it they wont change (although there will be nested menu items within these that will be dynamically created). I have 7 menu items of differing size and at the moment the CSS uses fixed margins which I worked out through trial and error, but I want it to be able to space itself evenly through some sort of logical css if possible.

My problem with fixed margins etc is that the font I just tried to use (Century Gothic) renders slightly differently in different browsers and in some cases knocks the last menu item out of the nav bar with the existing CSS fixed margins. I thought that potentially I could somehow use "dummy" <li></li>'s inbetween the proper menu items with some sort of percentage based CSS margin but I haven't quite nailed it, which could of course be because it's a stupid idea in the 1sr place. I don't know?

The html:

<nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Applications</a></li>
                    <li><a href="#">What's Wood Wool?</a></li>
                    <li><a href="#">The Eco Bit</a></li>
                    <li><a href="#">Get In Touch</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>

The CSS:

header nav {
        background-image: url(../_images/nav-bar-bg.png);
        height: 48px;
        width: 960px;
        position: absolute;
        top: 96px;
}

header nav>ul {
        height: 48px;
        width: 960px;
}

header nav ul li {
        float: left;
        line-height: 48px;
        font-size: 1.6em;
        width: auto;
        margin-right: 30px;
        margin-left: 30px;
}

header nav ul li a {
        text-align:center;
        color: #FFF;
        display:block;
}

header nav ul li a:hover {
        color: #09b497;
}

Here's a link to the site I'm working on for visual reference

[Wickham]

There is a way to code a horizontal menu with unequal width li tags and make the whole menu center in a containing div. The containing divs (two) don't have any width. See this example in item 4
http://www.wickham43...opdownmenus.php
Make your window smaller and drag it wider and narrower to see what happens at small and large width resolutions. The li tags can also increase or decrease according to the content or text size, so if you increase text size (only text, not zoom whole page), the tags will expand.

[Stanza]

Thanks for that mate. I did try it, but I was getting a few random artifacts i didn't want. I've resorted to using this javascript to sort it out for me

The problem I now have is that my nested drop down menus are pushed over to the right in Internet Explorer and I can't figure out why. Probably a simple CSS thing my fried brain is failing to see at the moment. Any help would be appreciated

p.s. updated website here

This post has been edited by Stanza: 24 January 2012 - 04:04 PM

[Wickham]

I tested your jsFiddle code and I found that IE9 was dropping the last menu item onto the next row.

I've just looked at your revised site in Firefox (OK) but in IE9 the blog link isn't there, probably dropped down but there's no room below to show it.

Great jsFiddle code, but my javascript knowledge isn't enough to sort it out.

[Stanza]

Wickham, on 24 January 2012 - 04:38 PM, said:

I tested your jsFiddle code and I found that IE9 was dropping the last menu item onto the next row.

I've just looked at your revised site in Firefox (OK) but in IE9 the blog link isn't there, probably dropped down but there's no room below to show it.

Great jsFiddle code, but my javascript knowledge isn't enough to sort it out.

Bugger! I hadn't seen this, but just checked it. Such a simple thing (an evenly spaced nav bar) Has caused me so much grief its a joke. I've been stuck on this for far too long

the search continues...

[Stanza]

this seems to be working as a cross browser solution Equally spaced horizontal navigation links that align with their container : a JQuery script

I'm still having alignment issues with my nested drop down menus in various browsers though