Как центрировать элементы в моем меню при 100% ширине фона

Question

Я работаю на сайте: http://homegym.sg/index.php/

Использовали jquery для создания такого эффекта, что при прокрутке пользователя внизу экрана появится черное меню. Однако я пробовал много способов, но он не может показать то, что я хотел.

Я хотел, чтобы фон меню занимал 100% ширину экрана. Средняя часть моего экрана имеет фиксированную ширину (960 пикселей), но когда пользовательский экран превышает 960 пикселей, фон расширяется, чтобы заполнить сторону.

Для фона моего сайта это происходит, но для фона меню единственный ближайший эффект, который я получаю, - это заполнение фона по всей ширине экрана, но с выравниванием содержимого по левому краю (то, что я хотел, это центр выравнивание).

Мой div для меню #menu, css найдены в menu.css

Вот некоторая часть кода:

  #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

width из div#menu должно быть 100%, и это div получает background.
Для центрирования ul.topnav нужны реальные width (из всех li s) и margin auto.

Измените ваши определения CSS на:

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

Answer 2

Я проверил это, и проблема в элементе float и полях.Попробуйте использовать свойства css (я изменил их на абсолютные пути для локального тестирования):

#menu {
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 888;
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/topnav_bg.gif) repeat-x;
}

ul.topnav {
    width: 820px;
    list-style: none;
    padding: 0 50px;
    float: none;
    text-align: left;
    background: #222;
    font-size: 1.2em;   
    margin: 0 auto;
}
ul.topnav li {
    float: none;
    margin: 0 auto;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/main-delimiter.png) 95% 4px no-repeat;
}

Кстати, хороший сайт!

Answer 3

Я не могу проверить вашу страницу напрямую, потому что у вас есть ошибки синтаксического анализа JavaScript, и я не хочу копировать ваш код в JSFiddle на данный момент, но я могу дать совет.Попробуйте установить горизонтальное поле в вашем меню на автоматический:

div#menu {
    margin:0 auto;
}

или, более педантично:

div#menu {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}