CMS Joomla! для начинающих - UL. Горизонтальное меню

Партнеры

Опрос (НОВЫЙ!)

Интересна ли Вам тема интернет-магазина для Джумлы?

	Не интересна
	Да, собираюсь создавать магазин
	Да, есть сайт с магазином (на Joomla 1.0.x)
	Да, есть сайт с магазином (на Joomla 1.5.x)

Авторизация

Последние 3 записи в Гостевой

Елена Васильева

Перед покупкой прилегающей одежды важно знать вашу форму тела. Некоторые женщины имеют неправильное представление о том, что ношение прилегающей одежд

Продолжить

Slimera Garcinia Cam

. You can select any trustworthy hospital when you purchase slimming tablets online.So searching for a sliming treatment? Wish to loose weight as earl

Продолжить

Фактор 4

Этот тип упражнений делается на коленях или лежа на животе. Это упражнение также устраняет напряжение в спине и шее, которое можно получить, делая скр

Продолжить

Кто на сайте?

Статистика

Пользователей: 4939
Ссылок: 57

Спонсоры

UL. Горизонтальное меню

Автор Иван Мензуркин (старший лаборант)

29.01.2008 г.

Горизонтальное меню оформляется с использованием тега <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" - ширина слоя зависит от количества пунктов в меню. Ее нужно задавать, чтобы меню правильно отцентрировалось.Если зададите недостаточную ширину, то меню разъедется на две строки. Для отображения ширины слоя для него задан зеленый фон.

Коментарии (10)


	Пример 3, изображенный выше не центрируется! Это происходит из-за того, что слои находятся внутри таблице! А при верстке на слоях таблицы НЕ должно быть. Результат этого случая см. внизу страницы

Иван Мензуркин, 13:00 29 января 2008 г.


	Еще про тонкости центрирования слоя в ИЕ (в частности, версии 6.х). В наших примерах стили прописаны на самой странице. Если стили перенести в css-файл. То в ИЕ пример 3, который внизу страницы сломается (опять прилипнет к левому краю). Чтобы вернуть все на место, в css-файле надо прописать один стиль для тега body: body { text-align: center; }

Иван Мензуркин, 07:28 14 февраля 2008 г.


	как растянуть равномерно по всей ширине ссылки??? очень нужно

Вадим Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script , 21:44 21 сентября 2010 г.


	в интернет магазине пробывал переход и у меня не получилось.. в чем может быть пробелма?

Правитель, 07:56 28 октября 2011 г.


	http://pav-podarok.ru

он же, 07:57 28 октября 2011 г.


	ivent.com.ua

Сеня, 16:51 19 мая 2012 г.


	http://ivent.com.ua

Сеня, 16:52 19 мая 2012 г.


	Your articles are for when it ablotulesy, positively, needs to be understood overnight.

Fidelis, 12:10 31 июля 2013 г.


	Mighty useful. Make no mistake, I apaecripte it.

Moha, 14:50 05 августа 2013 г.


	Народ, как вытянуть горизонтальное меню на всю ширину, чтобы была width 100%? пункты меню получаются не по середине, а прижимаются к левому краю? Автор, может сделаешь пример, очень надо