Автоматическая нумерация строк

Vlad · November 12, 2007

Как всем известно, для добавления номеров строк используются теги OL и LI. Придумал, как обойтись без этих тегов с помощью counter и content и сделал занятный пример.

<!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">
div.example {
 counter-reset: item; /* Обнуляем счетчик списка */
 background: #f0f0f0; /* Цвет фона */
 border: 1px solid #333; /* Параметры рамки */
}
div.example p {
 margin: 0; /* Обнуляем отступы */
}
div.example p:before {
 content: counter(item, decimal-leading-zero); /* Добавляем число */
 background: #800000; /* Цвет фона под числами */
 color: #fff; /* Цвет чисел */
 padding: 0 5px; /* Поля слева и справа */
 margin-right: 7px;
 counter-increment: item; /* Задаем имя счетчика */
}
</style>
</head>
<body> 

<div class="example">
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p>
<p><html></p>
<p> <head></p>
<p>  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></p>
<p>  <title>Пример веб-страницы</title></p>
<p> </head></p>
<p><body></p>
<p> <h1>Заголовок</h1></p>
<p> <!-- Комментарий --></p>
<p> <p>Первый абзац.</p></p>
<p> <p>Второй абзац.</p></p>
<p></body></p>
<p></html></p>
</div> 

</body>
</html>

Пример работает в Firefox 1.5; 2, Opera 8.5; 9. Про IE, естественно, никто не вспоминает, он половины параметров не знает.

Пока не решил следующие проблемы:

1. при уменьшении окна нумерация "разбивается", смотрится некрасиво.

2. в Firefox-е под каждым числом тонкая полоска видна, не могу понять, откуда взялась.

YETI · November 12, 2007

Долбаный ие я даже и не знал что в css бывает такое, поскольку никогда не пользовался и в примерах нигде не видел . А вообще действительно интересный пример.

gordi · November 13, 2007

2. в Firefox-е под каждым числом тонкая полоска видна, не могу понять, откуда взялась.

div.example p {
 margin:0 0 -1px; /* Обнуляем отступы */
}

tenshi · November 13, 2007

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

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

rash · November 13, 2007

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

Ну почему же? Сами по себе - по-моему довольно удобная и хорошая штука, а вот что касается реализации в одном очень разном браузере - это да...

Vlad · November 14, 2007

Действительно, проблемы с псевдоэлементами наблюдаются только в одном браузере, остальные прекрасно все понимают и отображают.

Yarik Voronov · November 17, 2007

Пока не решил следующие проблемы:
1. при уменьшении окна нумерация "разбивается", смотрится некрасиво.

Влад, если вопрос еще актуален, то вот 2 варианта:

1. C "красивым" переносом, когда остаютя слева красные поля:

div.example {
 ...
 border-left:27px solid #800000;
}
div.example p {
 ...
 margin-left: -27px;
 padding-left: 30px;
 text-indent:-30px;
}
div.example p:before {
 ...
}

2. вообще без переносов:

div.example {
 ...
 overflow:auto;
}
div.example p {
 ...
 white-space:nowrap;
}
div.example p:before {
 ...
}

<div class="example">
<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p>
...
<p style="margin-bottom:0px;"></html></p> <!--Чтобы не появлялась прокрутка в FF по вертикали-->
</div>

bars · April 25, 2012

2. в Firefox-е под каждым числом тонкая полоска видна, не могу понять, откуда взялась.

Это из-за line-height:

<style>
...

div.example p {
 margin: 0; /* Обнуляем отступы */
line-height:1em;
}

...
</style>

Так нет полос.

Sign In

Автоматическая нумерация строк

Question

Vlad

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

YETI

Link to comment

Share on other sites

gordi

Link to comment

Share on other sites

tenshi

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Yarik Voronov

Link to comment

Share on other sites

bars

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information