Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой?)
Код и подробности под катом.
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>
Пояснения:
Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное 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*/}
И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: http://gruzzilkin.110mb.com/nofloat/
И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.
h++p://habrahabr.ru/blogs/css/49756/
Оставьте первый комментарий