Вложенные списки с автоматической нумерацией - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Рецепты CSS » Вложенные списки с автоматической нумерацией
Вложенные списки с автоматической нумерацией
EvgenyДата: Четверг, 25.02.2010, 20:33 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Списки активно используются для автоматической нумерации блоков текста. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в HTML, можно возложить на стили.

Для начала рассмотрим, как вообще создавать вложенные списки. В качестве основного контейнера выступает тег < OL>, а элементы списка формируются тегами < LI>. Вложенный список также начинается с < OL>, но этот тег должен располагаться внутри контейнера < LI>, именно так соблюдается корректность синтаксиса (пример 1).

[small]Пример 1. Обычный вложенный список[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложенный список</title>
</head>
<body>
<ol>
<li>Пункт 1  
<ol>
<li>Подпункт 1.1</li>
<li>Подпункт 1.2</li>
<li>Подпункт 1.3</li>
</ol>
</li>
<li>Пункт 2  
<ol>
<li>Подпункт 2.1</li>
<li>Подпункт 2.2</li>
</ol>
</li>
</ol>
</body>
</html>

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


[small]Рис. 1. Вид вложенного списка[/small]

Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset, counter-increment и content.


    counter-reset — задает некоторую переменную, которая будет хранить значение счетчика;

    counter-increment — увеличивает или уменьшает значение счетчика на указанное число;

    content — выводит значение счетчика при использовании аргумента counter(переменная). Работает совместно с псевдоэлементами after или before.

Для списка первого уровня переменную счетчика назовем list1, а для второго уровня — list2. Тогда инициация счетчиков для списков будет следующей.

Code
OL { counter-reset: list1; } /* Список первого уровня */
OL OL { counter-reset: list2; } /* Список второго уровня*/

В данном случае отделить вложенный список от внешнего помогают контекстные селекторы. Конструкция OL OL означает применять стиль только к тегу < OL>, но только когда он располагается внутри другого тега < OL>.

Увеличение значения счетчика происходит через селектор OL LI:before, к которому добавляются стилевые атрибуты counter-increment и content. Атрибут counter-increment со значением list1 повышает значение этого счетчика на единицу, а content: counter(list1) ". " выводит значение счетчика перед пунктом списка. Эти атрибуты работают в паре, поэтому включать их надо одновременно.

Code
OL LI:before { /* Список первого уровня */
  counter-increment: list1; /* Увеличиваем значение счетчика */
  content: counter(list1) ". "; /* Выводим значение в виде 1., 2.*/
}
OL OL LI:before { /* Список второго уровня */
  counter-increment: list2; /* Увеличиваем значение счетчика */
  content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}

Для вложенного списка вновь применяем контекстные селекторы (OL OL) и одновременно используем вывод счетчика list1 и list2, в этом случае мы и получим нумерацию нужного нам вида.

Окончательный код приведен в примере 2.

[small]Пример 2. Вложенные списки с автонумерацией[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложенный список</title>
<style type="text/css">
LI { list-style-type: none; } /* Убираем исходную нумерацию */
OL { counter-reset: list1; } /* Инициируем счетчик */
OL LI:before {
  counter-increment: list1; /* Увеличиваем значение счетчика */
  content: counter(list1) ". "; /* Выводим значение */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
  counter-increment: list2; /* Увеличиваем значение счетчика */
  content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}
</style>
</head>
<body>
<ol>
<li>Пункт  
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт  
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>

Результат данного примера показан на рис. 2.


[small]Рис. 2. Вид автонумерации списка в браузере Opera[/small]

[off]Приведенный пример не работает в браузере Internet Explorer до 7 версии включительно, поскольку он не поддерживает ни одно из приведенных стилевых свойств.[/off]

Поскольку браузер Internet Explorer не поддерживает множество интересных стилевых атрибутов, специально для него обычную нумерацию в списках следует оставить неизменной. Для этого достаточно убрать list-style-type: none. Но это также затронет и другие браузеры, в которых пример работает корректно, поэтому придется воспользоваться хаком — так называется прием, когда разным браузерам дается разный стилевой код. Например, можно воспользоваться атрибутом !important. При добавлении !important к значению стилевого атрибута его важность повышается. Если переопределить значение того же атрибута без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

Code
LI {  
  list-style-type: none !important; /* Убираем нумерацию в браузерах Opera, Safari, Firefox */  
  list-style-type: decimal; /* Оставляем нумерацию в браузере IE6 и ниже */
}

Заменяя этим кодом строку с селектором LI в примере 2 получим вложенный список корректно работающий во всех браузерах.

 
Форум » Статьи о CSS » Рецепты CSS » Вложенные списки с автоматической нумерацией
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]