Question

I am working on a website: http://homegym.sg/index.php/

Have used jquery to create an effect such that when the user scroll down, a black menu will appear at the top of the screen. However i have been trying alot of ways but it is not able to show as what i wanted.

I wanted to have the background of the menu fill 100% width of the screen. The middle part of my screen is fixed width (960px) but when the user screen is more than 960px the background will expand to fill the side.

For my website background it is doing that, but for the menu background, the only closest effect i get is having the background fill the entire width of the screen, but with the contents align to the left (what i wanted is center alignment).

My div for the menu is #menu, css are found is menu.css

Here some part of the code:

  #menu {

    width: 100%;
    z-index:888; 
    display:none; 
    position:fixed; 
    top:0 ;
    left: 0;
}

ul.topnav {
    width: 100%;
    list-style: none;
    padding: 0 50px;
    float: left;
    text-align: left;
    background: #222;
    font-size: 1.2em;
    background: url(../images/css_menu/topnav_bg.gif) repeat-x;

}

Answer 1

The width of the div#menu should be 100% and this div gets the background.
To center the ul.topnav it needs the real width (of all lis) and margin auto.

Change your css defintions to:

#menu {
    background: url("../images/css_menu/topnav_bg.gif") repeat-x scroll 0 0 transparent;
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 888;
}

ul.topnav {
    font-size: 1.2em;
    height: 35px;
    margin: 0 auto;
    width: 802px;
}