Главная arrow СЕЛЕКЦИЯ arrow UL. Горизонтальное меню
17.12.2017 г.

Joomla для начинающих

Темы

Типичное упражнение - подъемы ног, согнутых в коленях. Это упражнение повторяется десятки раз в серии. Оно заключается в монотонных движениях коленей в направлении грудной клетки.

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

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

Авторизация






Забыли пароль?

Последние 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
Этот тип упражнений делается на коленях или лежа на животе. Это упражнение также устраняет напряжение в спине и шее, которое можно получить, делая скр

Спонсоры

Все для бизнеса. Готовый интернет магазин - шоп конструктор ру, недорого. SEO в подарок.

Здоровье вебмастера

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

 

 

 

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


Просмотров: 17399

Коментарии (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%? пункты меню получаются не по середине, а прижимаются к левому краю? Автор, может сделаешь пример, очень надо :?
 
Олег, 14:33 01 октября 2013 г.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Последнее обновление ( 29.01.2008 г. )
 
Далее...

 
   

Пример 3 для статьи "UL. Горизонтальное меню" (работающий корректно)

2007+ © "efft" Lab

Яндекс цитирования