Pull to refresh

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

Reading time 3 min
Views 20K
Пост скорее для себя, чем для других.
Код и подробности под катом.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. * {
  7.   padding:0;
  8.   margin:0;
  9.   border:0;
  10. }
  11. #content {
  12.   margin:50px;
  13.   padding:50px;
  14.   background:#eee;
  15.   text-align:center;
  16.   list-style:none;
  17.   white-space:nowrap;
  18. }
  19. #content LI {
  20.   display:inline-block;
  21.   margin:0 -2px;
  22.   vertical-align:top;
  23. }
  24. #content LI A {
  25.   display:inline-block;
  26.   background:#f9f9f9;
  27.   border:#ccc 1px solid;
  28.   margin:0 2px 0 0;
  29.   padding:5px 15px;
  30.   text-decoration:none;
  31.   color:#00f;
  32.   vertical-align:bottom;
  33. }
  34. #content LI A:hover {
  35.   color:#f00;
  36.   background:#fff;
  37. }
  38. @-moz-document url-prefix() {
  39.   #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
  40.   #content LI {margin:0 -2px;} /*For FF*/        
  41.   #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/
  42. }
  43.  
  44. </style>
  45. <!--[if lte IE 7]>
  46. <style type="text/css">
  47. #content LI {
  48.   display:inline;
  49.   margin:0;
  50. }
  51. </style>
  52. <![endif]-->
  53.  
  54. <title>Title</title>
  55. </head>
  56.  
  57. <body>
  58.  
  59. <ul id="content">
  60.   <li><a href="#">Главная</a></li>
  61.   <li><a href="#">О нас</a></li>
  62.   <li><a href="#">О вас</a></li>
  63.   <li><a href="#">О них</a></li>
  64.   <li><a href="#">Ссылки</a></li>
  65.   <li><a href="#">Форум</a></li>
  66. </ul>
  67.     
  68. </body>
  69. </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 выкладываю наиболее интересные варианты, предложенные в комментариях:
Tags:
Hubs:
+53
Comments 109
Comments Comments 109

Articles