Выставить CSS меню по центру

[bonzaza]

самый верный способ

Оборачиваем в div{ margin-left:-50%; } и для ul{ margin-left:50%; float:left; }

Уважаемый vave, Вам уже указали самый верный способ сделать отображение меню посередине. Единственное, что могу добавить от себя, что я бы засунул в два дива
div#1 {float:left;left:50%;position:relative;text-align:center;}
div#2 {float:left;left:-50%;position:relative;text-align:center;}
и только потом вставил бы ul.

Пример использования этого CSS метода можно посмотреть на сайте Для просмотра ссылки Войди или Зарегистрируйся, меню новости, карьера у нас и т.д. Оно все время центрировано =)

 

[vave]

Неужели не существует в природе нормальной отцентровки css меню?

 

[voldem]

центрирование
margin: 0 auto 0 auto;

или текст
text-align:center;

 

[KyaH]

Неужели не существует в природе нормальной отцентровки css меню?

могу предложить вариант с использованием JS, но он работает со всеми браузерами, кроме IE...
изменил то, что сделал soot... можешь посмотреть во вложенном файле... менюшка будет отображаться по центру независимо от длины текста, только если это не IE...

Пример использования этого CSS метода можно посмотреть на сайте Для просмотра ссылки Войди или Зарегистрируйся, меню новости, карьера у нас и т.д. Оно все время центрировано =)

у тебя там ширина каждого пункта задана жестко... и если ввести в один из пунктов очень длинное слово, то мы не увидим всего слова, а только то, что влезло... а человеку нужно, чтобы ширина каждого пункта "задавалась" сама в зависимости от длины слова в нем, но при этом и менюшка должна сама центрироваться по центру)))

 

[ShaDeRzz]

Во-первых вам надо менять css
В данный момент у вас для всех li внутри ul с id="nav" выставлен float:left; Центрирование тут не прокатит.
В идеале и остальные ошибки поисправлять - там их много. Равно как и много лишнего как в css так и в вашем html.

Но самый простой способ, чтоб уже сейчас заработало:
после своей css-ки (вот после этого:

<link rel="stylesheet" type="text/css" href="pro_drop_1/pro_drop_1.css" />

)
вставьте этот код:

<style>
#nav {padding:0; margin:0 auto 0 auto; list-style:none; height:35px; background:#fff; position:relative; z-index:500; font-family:century gothic, verdana, sans-serif; width:870px;}
#nav li.top {display:inline;}
#nav li a.top_link {display:inline; height:35px; line-height:32px; color:#000; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 10px; cursor:pointer;background: url(1.gif) no-repeat;}
#nav li a.top_link span {display:inline; padding:0 24px 0 12px; height:35px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {display:inline; padding:0 24px 0 12px; height:35px; background:url(blank.gif) right top;}
#nav li a.top_link:hover {color:#333; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}
</style>

Добавлено через 4 минуты
Тут ключевой момент:
width:870px; (это сумма ширины блоков li, с паддингами, - я её подобрал методом тыка. Если будете добавлять/убирать ещё элементы меню - меняйте эту ширину. Иначе блоги будут либо в несколько рядов распользаться, либо будет много свободного пространства лишнего)
display:inline; - этот параметр заставляет теги li становиться в один ряд.
И чтобы вся эта строчка, упакованная в ul определённой ширины стала по центру, добавляем параметр: margin:0 auto 0 auto;

Вот и вся техника.

 

[KyaH]

Во-первых вам надо менять css
Тут ключевой момент:
width:870px; (это сумма ширины блоков li, с паддингами, - я её подобрал методом тыка. Если будете добавлять/убирать ещё элементы меню - меняйте эту ширину. Иначе блоги будут либо в несколько рядов распользаться, либо будет много свободного пространства лишнего)
display:inline; - этот параметр заставляет теги li становиться в один ряд.
И чтобы вся эта строчка, упакованная в ul определённой ширины стала по центру, добавляем параметр: margin:0 auto 0 auto;
Вот и вся техника.

это-то понятно... человеку, я так понял, просто нужен универсальный метод, в котором ему не надо будет подбирать ширину, т.к. языков, видимо, может быть много и каждый раз менюшку подгонять запаришься...
я в приведенном выше примере сделал на скорую руку скрипт, который эту самую ширину вычисляет сам, но беда в том, что в ИЕ эта ширина, хоть убей, не вычисляется, если она не задана явно в CSS, а выдает только "auto"... если решить проблему с ним, то все будет ok...
а вообще, конечно, самый лучший вариант, конечно, найти какой-нибудь другой вариант отображения меню через CSS, которое будет легко отцентрировать, т.к. скрипты не у всех бывают включены...

 

[Hitchsd]

Я всегда засовывал ul li менюшки в div и прописывал ждя этого div position:relative и margin 0 auto