Код и подробности под катом.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- * {
- padding:0;
- margin:0;
- border:0;
- }
- #content {
- margin:50px;
- padding:50px;
- background:#eee;
- text-align:center;
- list-style:none;
- white-space:nowrap;
- }
- #content LI {
- display:inline-block;
- margin:0 -2px;
- vertical-align:top;
- }
- #content LI A {
- display:inline-block;
- background:#f9f9f9;
- border:#ccc 1px solid;
- margin:0 2px 0 0;
- padding:5px 15px;
- text-decoration:none;
- color:#00f;
- vertical-align:bottom;
- }
- #content LI A:hover {
- color:#f00;
- background:#fff;
- }
- @-moz-document url-prefix() {
- #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
- #content LI {margin:0 -2px;} /*For FF*/
- #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/
- }
-
- </style>
- <!--[if lte IE 7]>
- <style type="text/css">
- #content LI {
- display:inline;
- margin:0;
- }
- </style>
- <![endif]-->
-
- <title>Title</title>
- </head>
-
- <body>
-
- <ul id="content">
- <li><a href="#">Главная</a></li>
- <li><a href="#">О нас</a></li>
- <li><a href="#">О вас</a></li>
- <li><a href="#">О них</a></li>
- <li><a href="#">Ссылки</a></li>
- <li><a href="#">Форум</a></li>
- </ul>
-
- </body>
- </html>
* This source code was highlighted with Source Code Highlighter.
Пояснения:
Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой? upd: habrahabr.ru/blogs/css/49756/#comment_1306559)
Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!
Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает :(
Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;
@-moz-document url-prefix() {
#content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
#content LI {margin:0 -2px;} /*For FF*/
#content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/}
И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat
И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.
UPD: По просьбе gryzzly выкладываю наиболее интересные варианты, предложенные в комментариях:
- www.mauzon.com/?p=87 — горизонтальное выравнивание меню, основанного на плавающих блоках. Способ всем хорош, только используется лишний оберточный DIV
- Как всегда, я навалил кучу лишнего кода. минимизируем
- Несколько вариантов, так или иначе использующих display:inline-block:
www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css,
foohack.com/2007/11/cross-browser-support-for-inline-block-styling,
www.brunildo.org/test/ImgThumbIB.html.