Горизонтальное меню оформляется с использованием тега <ul> при разработке дизайна на слоях. В табличном дизайне горизонтальное меню создается по другому принципу, о чем мы будем говорить при рассмотрении тега <table>.
Для наглядности нашего примера сначала создадим слой id=container (100%-ой ширины и с рамкой), который во всех примерах имеет одинаковые параметры. А в нем уже будем создавать меню.
| Пример 1. Начинаем строить горизонтальное меню. Сначала создаем обычный список, элементы которого являются ссылками. Устанавливаем стили для идентичного отображения в IE и FF (см. описание ul#top_menu1) |
| Пример 2. А теперь ВНИМАНИЕ! Добавление одного стиля превращает вертикальное меню в горизонтальное! Этот стиль "float: left". А применяется он к каждому элементу списка (см. описание: ul#top_menu2 li {...}). Обратите внимание: - цвет фон для меню перестал отображаться; - отсутствуют отступы между пунктами меню; - хорошо бы выравнить меню по центру. FF 2.x: здесь дела похуже. Рамка контейнера превратилась в полосу! |
| Пример 3. Чтобы между пунктами меню появились отступы, зададим для тега <li> стили "margin-left: 10px; margin-right: 10px;". Отступы справа и слева задаются для правильного центрирования меню. Для исправления остальных недостатков создаем дополнительный слой id=menu_outer3, в котором будем задавать стили для форматирования списка: "margin-left: auto; margin-right: auto" - центрирование меню; "height: 20px" - зададим явно высоту слоя с меню. FF слои без указания высоты не переваривает; "width: 600px" - ширина слоя зависит от количества пунктов в меню. Ее нужно задавать, чтобы меню правильно отцентрировалось.Если зададите недостаточную ширину, то меню разъедется на две строки. Для отображения ширины слоя для него задан зеленый фон. |
Просмотров: 19531
Коментарии (10) |
 |
|
 |
|
|
Пример 3, изображенный выше не центрируется! Это происходит из-за того, что слои находятся внутри таблице! А при верстке на слоях таблицы НЕ должно быть. Результат этого случая см. внизу страницы
 |
|||
 |
 |
 |
 |
|
 |
|
|
Еще про тонкости центрирования слоя в ИЕ (в частности, версии 6.х). В наших примерах стили прописаны на самой странице. Если стили перенести в css-файл. То в ИЕ пример 3, который внизу страницы сломается (опять прилипнет к левому краю). Чтобы вернуть все на место, в css-файле надо прописать один стиль для тега body:
body { text-align: center; } |
|||
 |
 |
 |
|
|
|
|
|
как растянуть равномерно по всей ширине ссылки??? очень нужно
|
|||
|
|
|
|
|
|
|
|
в интернет магазине пробывал переход и у меня не получилось.. в чем может быть пробелма?
|
|||
|
|
|
|
|
|
|
|
http://pav-podarok.ru
|
|||
|
|
|
|
|
|
|
|
ivent.com.ua
|
|||
|
|
|
|
|
|
|
|
http://ivent.com.ua
|
|||
|
|
|
|
|
|
|
|
Your articles are for when it ablotulesy, positively, needs to be understood overnight.
|
|||
|
|
|
|
|
|
|
|
Mighty useful. Make no mistake, I apaecripte it.
|
|||
|
|
|
|
|
|
|
|
Народ, как вытянуть горизонтальное меню на всю ширину, чтобы была width 100%? пункты меню получаются не по середине, а прижимаются к левому краю? Автор, может сделаешь пример, очень надо
 |
|||
|
|
|
Добавить коментарий