Параграфы в списке

Likeit · May 7, 2010

Как сделать список, где перечислялись бы параграф? То есть одновременно нумированный, и со знаком параграфа?

rash · May 7, 2010

То есть §1, §2, §3...?

Только средствами верстки кроссбраузерно — никак. А не кроссбраузерно (для нормальных браузеров должно работать) — смотрим в сторону CSS-счетчиков и генерируемого содержимого.

Хотя и тут не все гладно. Из CSS 2.1 убрали свойство display: marker, которое позволяло создавать полноценные маркеры списка, поэтому сейчас можно только позиционированием выносить сгенерированные маркеры при необходимости.

Ой, простите, наверное я слишком сложно расписал в этом разделе (если вы все поняли — отлично!).

В общем, простого способа нет, если это не принципиально — вписывайте нумерацию в тексте.

Likeit · May 7, 2010

Да нет, не совсем уж я нуб

Все круто, но есть две пролемы, не читает код параграфа, просто выдает код символа, значком тоже не вставляет

И вторая, как сделать нумерацию не с нуля?

Edited May 7, 2010 by Likeit

rash · May 7, 2010

В counter-reset можно задать начальное значение.

<!DOCTYPE html>

<title>Custom ordered list</title>

<style>
	ol {
		list-style-type: none;
		counter-reset: item 3;
	}
	li:before {
		content: '§' counter(item) '. ';
		counter-increment: item;
		font-weight: bold;
	}
</style>

<ol>
	<li>Lorem ipsum
	<li>Dolor sit amet
	<li>Consecteur
</ol>

Likeit · May 8, 2010

Отлично!! Спасибо большое, не знаю, где меня переклинило, но этот вариант больше похож на правду

Следугающий вопрос, как контенту задать стиль? Получается, что знак параграфа идет после номера списка, нужно как то поменять их местами, как?

Плиииз

Int · May 8, 2010

&sect ;

http://ru.wikipedia.org/wiki/%D0%9C%D0%BD%...%B8_%D0%B2_HTML

Edited May 8, 2010 by Int

psywalker · May 9, 2010

rash

А есть вариант кроссбраузерный, как ты привёл? Если да, то поделись плиз

Ayaweb · May 9, 2010

А как сделать, чтобы список нумировался не по возрастанию, а по убыванию?

то есть если я ставлю counter-reset: item 160; то получается §161 §162 §163, а мне нужно §160 §159 §158.

Такое реально? Пробую ставить

content: '§' counter(160-item) '. ';

Но естественно ничего не вышло

rash · May 11, 2010

Следугающий вопрос, как контенту задать стиль? Получается, что знак параграфа идет после номера списка, нужно как то поменять их местами, как?

Гм... так в моем примере знак параграфа идет перед номером списка...

Значение свойства content можно составить из нескольких разных фрагментов текста, посмотрите в примере: content: '§' counter(item) '. ' — здесь мы сначала отображаем знак параграфа, потом — его номер, а потом — точку и пробел, которые отделяют номер параграфа от текста элемента списка.

А как сделать, чтобы список нумировался не по возрастанию, а по убыванию?
то есть если я ставлю counter-reset: item 160; то получается §161 §162 §163, а мне нужно §160 §159 §158.
Такое реально? Пробую ставить
content: '§' counter(160-item) '. ';
Но естественно ничего не вышло

Вот как-то так:

<!DOCTYPE html>

<title>Custom ordered list</title>

<style>
	ol {
	list-style-type: none;
	counter-reset: item 161;
	}
	li:before {
	content: '§' counter(item) '. ';
	counter-increment: item -1;
	font-weight: bold;
	}
</style>

<ol>
	<li>Lorem ipsum
	<li>Dolor sit amet
	<li>Consecteur
</ol>

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

psywalker · May 12, 2010

rash

А я кстати помню, на Хабре где-то ифна была, про кросс-браузерные счётчики, вот не помню, только где.

rash · May 12, 2010

Это: http://habrahabr.ru/blogs/css/69055/

Ну так там экспрешн... Так и без хабра можно сделать -)

psywalker · May 12, 2010

Это: http://habrahabr.ru/blogs/css/69055/
Ну так там экспрешн... Так и без хабра можно сделать -)

Спасиб за ссылку.

Ну кто-то может, а кому-то до этого ещё ого-го)

Sign In

Параграфы в списке

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information