GruZZ 21 янв 2009 в 13:57

Горизонтальное меню без float

3 мин

20K

CSS *

+53

109

Комментарии 109

bettrrr 21 янв 2009 в 14:05

Если для себя, то уберите под кат и закройте запись.
И нет проблем.

GruZZ 21 янв 2009 в 14:12

легко

azizoid 21 янв 2009 в 14:21

кто бы что б ни говорил. СПАСИБО большое

l2k 23 янв 2009 в 02:30

Только что верстал сайт… Пришел выводу, что мою идею реализовать без inline-block вообще никак. :(

Идея простая — несколько блоков (div) поместить в блок, чтобы они уходили влево за границы этого блока и пропадали со скроллбаром по X. (ни в коем случае не по Y)

script 21 янв 2009 в 14:37

display: inline-block; — не понимают только FF1.5 и FF2.?.. (вместо знака вопроса — неизвестное число)
конечно, стремлюсь к кроссбраузерности. Но в данном случае, увы, использую просто display: inline;…
А все потому-что я такой плохой. Ну привык я, что пользователи, знающие что такое Firefox или Opera обновят свой браузер… а рабочее время на все эти дела (IE6+O9.6x+FF3) не очень получается тратить, хотя ужасно интересно найти между ними компромисс…
Но я принял для себя стандарт… может он и плохой, но меня не подвел…

GruZZ 21 янв 2009 в 15:20

Ваше право :) Если заказчик мне скажет: «Чтоб было валидно!», я скорее всего сделаю как раньше (если не удастся этого самого заказчика переубедить). Но я рад, что нашел для себя альтернативу, и она не так уж и бесполезна, мне кажется.

НЛО прилетело и опубликовало эту надпись здесь

GruZZ 21 янв 2009 в 15:13

Всегда приятно решить задачу без использования таблиц и с минимальными издержками. Стандарты это хорошо, но уж если выбирать между табличной разметкой и немного нестандартным CSS, я выберу второе.

vithar 21 янв 2009 в 19:56

С минимальными издержками это как раз таблица.

no_smoking 22 янв 2009 в 05:05

а решите завтро сделать вертикальное меню, и все перевёрствовать

vithar 22 янв 2009 в 07:13

Если «всё перевёрстывать» это заменить <td></td> на <td></tr><tr></td> и заменить класс b-hmenu на b-vmenu, то да, всё перевёрстывать.

p4sh0k 22 янв 2009 в 07:52

афтар жжот :D
теги местами перепутаны…
заменить на

yas375 22 янв 2009 в 09:22

вы наверное хотели сказать «заменить на » ;)

yas375 22 янв 2009 в 09:26

сорри, съелись тэги в пред посте.

вы наверное хотели сказать «заменить <td></td> на <td></td></tr><tr>» ;)

НЛО прилетело и опубликовало эту надпись здесь

Loengreen 22 янв 2009 в 07:55

Вы часто разбирались с чужими сайтами сверстанными таблицами???

Таблицы в html для того что бы выводить информацию соответствующего содержания. Вы то возможно и помните где какую таблицу с каким идентификатором используете, а вот для других людей верстка в DIV-ах будет выглядеть естественнее, понятнее (ну не пустое это слово семантика!!!).

К тому же, верстка DIV-ми проще. Это ведь охренеть можно потом прилаживать табличное горизонтальное меню к телу сайта, если оно (тело) имеет боковые границы. Возможно что сейчас это проблемы нет, но когда-то я тратил на это время и нервы. :(

vilky 22 янв 2009 в 23:16

А как сочетаются div и непустое слово «семантика»?

НЛО прилетело и опубликовало эту надпись здесь

Loengreen 22 янв 2009 в 23:45

Эм… Кажется вы написали скрипт-автоотвечалку на комментарии в которых встречаются слова «div» и «семантика».

Хорошо поясню еще раз. Верстка таблицами была оправдана когда:
1) по-другому просто нельзя было сделать
2) все стили были прописаны непосредственно в html документе

Не знаю как вас, но меня таблицы в чужих документах вводят в некоторый ступор. В лучшем случае верстальщик назначает элементам таблицы, которые имеют исключительно визуальное назначение, понятные идентификаторы отражающие цель использования этого элемента. В худшем случае верстальщик-оптимизатор добавляет к этим элементам класс из 2-х букв. С учетом того, что таблица используется не только для визуального оформления (в ней так же содержаться тексты, картинки и т.д.) часто бывает сложно понять где и для чего верстальщик использует элементы таблицы (тут у него просто пустая строка или это строка с каким-нибудь красивым визуальным разделителем? это пустая ячейка, которая заполнена в следующей строке или это контейнер для какого-нибудь элемента дизайна?).
Уверяю вас — я не тупой! Просто откройте чужой документ с табличной версткой и попробуйте разобраться в нем без inspect html. А теперь представьте, что вам в этом документе не пару слов с картинкой поменять, а сделать что-нибудь посерьезнее.
Разобраться иногда бывает достаточно сложно, но главное, сколько времени из-за этого отнимает плевая работа.

С DIV-ой версткой разбираться проще. Ну типо не надо представлять себе всегда всю структуру целиком, если код семантичный, то тексты все равно оформляются соответствующими тегами и DIV-ы выступают только в роди контейнеров. К тому же, верстая сайт таблицей вы из-за красивого хедера можете ввести таблицу из 12 колонок, когда сам контент потребует от 2 до 4, вот и появятся пустые элементами с разными colspan в которых кому-то потом придется разбираться.

DIV-ая верста более понятная, более естественная поэтому и «сочетается div и не пустое слово сематика».
Возможно вас покоробил мой тон? Уверяю вас, я не фанат блочной верстки, я — фанат быстро и качественно выполненной работы, за которую платят деньги. Именно по этому я и напирал на слово НЕПУСТОЕ.

karamba 22 янв 2009 в 09:30

Поддержка такого кода будет исключительно занимательным процессом. А это — существенная часть издержек.

Angerslave 21 янв 2009 в 19:20

Как раз таки у таблицы квадратные колёса из-за несемантичности.

vithar 21 янв 2009 в 19:56

Семантичность эфемерна.

Angerslave 21 янв 2009 в 20:02

Проходящая или несуществующая? Первой она врядли будет — из модной, но практически бесполезной фичи семантичность превратится в один из неотъемлемых частей веб-документов.

vithar 21 янв 2009 в 20:07

До тех пор пока не будет нормальной реализации CSS (да и в CSS ещё много чего не хватает), семантика будет эфемерной.

Angerslave 21 янв 2009 в 20:10

Нормальной или идеальной? Да и если в стандартах всё-всё будет описано, браузерам тоже нужно время, чтобы подтянуться.

RockBee 22 янв 2009 в 08:00

Привет!

Я против холиварсов, но здесь, кроме навигации, есть и другое применение: вывод картинок, например. Мне их не всегда удобно выводить таблицами. То же самое с навигацией и другими объектами.

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

А семантичоесть — она да, скорее эфемерна.

Тут, как всегда, всё зависит от задачи.

steinebel 22 янв 2009 в 05:18

Кто вам такое сказал? Таблица — это семантичный код. Читайте Зельдмана.

Angerslave 22 янв 2009 в 06:36

Таблица семантична для табличных данных. Для списков есть ul/ol.

vithar 22 янв 2009 в 07:13

А что есть для меню?

Angerslave 22 янв 2009 в 07:20

Смотря что из себя представляет меню. Обычно это список, но, например, таблица стоимостей различных продуктов со ссылками на их описание — меню-таблица. Но использовать таблицу для списков — или незнание (CSS), или нежелание знать, или просто «надоело париться с этими селекторами и прочей лабуденью». По себе знаю.

vithar 22 янв 2009 в 07:24

…или то, что списки не работают надёжно при неизвестном заранее контенте меню.

karamba 22 янв 2009 в 09:31

Шож это за меню то такое?

vithar 22 янв 2009 в 09:33

Абстрактно-реализованное.

karamba 22 янв 2009 в 12:05

Ну, тогда возможно абстрактно-реализованные списки помогут? :)

vithar 22 янв 2009 в 12:06

К сожелению нет.

dfuse 21 янв 2009 в 19:53

Допустим. А если надо сверстать меню, которое еще и будет на несколько строчек разделяться при растяге страницы? Кажется тут таблицы облажаются…

aps 14 апр 2009 в 04:17

Гады, заминусовали последнего рыцаря табличной верстки!

arestov 21 янв 2009 в 16:06

а display:-moz-inline-grid; хорошо себя ведёт? не праказничает если туда разные всякие блоки вставить? с float, например?

GruZZ 21 янв 2009 в 16:38

Скажу честно — капризничает. Для каждого конкретного случая нужен индивидуальный подход :)

НЛО прилетело и опубликовало эту надпись здесь

Angerslave 21 янв 2009 в 19:21

Хаки со временем уйдут, а идея останется:)

maxic 21 янв 2009 в 23:54

Хаки не ест красиво :)
Я встречал отцентрированные списки меню без float и работающие везде без хаков (в strict).

vittore 22 янв 2009 в 05:05

дык пример если так удачно киньте)

caIIIa 22 янв 2009 в 10:26

Видел, но в большинстве примеров была куча рун типа IF IE

WilliamKidd 21 янв 2009 в 19:25

Что вы думаете об этом способе? www.mauzon.com/?p=87 (кроме того, что там 2 «лишних» дива-обертки).

GruZZ 22 янв 2009 в 05:11

Спасибо, я о нем просто забыл! Блин, бывают же конфузы… Ну ничего, зато поупражнялся.

НЛО прилетело и опубликовало эту надпись здесь

maxic 21 янв 2009 в 23:59

Думаю те кто пользуется FF уже давно скачал FF3. Кстати интересна статистика на этот счет. Особенно процент FF2.

НЛО прилетело и опубликовало эту надпись здесь

maxic 22 янв 2009 в 01:12

Да, отсутствие «старых» плагинов + консерватизм пока играет не на руку FF3 :\

Buran 22 янв 2009 в 04:55

По статистике аналитикса группы хорошо посещаемых сайтов, пользователей Firefox 2 для рунета — 2,7%, для США — 3,4%.

+ offtop — Opera в рунете по тем же сайтам ровно треть, в США — 4,4%. IE в рунете 36%, в США 57%.

GruZZ 22 янв 2009 в 05:20

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

Panya 22 янв 2009 в 12:08

Кстати, картинки и без всяких ухищрений будут так себя вести :)

Buran 22 янв 2009 в 05:06

Коммент для общественности по поводу @-moz-document. Мозилла предлагает собственный @-rule преимущественно для user style sheets. Использовать это правило для Mozilla specific CSS — интересное решение.

По поводу того, что CSS невалиден могу сказать так — валидация кода нужна для выявления потенциальных ошибок, узких мест. Валидатор — не искусственный интеллект, и он не может знать, что какой-то браузер создал собственное решение для обхода своих же недостатков. Однако это свое решение не узкое место (почти) и не ошибка. Так что к невалидности в таких случаях можно относиться демократично.

Q_Zma 22 янв 2009 в 05:14

Cross Browser Support for inline-block Styling
Пример: выпадающее меню с использованием инлайн блока

GruZZ 22 янв 2009 в 05:27

Большое спасибо за ссылку! :)

Q_Zma 22 янв 2009 в 05:28

да не за что, за первую или вторую? :)

GruZZ 22 янв 2009 в 05:32

Тогда и за вторую тоже спасибо :)

mac2000 22 янв 2009 в 06:47

еще одно но

если нужно будет задать ширину*высоту для элементов списка — она не будет работать в ИЕ — так как элементы обозначены как inline

vithar 22 янв 2009 в 07:15

В MSIE isplay: inline ведёт себя как inline-block.

mac2000 22 янв 2009 в 08:37

как бы я хотел чтобы так оно и было :) но к сожалению это не так.

Вот наглядный пример того о чем я говорю:

hello
hello

mac2000 22 янв 2009 в 08:47

извиняюсь, поспешил написать… вот он, пример:
<ul>
<li style="display:inline;width:200px;background:#9C6">hello</li>
<li style="display:inline-block;width:200px;background:#6CF">hello</li>
</ul>

Panya 22 янв 2009 в 08:52

Да, но при условии, что у элемента врублен hasLayout

НЛО прилетело и опубликовало эту надпись здесь

WebMast 22 янв 2009 в 07:59

Что сложного, заменить float:left; на display:inline;? И стоят эти стили в одном месте. И результат почти один и тот же… Только inline дает больше возможностей в расположении. Любой верстальщик должен это знать!

Panya 22 янв 2009 в 08:13

Че-то больно вы дохрена кода ненужного наворотили. Достаточно написать:

#content LI {
  display:-moz-inline-grid;
  display:inline-block;
  margin:0 -2px;
  vertical-align:top;
}

И для IE:

<!--[if lte IE 7]>
<style type="text/css">
  #content LI {
    display:inline;
    margin:0;
  }
</style>
<![endif]-->

mac2000 22 янв 2009 в 08:29

тогда уже вот так:

#content LI {
display:-moz-inline-grid;
display:inline-block;
margin:0 -2px;
vertical-align:top;
}
* html #content LI {display:inline;margin:0;}

Panya 22 янв 2009 в 08:33

А IE7?

mac2000 22 янв 2009 в 08:41

ой, извиняйте, что то я не проснулся еще… вот так нужно:

#content LI {
display:-moz-inline-grid;
display:inline-block;
margin:0 -2px;
vertical-align:top;
//display:inline;
//margin:0;
}

Panya 22 янв 2009 в 08:49

CC все же лучше, чем грязные инлайн хаки, хотя бы потому что не нужно будет ничего исправлять с выходом IE8.

GruZZ 22 янв 2009 в 08:41

Да это все из-за двух пиксельного отступа между строчными блоками. Просто хотелось чтоб без него :)

Panya 22 янв 2009 в 08:47

Так и будет без него. (Кстати, для IE еще не мешало бы hasLayout врубить, а то некоторые блочные свойства не будут работать).

GruZZ 22 янв 2009 в 09:08

Мда. Каюсь, увлёкся.

reader 22 янв 2009 в 09:35

Будет без отступа если не ставить пробелы между элементами ...</li><li>…

Panya 22 янв 2009 в 09:39

Да, пробельные символы это и есть причина этих отступов, но модифицировать исходный код из-за них считаю не лучшей идеей.

НЛО прилетело и опубликовало эту надпись здесь

Panya 22 янв 2009 в 11:39

Нет, вы конечно правы, я согласен, что подгонка с помощью отрицательных маржинов тоже не выход, но что делать. А вы можете предложить какой-нибудь другой метод решения этой проблемы, кроме убирания пробельных символов из исходного кода?

НЛО прилетело и опубликовало эту надпись здесь

tarya 22 янв 2009 в 09:23

Я с недавних пор пользуюсь JS скриптом что посоветовал тут на хабре один парень — этот JS идентифицирует броузер и операционную систему и добавляет соответствующий класс для тега body, оказалось невероятно гибко и удобно. Если ранее нужно было делать отдельно файл стилей для ие, как то их цеплять, правила что там как исключения прописывали были оторваны от основного файла что все осложняло в последующем редактировании, поиске правил и все такое.

Сейчас у меня все проблемы ушли. Можно прописать правило для любого браузера используя лишь уникальный класс.

Пример:

div#header {
height: 93px;
position: relative;
background: red;
}

.win.ie6 div#header {
height: 94px;
}

Panya 22 янв 2009 в 09:30

Ага, а потом вырубить JS и ужаснуться. Нет уж, только CC.

НЛО прилетело и опубликовало эту надпись здесь

Panya 22 янв 2009 в 10:47

Я живу в реальном мире, где до сих пор самый распространенный браузер IE, самое распространенное разрешение экрана — 1024x768, и где до сих пор существуют тысячи пользователей с выключенным JS. И мне важно, чтобы сайт нормально функционировал как с JS так и без него. А фиксить визуальное отображение элементов при помощи JS, когда есть альтернативный способ без JS, вообще считаю глупостью. Особенно таким способом, когда браузер определяется путем парсинга свойства userAgent.

marapper 22 янв 2009 в 12:03

Это не должно мешать продумывать «пути отступления».

Половина сайтов захлебнется моментально еще и из-за глупости разрабов, которые забыли, например, к зааяксенным добавить прямые ссылки на отдельные страницы — но это издевательство, особенно, учитывая то, что не всегда дожидаешься загрузки монструозных js-ов. А еще есть NoScript — для параноиков безопасности.

tarya 22 янв 2009 в 10:48

ну если так мыслить то и картинки нужно отключить, и моник ЧБ 10''. Я лично пока еще не встречал людей отключающих JS. 99% всех пользователей не знают что это такое даже.

Потому я не переживаю.

aps 14 апр 2009 в 04:38

ставить js-script в body — неэстетично, а если добавлять свойство восле загрузки в dom — появляются прыжки. Тоже некрасиво. Ну и вообще лишнее это.

bolk 22 янв 2009 в 10:26

О, мои CSS-хаки пошли в народ :)

tarya 22 янв 2009 в 10:58

Если это твое — то разработка что нужно. Очень выручает. Как по мне — лучший вариант. Правда если что нужно его обновлять, чтоб новые браузеры хавал. Например Хром там. хотя в нем все и так ровно, но на всяк выпадок.

Вообще спасибо. Самое оно.

НЛО прилетело и опубликовало эту надпись здесь

aps 14 апр 2009 в 04:44

Без js все равно никуда не денемся, это вы правы абсолютно.
Но использовать их для исправления таких багов — все равно что травить тараканов ядерным взрывом.
Есть средства более дешевые и безопасные.

warmrobot 22 янв 2009 в 13:26

На первый взгляд ничем не отличается от этого:
www.brunildo.org/test/ImgThumbIB.html

НЛО прилетело и опубликовало эту надпись здесь

warmrobot 26 янв 2009 в 08:40

ну-да, я не совсем верную ссылку дал. Вот соседняя: www.brunildo.org/test/ImgThumbIBL.html
Должно работать везде.

НЛО прилетело и опубликовало эту надпись здесь

gryzzly 22 янв 2009 в 13:41

Метод Токмакова можно улучшить, если клиринг использовать не :after {content:'' и т.д.} а overflow:auto для блока, относительно которого центрируешь. Хотя один лишний див все-таки остается, да.

gryzzly 22 янв 2009 в 13:45

<style type="text/css">
    .align_center {
        position: relative;
        width: 100%;
        overflow:auto;
    }
    .align_center_to_left {
        position: relative;
        right: 50%;
        float: right;
    }
    .align_center_to_right {
        position: relative;
        z-index: 1;
        right: -50%;
    }
</style>
<div class="align_center" style="border: 1px dashed red; color: red;">
Выравниваем относительно этого блока.
    <div class="align_center_to_left">
        <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;">
            Ширина блока зависит от размера надписи.
        </div>
    </div>
</div>

jcd 24 янв 2009 в 11:51

Неплохо бы указывать источник:
www.artlebedev.ru/tools/technogrette/html/align-center/

gryzzly 24 янв 2009 в 12:52

habrahabr.ru/blogs/css/49756/#comment_1306540 «метод Токмакова»

gryzzly 24 янв 2009 в 12:52

а ссылка на сам метод есть в теле поста какбэ

jcd 24 янв 2009 в 13:04

Ок, теперь после обновления топика все хорошо и понятно что к чему комментировалось, а до этого при беглом просмотре было не очень ;)

gryzzly 22 янв 2009 в 13:46

Еще, автор, если Вам не сложно, может быть обновите пост с наиболее интересными вариантами, предложенными в комментариях?

Dr_Death 22 янв 2009 в 16:55

Firefox 2.0.0.20 users offered a free upgrade!

Earlier this month, Mozilla offered an update for all Firefox 2.0.0.20 users — a free upgrade to Firefox 3.0.5, the very latest and best browser from Mozilla offering more speed, requiring less memory, and providing the safest and easiest web browsing experience available.

Firefox 2 users last received a “major update” in December, prior to the final release of Firefox 2. As of this point, Mozilla will no longer be actively issuing security and stability updates to Firefox 2. Additionally, Firefox 2 will no longer have Phishing Protection as of January 20.

We strongly recommend that our users upgrade to Firefox 3.

поэтому думаю насчет ff2 заморачиваться более не стоит!

Dr_Death 24 янв 2009 в 06:53

ну и кому тут что не понравилось?

Over 22 янв 2009 в 17:17

Firefox'a 2 осталось всего 3 процента. Я думаю, не стоит и заморачиваться. Тем более, эти -moz-inline-ххххх подглючивают неплохо так.

set 24 янв 2009 в 08:43

попробовал ваш вариант… в моём случае он не подошёл… как-то странно себя повели элементы внутри этого -moz-inline-grid. мне больше по душе -moz-inline-box, он более предсказуем и ближе к inline-block, как мне кажется… использую его не только для меню. всё это, конечно, ИМХО…

Panya 24 янв 2009 в 11:19

с -moz-inline-xxx ситуация такая, что нужно просто перебирать возможные значения (-moz-inline-grid, -moz-inline-stack, -moz-inline-box), они ведут себя по разному. Но, по моим наблюдениям, лучше всего себя ведет -moz-inline-stack. Также не мешает заключить то, что в элементе с -moz-inline-xxx в какой-нибудь блочный элемент, чаще всего это исправляет многие баги.

set 24 янв 2009 в 11:26

спасибо за совет, как-нибудь попробую…

gryzzly 1 фев 2009 в 14:14

Вот решение основанное на display:table-cell для нормальных и display:inline с hasLayout для инвалидов;
Сегодня использовал в проекте; Работает в фф2/3, сафари3, опера 9.5, ие6/7, больше не тестил;

<style type="text/css">
#header {
	background:black;
    font-size:1.4em;
}
    #header a {
        color:#fff;
    }
	#header div {
		margin:0 auto;
		display:table;
	}
		#mainmenu,#languages {
			display:table-cell;
            list-style:none;
		}
		#mainmenu li, #languages li {
			float:left;
                       margin-left:0.3em;
		}
</style>
<!--[if lt IE 8]>
<style type="text/css" media="all">
    #header div {/* block with centered inline-blocks elements */
        display: block;
        text-align:center;
    }
        #mainmenu, #languages {/* setting blocks to be "inline-blocks" (display:inline with hasLayout)*/
            display:inline;
            zoom:1;
        }
</style>
<![endif]-->
<div id="header">
      <div>
        <ul id="mainmenu">
          <li>
            <a href="#">Download</a>
          </li>
          <li>
             <a href="#">Cashier</a>
          </li>
          <li>
            <a href="#">About Us</a>
          </li>
        </ul>
        <ul id="languages">
          <li>
            <a href="#">English</a>
          </li>
          <li>
            <a href="#">FRANÇAIS</a>
          </li>
          <li>
            <a href="#">Deutsch</a>
          </li>
          <li>
            <a href="#">ESPAŇOL</a>
          </li>
        </ul>
    </div>
</div>

Зарегистрируйтесь на Хабре, чтобы оставить комментарий