[РЕШЕНО] Как правильно центровать пункты горизонтального меню?

[yoursun]

 Всем добрый день! Сделала, пользуясь разной инфой с интернета и форумов горизонтальное меню для своего "резинового" сайта, и вроде бы все нормально получилось, на моем мониторе с разрешением 1440х900 пункты меню встали по центру страницы, но при открытии сайта на мониторах с другим разрешением меню едет в сторону, на большем размере смещается влево, а на меньшем, бьется на две строки. Все мои попытки изменить это ни к чему не приводят, те советы что даются на просторах инета, типа text-align: center; или #menu {margin:0 auto;} не помогают. Подскажите, пожалуйста, что нужно сделать чтобы на всех мониторах меню стояло как надо (по центру страницы и в одну строку)?

 

Вот ссылка на тест. страницу сайта http://yoursun.myjino.ru/index.html

Ниже скрины с двух разных мониторов.

 

Это код моего меню:

#menu {font-family:  "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif; text-align: center;}

#menu ul
 {
margin: 0; 
padding: 0; 
float: left;
padding-left: 25%;
width: 100%; 
text-align: center;
} 

#menu ul li { display: inline; } 
#menu ul li a { 
float: left; 
color: #696969; 
padding: 5px 11px; 
text-decoration: none; 
font-size: 130%;
text-align: center;
background: #9ACD32 url(slant.gif) no-repeat top right; padding: 0px 25px 0px 10px; }
border-right: 2px solid #FFFAFA;

#menu ul li a: visited{color: #696969; } 
#menu a:hover {color: #000;}
#menu ul li .current{ 
padding-top: 6px; 
padding-bottom: 4px; 
text-align: center;} 

P/s. не судите строго, я не WEBмастер, просто мне очень нужен сайт  :oops:

Змінено 20 лютого 2015 користувачем yoursun
Если в Вашем сообщении есть код - заключайте его в теги [code]...[/code]

[tim21701]

Центрируем пункты Горизонтального меню [How-To]

[fijneman]

Поигрался немного с демкой. Вроде вышло
 
для #menu добавить ширину в 850px

#menu {
margin: 0 auto;
width: 850px;
} 

для #menu ul убрать padding-left:20%

Правда хз как там себя буду вести элементы, которые должны вываливаться при наведении на пункты меню.


З.Ы. А браузеру мозилла файерфокс еще не нравится у элемента li свойство margin-right: 20pt; если выставить ширину менюшки в 850 пикселей, то криво смотрится

[Helloween]

Центрирование - страшная штука, которая вечно будет куда-нибудь сползать. Оставляйте выравнивание по левому краю и не заморачивайтесь. А то придется потом еще костыли писать под разные браузеры и девайсы...

[yoursun]

Получилось!!!  Ой, я прям вас расцеловать готова! Огромное вам спасибо!!!

[fijneman]

Там нужно так же учесть, что если ширина окна браузера будет меньше 850 то этот блок будет вылезать за край

[yoursun]

Ну да, тогда скроллер появляется (((

[fijneman]

Ну тут уже нужно добавлять в css'ку что-то типа

@media screen and (min-width: 320px) and (max-width: 500px) {
#menu {
margin: 0 auto;
width: 450px;
}
}

если ширина страницы от 320 до 500 пикселей то... и тут экспериментируем с шириной элемента #menu

[yoursun]

А куда именно в css меню надо этот код вставить, или в любое место можно? И этот код так и должен начинаться с @, или перед ним надо какой-то тег еще написать?

[fijneman]

По идее можно куда угодно. Я у себя в самом верху вставлял, когда клепал резиновость для удобства просмотра на древних телефонах с шириной 320 пикселей. И да, нужно вставлять как есть с @

Естественно, должен остаться и старый вариант и этот новый, который будет срабатывать только при определенной ширине окна браузера.

[yoursun]

Вставила, но что-то не сработало ((((

[fijneman]

Ну тогда, скорее всего, нужно старый вариант без условий

обернуть такой же штукой, но там указать, например с 850 до 2000 пикселей

и в итоге должно быть что-то типа

@media screen and (min-width: 320px) and (max-width: 800px) {
#menu {
margin: 0 auto;
width: 450px;
}
}

и ниже

@media screen and (min-width: 850px) and (max-width: 2000px) {
#menu {
margin: 0 auto;
width: 850px;
}
}

[yoursun]

на экране 800х600 получается так как на скрине

[yoursun]

поменяла в варианте для маленьких экранов width: 450px; на width: 550px; - меню стало в две строчки, но тогда оно не уложится, видимо в min-width: 320px

[fijneman]

Мдя. Это так тут вечно можно химичить.

Заменить для этого элемента свойство на инлайн-блок вместо инлайн

#menu ul li {
display: inline-block;
}

После этого получается, что вся менюшка становится шире и 850 пикселей уже мало. Можно поэкспериментировать от 870 до 900 для

#menu {
margin: 0 auto;
width: 850px;
}

[yoursun]

Да, я думаю, стоит остановиться на предыдущем варианте. Он в принципе меня устраивает, я и не рассчитывала на то, что мой сайт будут смотреть через телефон :-) .

Вам же огромное, огромное спасибо за участие и помощь, вы меня очень выручили!!! :-)  :-)  :-)