Как отцентрировать горизонтальный «плавающий» список
Алекс Маузон нашел гениальное и простое решение проблемы с выравниванием по центру навигации, являющей собой горизонтальный список, без применения таблиц. За это ему положенный респект!
Идея заключается во вложении контейнера <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». Здесь вы сможете выбрать любой из пятнадцати предлагаемых уровней комфортности гостиницы.
Комментарии (20)
>еще несколько вещей, используемых мною на практике, достигаются как раз за счет противоположных отступов для нескольких вложенных друг в друга блоков
Интересно что это за вещи. Можно кратко?
Да, конечно можно. По крайней мере, 2 примера набирается:
1) Центрирование блока с известной шириной и высотой, содержащего небольшое количество информации, горизонтально и вертикально на странице. Пример. Правда, здесь оба противоположных отступа задаются для одного блока.
2) Трехколоночный макет, в котором для контента указывается положительный отступ, а для левой и правой колонки — отрицательный, при этом все три блока «плавающие». Как раз планирую написать об этом заметку.
простите, а автополя уже отменили?
Zigzag, автополя не помогают, потому что сами ссылки или элементы списка «плавающие» и неизвестна их точная ширина.
упс, сорри, действительно пропустил момент с неизвестной шириной. звиняйте.
А так не проще?
html:
CSS:
Проще, но часто бывает необходимо, чтобы
<li>был блоком, а не строчным элементом.А почему не так? По-моему намного проще. Ссылочки хорошо чувствуют себя блоками, если не хватает, можно еще спаны в них блочные вставить:
XAMelleOH, спасибо! Да, действительно так проще. Сейчас проверил. Вроде бы во всех браузерах работает, как надо. У меня, кстати, на компьютере уже давно лежит подобный пример на английском языке, но там как-то все запутанно, поэтому я так и не стал в нем разбираться.
А еще жалко что с помощью этого трюка нельзя сделать выпадающее меню… дизайнеры так часто этого хотят… :(
а вот такой способ кто-нть знает?
Ваш способ такой же как и тот что предложен автором, отличие только в том куда флотить вправо или влево. Вы скажете что избавились от одного блока, но это не так. Так как в случае о котором говорит автор, верхнему блоку задается фиксированная ширина и вся менюшка не падает при уменьшении окна, если его убрать то она будет себя вести так же как в вашем примере
Спасибо! А то я начал делать нумерацию страниц по li и вообще все нервы вымотал с центрированием дивов… весь инет перерыл, спасибо вам фух :)
Я думал я идиот, оказалось тут хитрость) все получилось, спасибо большое! Сложно было совместить центрирование списка и jquery. lavalamp)
А у меня почему-то при использовании такого центрирования появляется горизонтальная полоса прокрутки (во всех браузерах), в чем может быть дело?
Dimox, а есть ли смысл становиться (самообучаться) хтмл верстке? ведь сейчас и верстальщиков тоже развелось?
Если душа к этому лежит, и есть желание, то да.
Dimox, а что восстребованнее я немного верстать умею, но мне как-то с трудом дается вот хочется попробовать себя в веб-дизайне как вы оценивате эту профессию, учиться учился на строителя по специальности работал, но толку не мое это да и сейчас по стройке работы мало,
Что веб-дизайнеры, что веб-верстальщики востребованы. Пробуйте и занимайтесь тем, что больше нравится.
Помогло, спасибо. Лови тычок :)