Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяCSS Кое-что о списках

Кое-что о списках

Многие начинающие веб-дизайнеры даже не подозревают, насколько мощным и удобным инструментом являются списки. Да-да, самые обычные ненумерованые (впрочем и нумерованные тоже) списки, именно те самые, заключенные между тегами
<li> и </li>
Множество дизайнерских трюков, для которых прежде применялись скрипты, можно реализовать, используя только списки и некоторые стилевые правила.

Итак, для начала сделаем элементарный список:
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
в браузере мы увидим:
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

Но нам нужна большая функциональность, и более изящное оформление, не так ли? Придется подключать CSS - между открывающим и закрывающим тегом head вставляем строчку , а уже в самом css-файле определяем стили.
#list {
margin: 2em;
width: 10em;
padding: 5px;
}
Допустим, нам понадобился список с особыми маркерами. Как мы поступали раньше? Создавали таблицу, в одной колонке размещали картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах
<li>
Теперь CSS позволяет использовать изображение в качестве маркера:
list-style-image: url(bullet.png);
Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай):
list-style-type: disc;
Чтобы изображение, выбранное вами в качестве маркера, не "выползло" за границы списка (например при смене разрешения), поместите изображение внутрь блока
<li>
list-style-position: inside;

В результате содержимое css файла:
#list {
margin: 2em;
width: 10em;
padding: 5px;
}
ul {
list-style-image: url(bullet.png);
list-style-type: disc;
list-style-position: inside;
}
На экране превратится в:
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
Примечание: стили для списка
list-style-image: url(bullet.png);
list-style-type: disc;
list-style-position: inside;

можно безболезненно заменить на одну строчку
list-style: disc url(bullet.gif) inside;

Списки необязательно должны располагаться вертикально - иногда по соображениям дизайнера (например для меню или навигационной панели) элементы должны выстроиться в одну строку. Это достигается элементарно - в свойствах элемента
<li>
указываем display: inline;
Кроме того, иногда стандартных стилей оформления (атрибутов disc, circle или square) может не хватить, а графику (list-style-image) по определенным причинам использовать нельзя. На помощь придут псевдоэлементы :before и :after - тогда стилевое правило будет выглядеть так:
#list ul li:before {
content: "\00BB";
}

Следует помнить, что младшие версии IE не дружат с CSS 2, поэтому пользователи интернет експлорера ничего не заметят. Все остальные (Opera, Safari, Firefox, Konqueror, etc) корректно отображают элементы :before и :after. С их помощью можно отображать как обычные символы, так и элементы псевдографики - для этого надо указать шестнадцатеричный (Hex) код в качестве аргумента.
В результате (с учетом inline и before) css файл:
#inline {
margin: 2em;
padding: 5px;
}
#inline li:before {
content: "\00BB";
}
#inline ul, #inline li {
display: inline;
margin: 0;
padding: 0;
font-weight: bold;
}
В браузере покажет:
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
Иногда необходимо выделить один из элементов списка. Попробуем реализовать это с помощью CSS. Для начала опишем общие стили:
#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
Затем добавим класс .here (с его помощью и будем выделять нужный пункт):
#tabs ul li.here {
border-bottom: 1px solid #fff;
list-style: none;
display: inline;
}
а в html одному из элементов списка присвоим этот класс:
<li class="here">Пункт 3</li>
В результате увидим:

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5


По материалам alistapart.com. Это далеко не вся и далеко не полная информация о списках и приемах работы с ними. Постепенно я буду добавлять новые методы как по спискам в частности, так и по CSS в целом, а все желающии могут мне помочь в этом, просто оставляя коментарии.
Категория: CSS
Опубликовано: 24 января 2008, Обновлено: 19.01.2013 - 20:09 просмотров: 1522
 (Голосов: 1)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.31 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.