center menu within the 960 grid

Question

I have been working on 960 grid,(http://960.gs/) and I used an old style menu i've used in the past from a few years ago and for some reason with the 960 grid, the menu is floating left and I want it centered.

 ul#menu {
width:940px;
height:61px;
background: url(../images/menu_bg.png) no-repeat;
list-style:none;
padding-top:0;
padding-left:0;
margin: 0;
}

ul#menu li {
float:left;
}

ul#menu li a {
background: url(../images/menu_splice_color.png) no-repeat scroll top left;
display:block;
height:61px;
position:relative;
}

ul#menu li a.shel {
width:135px;
}

ul#menu li a.golf {
width:84px;
background-position:-135px 0px;
}
ul#menu li a.pro {
width:119px;
background-position:-219px 0px;
}
ul#menu li a.event {
width:94px;
background-position:-338px 0px;
}
ul#menu li a.member {
width:148px;
background-position:-432px 0px;
}
ul#menu li a.bistro {
width:91px;
background-position:-580px 0px;
}
ul#menu li a.contact {
width:115px;
background-position:-671px 0px;
}

ul#menu li a span {
    background: url(../images/menu_splice_color.png) no-repeat scroll bottom left;
    display:block;
    position:absolute;
    top:0;
    left:0px;
    height:100%;
    width:100%;
    z-index:100;
}

ul#menu li a.shel span {
background-position:0px -61px;
}

ul#menu li a.golf span {
background-position:-135px -61px;
}
ul#menu li a.pro span {
background-position:-219px -61px;
}
ul#menu li a.events span {
background-position:-338px -61px;
}
ul#menu li a.member span {
background-position:-432px -61px;
}
ul#menu li a.bistro span {
background-position:-580px -61px;
}
ul#menu li a.contact span {
background-position:-672px -61px;
}

and my generic html markup is

<div class="container_16">



    <!-- Navigation Start -->
    <div class="grid_16">
        <ul id="menu">
            <li><a href="#" class="shel"><span></span></a></li>
            <li><a href="#" class="golf"><span></span></a></li>
            <li><a href="#" class="pro"><span></span></a></li>
            <li><a href="#" class="events"><span></span></a></li>
            <li><a href="#" class="member"><span></span></a></li>
            <li><a href="#" class="bistro"><span></span></a></li>
            <li><a href="#" class="contact"><span></span></a></li>
        </ul>
    </div>
    <div class="clear"></div>

</div>

And I use jquery animations to roll over the images.

    $(function() {

    $("ul#menu span").css("opacity","0");

    $("ul#menu span").hover(function () {

        $(this).stop().animate({
            opacity: 1
        }, "slow");
    },

    function () {

        $(this).stop().animate({
            opacity: 0
        }, "slow");
    });
});

Your choice, but it looks like this grid system was designed back in 2006/7. Things have changed a lot since then. You might want to look for something more modern. — mrtsherman, Apr 15 '12 at 04:01
What do you think I should look at for designing? I mean I could do this myself from scratch and position things, but where do you think I should go to find a new system? — Kyle Monti, Apr 15 '12 at 04:10
I still use the 960 grid framework on some projects, although i'm using [twitters bootstrap](http://twitter.github.com/bootstrap/) more frequently now since its so sexy :P — Andres I Perez, Apr 15 '12 at 05:26

score 1 · Accepted Answer · answered Apr 15 '12 at 03:59

1

Wrap the menu in a container and set it to position: relative. Then absolute position the #menu at 50% from the left and margin-left: -(outerWidth/2).

Something like this should work:

<nav id="container">
    <ul id="menu">
    ...
    </ul>
</nav>

css:

#container { position: relative; }

jq:

var $menu = $('#menu'),
    menuWidth = $menu.outerWidth();

$menu.css({
    position: 'absolute',
    left: '50%',
    margin-left: -(menuWidth/2)
});

answered Apr 15 '12 at 03:59

elclanrs

92,861
21
134
171

Didn't seem to work. I canceled out the animation effect and starts it as if it already was fired. so all images are rolled on pageload. – Kyle Monti Apr 15 '12 at 04:19
The easiest way I found to fix this was to take the total width of _menu_ and **subtract** it from total width of list items to get space not being occupied. Then, I **divided** total width of _menu_ by half of space left to get a percentage. I then added it as `padding-left`. Works successfully in every browser IE6-9, chrome, opera, firefox, and safari. – Kyle Monti Apr 15 '12 at 05:59
I gave you a right answer, because what you told me to do with my code was exactly what I did, however, I did it with percentages and added it to the CSS. – Kyle Monti Apr 15 '12 at 06:00

score 0 · Answer 2 · answered Apr 15 '12 at 05:25

Just define your menu items as display:inline-block instead of floating them to the left and align them to the center by supplying the text-align:center property to the container of your menu, like so:

CSS

.container_16 {
    text-align: center;
}

ul#menu li {
    display: inline-block;
    *display:inline; /* ie7 hack, since it doesn't support inline-block */
}

center menu within the 960 grid

2 Answers2