Центрированная горизонтальная навигация

[Jawesome]

Два вопроса! Один вопрос!

1.

Что вызывает такой большой отступ с левой стороны?

Ответ:

ul {padding-left: 0px}

2.

Как зафиксировать навигацию, чтобы при уменьшении окна браузера она не съезжала?

Ответ:

min-width

HTML

<nav>
 <div class="parent">
  <ul>
    <li><a href="#">Главная</a></li>
      <li>|</li>
    <li><a href="#">Творчество</a></li>
      <li>|</li>
	<li><a href="#">Фото</a></li>
      <li>|</li>
    <li><a href="#">Блог</a></li>
      <li>|</li>
    <li><a href="#">Вопрос автору</a></li>
      <li>|</li>
    <li><a href="#">Контакты</a></li>
  </ul>
 </div>
</nav>

CSS

.parent{
text-align:center;
}
nav ul{
display:inline-block;
//display:block;/*IE 6-8*/
list-style:none;
background-color: black;
}
nav li{
float:left;
font-size:20px;
font-weight:bold;
margin:10px;
}
li a{
color:white;
text-decoration:none;
}
li a:hover{
color:red;
}

Edited November 9, 2010 by Jawesome

[psywalker]

Jawesome

Дружище, дай мне свою аську, я свяжусь с тобой

[Jawesome]

Вроде сам разобрался.

Наткнулся в гугле на rar архив "41 меню" и разобрал пару вариантов по косточкам.

аська 196654476

думаю, она еще может пригодится

[psywalker]

Вроде сам разобрался.

Наткнулся в гугле на rar архив "41 меню" и разобрал пару вариантов по косточкам.

аська 196654476

думаю, она еще может пригодится

ок, если будут вопросы, то свяжусь.

[Jawesome]

При нестандартном разрешении(640x480) вся картина опять слетает.

Неужели зафиксировать намертво меню, чтобы появлялась горизонтальная полоса прокрутки, можно только через JS?

[rus]

При нестандартном разрешении(640x480) вся картина опять слетает.

Неужели зафиксировать намертво меню, чтобы появлялась горизонтальная полоса прокрутки, можно только через JS?

white-space:nowrap;

[mishka]

min-width

[rus]

display:inline-block;

кто лучше?

[Jawesome]

display:inline-block;

стоит, но он не для этого.

min-width

Вроде пошло. только эксплорер не до конца понимает,

но, думаю, ему можно ширину побольше задать хаком.

Спасибо, mishka2.

Edited November 9, 2010 by Jawesome

[psywalker]

Попробуй вот это дружище

*html body { width:expression(document.documentElement.clientWidth < 900 ? "900px" : "auto");}

[Jawesome]

Попробуй вот это дружище

*html body { width:expression(document.documentElement.clientWidth < 900 ? "900px" : "auto");}

Что-то не пашет.

А это CSS разве?

[psywalker]

Что-то не пашет.

А это CSS разве?

А это же минималка для ИЕ6

[Jawesome]

Я против IE6.

Для меня такого браузера нет.

Кто на нем сидит по своей воле, должен прекратить пользоваться интернетом.

Google вообще уже от windows отказывается, а динозавры все на IE6 сидят.

Edited November 9, 2010 by Jawesome

[psywalker]

Я против IE6.

Для меня такого браузера нет.

Кто на нем сидит по своей воле, должен прекратить пользоваться интернетом.

Google вообще уже от windows отказывается, а динозавры все на IE6 сидят.

Аа, я понял, мне просто не понятно вот это:

min-width

Вроде пошло. только эксплорер не до конца понимает,

но, думаю, ему можно ширину побольше задать хаком.

Что тут имелось ввиду и про какой браузер говорилось?

[arez]

.parent{
  margin-left:auto;
  margin-right:auto;
  width: 960px;
}

width по вкусу, 960 будет оптимально для большинства экранов

[psywalker]

.parent{
  margin-left:auto;
  margin-right:auto;
  width: 960px;
}

width по вкусу, 960 будет оптимально для большинства экранов

Можно проще

  margin: 0 auto;

  width: 960px;

[arez]

 margin: 0 auto;

не уверен что будет корректно работать в IE6, по моему он не любит этого

Edited November 9, 2010 by arez

[psywalker]

 margin: 0 auto;

не уверен что будет корректно работать в IE6, по моему он не любит этого

Хаа, ну ты прикалолся, смотри никому это не ляпни случайно)

Доктайп поставишь, всё отлично везде работает.

[Jawesome]

Аа, я понял, мне просто не понятно вот это:

Что тут имелось ввиду и про какой браузер говорилось?

Сейчас стоит IE9.

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

 margin: 0 auto;

не уверен что будет корректно работать в IE6, по моему он не любит этого

Такой вариант тоже работает.

Для IE6 есть такой прекрасный сайт http://enoughie6.com/

Edited November 10, 2010 by Jawesome