четверг, 20 ноября 2008 г.

CSS горизонтальные списки

Горизонтальные списки полезны, например, при создании меню, списка ссылок и т.п. Лично я для создания меню традиционно использую таблицы (table), но это может быть не совсем правильно. Т.к. список -- это всё-таки структурированные данные, и для поисковой машины должен выглядеть в более выгодном свете. Это просто мои догадки, и возможно не совсем верные ;).

Итак, создадим структуру списка.

HTML: Неупорядоченный список (ul)


<ul class="listMenu">
<li><a href="http://dotrb.blogspot.com/search/label/HTML">HTML</a></li>
<li><a href="http://dotrb.blogspot.com/search/label/XML">XML</a></li>
<li><a href="http://dotrb.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://dotrb.blogspot.com/search/label/XSLT">XSLT</a></li>
</ul>

Создаём стили CSS для списка. Если задаёте стили в теле сообщения, заключайте их между тегами <style> и </style>.

CSS: Стили для списка


.listMenu {
margin:0; padding:0;
list-style-type:none;
}
.listMenu li {
display:inline;
}

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

CSS: Горизонтальное меню - список


.listMenu {
margin:0; padding:0;
list-style-type:none;
float:right;
}
.listMenu li {
font-family: Georgia, Times, serif;
display:inline;
padding:0px 4px;
}
.listMenu li a {
color:#000;
text-decoration:none;
}
.listMenu li a:hover {
color:#000;
text-decoration:none;
border-bottom:3px solid #C61A1A;
}

На этом краткий экскурс по спискам закончен :)

2 Комментариев :

auraz комментирует...

в ие не работает список ваш - остается вериткальынм

Croaker комментирует...

Прекрасно работает! ©
(это уже становится «копирайтом»)
Даже в IE6.
Скриншот: CSS - Горизонтальный список

Отправить комментарий

Жги!