Статистика
Онлайн всего: 1 Гостей: 1 Пользователей: 0
|
Статьи
Списки a la MS Word
Некоторое время назад Kukutz интересовался у меня, как с помощью HTML/CSS можно
верстать многоуровневые нумерованные списки «как в ворде». В тот момент мне в
голову пришел только извратный вариант использования list-style-image или
background-image, где нумерация типа «1.3.» задавалась бы графикой. Дурацкая
идея, конечно.
Но пару дней назад я вспомнил о некоторых замечательных
CSS свойствах. Полистав спецификацию, я понял, что задача решаема, при этом
будет сохранена семантика в HTML. Единственное (но самое важное!) ограничение —
абсолютно правильно работает пример только в Opera 7.0. Я тестировал в более
ранних версиях этого браузера (нумерация в списках нарушается), а также в
Mozilla 1.0 и Internet Explorer 6.0 (априори не должно работать) — увы и ах.
Возможно, в более свежих версиях Gecko-based браузеров всё хорошо, я не могу
сказать.
Решается всё следующим CSS кодом
ol>li{
display:block
}
ol>li:before{
content:counters(item,".")
". ";
counter-increment:item
}
ol{
counter-reset:item
}
Обратите
внимание на пробел во фрагменте ". ". С его помощью мы создаём отступ между
нумерацией и текстом. CSS 2 селекторы (ol>li) используются для того, чтобы не
обрабатывались элементы вложенных ненумерованных списков.
HTML код
получается простым и семантически верным:
<ol> <li>one <ol>
<li>one-one <ol>
<li>one-one-one</li>
<li>one-one-two</li>
<li>one-one-three</li> </ol>
</li> <li>one-two</li>
<li>one-three</li>
</ol> </li> <li>two</li> <li>three
<ol> <li>three-one</li>
<li>three-two</li> <li>three-three</li>
</ol> </li> </ol>
Теорию про
счётчики и автоматическую нумерацию рассказывать не буду. Кому интересно — см.
спецификацию.
Источник: http://www.internet-technologies.ru/articles/article_391.html |
| Категория: CSS | Добавил: mas (16-Сентября-2006)
|
| Просмотров: 838
| Рейтинг: 0.0/0 |
|
