Question

I have a menu built with jquery from apycom.com that I am trying to center.
The menu items are from a cms and dynamically created when the page loads. So this means that the menu isn’t a fixed width.
I have tried several methods using just css, but without having a width set for the menu, they don’t want to work.

I have found some information that leads me to believe that there may be a way to do it with javascript.

Is there is a way to dynamically set the width of the div element around the menu and then set the left and right margins to auto to center the menu?

If there is a better way to accomplish this, I am open to ideas.

Thanks in advance
Bjorn

Here is a sample of what I have thus far.

I have already tried using ‘margin: 0 auto;’ but without a width setting that doesn’t work. Because the menu is created by looping over the menu items available from the cms, I don’t know the width of the menu.

I’ve tried using ‘display: inline-block;’ as well, and that get’s me to a point that the block space the menu takes up is only the width of the menu. Now I just need to be able to center that block. I thought that there might be a way that once the menu has been created and the width is then known that you could then apply the margin settings.

Maybe similar to the way jquery is able to apply and change style settings on the fly.

<div class="top_navigation_bar">
<div id="menu">
    <ul class="menu">
        <li><a class="parent" href="/en/"><span>Home</span></a></li>
        <li><a class="parent" href="/en/web-design"><span>Web Design</span></a>
        <div>
            <ul>
                <li><a href="/en/design-packages"><span>Design Packages</span></a></li>
                <li><a href="/en/website-maintenance"><span>Website Maintenance</span></a></li>
                <li><a href="/en/redesign-website"><span>Redesign Website</span></a></li>
                <li><a href="/en/design-fundamentals"><span>Design Fundamentals</span></a></li>
                <li><a href="/en/design-elements"><span>Design Key Elements</span></a></li>
            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/website-business-solutions"><span>Business Solutions</span></a></li>
        <li><a class="parent" href="/en/internet-marketing"><span>Internet Marketing</span></a>
        <div>
            <ul>
                <li><a href="/en/small-business-marketing"><span>Small Business Marketing</span></a></li>
                <li><a href="/en/leveraging-the-internet"><span>Leveraging the Internet</span></a></li>

            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/doing-business"><span>About Us</span></a>
        <div>
            <ul>
                <li><a href="/en/about"><span>Design Team</span></a></li>
            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/blog"><span>Blog</span></a></li>
        <li><a class="parent" href="/en/contact-us"><span>Contact</span></a></li>
        <li class="last"><a href="/en/faq"><span>FAQ</span></a></li>
    </ul>
</div>

.top_navigation_bar {
    height: 46px;
    padding-top: 4px;
    background-color: #3a8658;
}

div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(/site_media/template_images/images/left.png) no-repeat;
    _background: url(/site_media/template_images/images/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

Answer 1

If you are trying to center the #menu inside the .top_navigation_bar then you could use the margin:0 auto and additionally use jQuery like this

$(function(){
    $menu = $('#menu');

    $menu.width(
        $('.menu').outerWidth() +
        $menu.outerWidth() - $menu.width()
    );
    // added the following line, because the lavalamp plugin
    // corrects itself when the window resizes..
    // so we trigger a resize event, and the plugin fixes everything ;)
    $(window).trigger('resize');
});

this will resize the #menu according to its contents, and will become centered because of the auto margin we set in css.

example at http://www.jsfiddle.net/MCnbr/