На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Изготовление меню из блоков с использованием CSS

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

Начнем с того, что все элементы, находящиеся на странице, образуют блоки. Блоки разные по свойствам, возможностям, предназначению. Блоки образуют и обычные ссылки.

Что нам надо для обычного горизонтально расположенного меню:


BODY { MARGIN: 0px;
PADDING: 0px;
background-color: #A8C228;
FONT-SIZE: 10px;
}

A {display: inline;
background-color:#fff;
width: auto;
height: 20px;
border:3px solid #FF5200;
color:#000000;
font-family: Verdana, sans-serif;
FONT-SIZE: 12px;
text-decoration: none;
text-align: center;
font-weight: bold;
padding: 3px;
}

A:hover {
display: inline;
background-color:#005CC0;
border:3px double #FF5200;
color:#fff;
}

Вот это и есть описание простого горизонтального меню без использования таблиц. Что тут есть такого, чего мы еще не встречали...

Самое главное — display: inline; Ссылка образует блок и без нашей помощи, но он не виден. Чтоб сделать блок видимым, мы должны его специально выделить — мол, не просто это блок, а видимый невооруженным глазом, с установленными нами лично свойствами блок. Для этого прописываем: display: block; Все. Теперь описываем все знакомые нам свойства блоков. Обратите внимание, что разные описания у нас стоят для ссылки и для ссылки под мышкой!

Если мы прописываем display: inline;, то мы получаем не просто блок, а строковый блок. В противном случае мы не сможем разместить блоки-ссылки друг за другом по горизонтали.

Далее. Высоту блоков в описании мы задали фиксированно, а вот ширину назначили auto. Это значит, что ширина блока будет растягиваться до того значения, которое обеспечит размещение содержимого с учетом всех рамок и отступов.

Посмотрите результат

Мы можем при необходимости вывести получившиеся блоки из потока, назначив им абсолютное позиционирование, или использовать как строковые элементы.

Если мы оставим display: block; мы сможем без проблем сделать вертикальное меню заданной ширины.


A.m {display: block;
background-color:#ffffff;
width: 100px;
height: auto;
border:3px solid #FF5200;
color:#000000;
font-family: Verdana, sans-serif;
FONT-SIZE: 12px;
text-decoration: none;
text-align: center;
font-weight: bold;
padding: 3px;
}

A.m:hover {
display: block;
background-color:#005CC0;
border:3px solid #fff;
color:#fff;
}

Отличие только в двух записях: display: block; и height: auto;. Что мы имеем с height: auto; Мы не назначаем явно высоту блоков, но прописываем их ширину, в этом случае наши "коробочки" будут растягиваться по высоте.

Посмотрите результат

Мы получаем меню, которое почти ничего не "весит", на странице почти не указывается отдельным описанием, меняется при наведении мышки. Обратите внимание еще на два больших плюса — в меню можно вписать любые по размеру ссылки, в том числе и с дополнительным описанием, активной областью-ссылкой является не только сам текст, но и весь блок. Не очень много, но жизнь посетителю это может облегчить...

На что стоит обратить внимание. В данном примере вертикального меню ссылки переносились на новую строку "в принудительном порядке", при помощи BR, а расстояние по вертикали зависело от размеров шрифта, заданного в описании БОДИ. Можно этого не делать, а задать блокам внешний отступ, тогда все ссылки данного класса будут автоматически переноситься на новую строку и располагаться друг от друга на расстоянии внешнего отступа. Кроме того, стоит иметь ввиду, что меню сделанно "на половину". Есть еще состояние ссылки при нажатии, посещенные ссылки.

Алямкин Илья Юрьевич
S.T.Y.L.E.mtk.on.ufanet

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100