Как отцентрировать горизонтальный “плавающий” список
Алекс Маузон нашел гениальное и простое решение проблемы с выравниванием по центру навигации, являющей собой горизонтальный список, без применения таблиц. За это ему положенный респект!
Идея заключается во вложении контейнера <ul> в 2 дополнительных блока:
- для первого из них задается основная ширина;
- для второго задается положительный 50%-ный отступ слева;
- для самого блока списка задается отрицательный 50%-ный отступ слева, дабы “аннулировать” смещение от родительского блока;
- для 2-го и 3-го блоков указывается свойство “плавающего” (float: left) и для всех 3-х блоков - относительное позиционирование (position: relative).
Лучше посмотреть готовый пример: горизонтальный “плавающий” список по центру.
Данная техника проверена и одинаково работает во всех популярных браузерах: IE 6, IE 7, Opera 9, FireFox 2, Netscape 8, Safari 3.
Берем на вооружение!
P.S. Кстати, замечаю, что еще несколько вещей, используемых мною на практике, достигаются как раз за счет противоположных отступов для нескольких вложенных друг в друга блоков.
* * *
Доступные цены, уютные и чистые комнаты - вот что характеризует гостиницы Ярославля от компании «ОТЕЛЬ 76». Здесь вы сможете выбрать любой из пятнадцати предлагаемых уровней комфортности гостиницы.
>еще несколько вещей, используемых мною на практике, достигаются как раз за счет противоположных отступов для нескольких вложенных друг в друга блоков
Интересно что это за вещи. Можно кратко?
Да, конечно можно. По крайней мере, 2 примера набирается:
1) Центрирование блока с известной шириной и высотой, содержащего небольшое количество информации, горизонтально и вертикально на странице. Пример. Правда, здесь оба противоположных отступа задаются для одного блока.
2) Трехколоночный макет, в котором для контента указывается положительный отступ, а для левой и правой колонки - отрицательный, при этом все три блока “плавающие”. Как раз планирую написать об этом заметку.
простите, а автополя уже отменили?
Zigzag, автополя не помогают, потому что сами ссылки или элементы списка “плавающие” и неизвестна их точная ширина.
упс, сорри, действительно пропустил момент с неизвестной шириной.. звиняйте.
А так не проще?
html:
2
3
4
5
6
7
8
9
<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>
</div>
CSS:
2
3
4
5
6
7
8
9
10
11
12
13
14
text-align:center;
}
#menu ul {
list-style:none;
}
#menu ul li {
position: relative;
display: inline;
margin-left:10px;
margin-right:10px;
}
Проще, но часто бывает необходимо, чтобы <li> был блоком, а не строчным элементом.
А почему не так? По-моему намного проще. Ссылочки хорошо чувствуют себя блоками, если не хватает, можно еще спаны в них блочные вставить:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
list-style-type:none;
list-style-image:none;
text-align:center;
border: solid 1px red;
}
ul li{
display: -moz-inline-box;
margin-right:20px;
background: blue;
padding: 5px;
}
ul li{
display:inline-block;
}
* html .footer ul li{ display:inline;}
*+html .footer ul li{ display:inline;}
ul li a{
color:#000;
font-size:12px;
display: block;
padding: 20px;
background: red;
}
XAMelleOH, спасибо! Да, действительно так проще. Сейчас проверил. Вроде бы во всех браузерах работает, как надо. У меня, кстати, на компьютере уже давно лежит подобный пример на английском языке, но там как-то все запутанно, поэтому я так и не стал в нем разбираться.
А еще жалко что с помощью этого трюка нельзя сделать выпадающее меню… дизайнеры так часто этого хотят… :(
P.S. Нельзя из-за overflow: hidden; у самого внешнего блока.
а вот такой способ кто-нть знает?
Спасибо! А то я начал делать нумерацию страниц по li и вообще все нервы вымотал с центрированием дивов… весь инет перерыл, спасибо вам фух :)
Ваш способ такой же как и тот что предложен автором, отличие только в том куда флотить вправо или влево. Вы скажете что избавились от одного блока, но это не так. Так как в случае о котором говорит автор, верхнему блоку задается фиксированная ширина и вся менюшка не падает при уменьшении окна, если его убрать то она будет себя вести так же как в вашем примере
Я думал я идиот, оказалось тут хитрость) все получилось, спасибо большое! Сложно было совместить центрирование списка и jquery.lavalamp )
А у меня почему то при использовании такого центрирования появляется горизонтальная полоса прокрутки(во всех браузерах), в чем может быть дело?