Как в css сделать нумерованный список в

как в css сделать нумерованный список в Незарегистрированный

Регистрация Справка Календарь
Дизайн Оформление сайтов
Ответ

 

 

Старый 01.03.2013, 00:41   #1

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Иерархический нумерованный список средствами css

Пытаюсь сделать иерархический вложенный список средствами css. В интернетах предлагается решение вида:
ol{
  list-style: none;
  counter-reset: num;
}
ol li:before{
сделать   content: counters(num,'.') ' ';
  counter-increment: num;

И это работало, пока я не захотел использовать несколько списков на одной странице. По моим наблюдениям проблема появляется в Опере всегда, а в других браузерах когда списки находятся в разных уровнях вложенности внутри DOM. Вот пример кода:
<ol>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ol>

<div>
  
  <ol>
    <li>Пункт 1</li>
    <li>Пункт 2
      <ol>
        <li>Пункт 2.1</li>
        <li>Пункт 2.2
          <ol>
            <li>Пункт 2.2.1</li>
            <li>Пункт 2.2.2</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Пункт 3
      <ol>
        <li>Пункт 3.1</li>
      </ol>
    </li>
  </ol>
  
</div> 

Второй список я засунул в div, тем самым погрузив его на один уровень глубже, относительно первого списка. При такой конструкции во всех браузерах счётчики в css работают нелогично. Для второго списка появляется дополнительная нумерация так, словно этот список является вложенным в первый список. Прикладываю картинку, демонстрирующую, что я ожидаю получить, а что в итоге получается.
Есть ли решение данной проблемы для современных браузеров IE9+ средствами css без скриптов? Миниатюры Нажмите на изображение для увеличения Название: lists.png Просмотров: 762 Размер: 3.8 Кб ID: 18876   (Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 00:57   #2

moka

.

 

Регистрация: 04.08.2006

Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,858 пользователей)

Ответ: Иерархический нумерованный список средствами css

Вложи первый список тоже в DIV.
http://jsfiddle.net/BQasT/
И используй jsfiddle.net в будущем для примеров - очень помогает другим тебе помочь, т.к. не нужно стараться произвести ситуацию заного.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Эти 2 пользователя(ей) сказали Спасибо moka за это полезное сообщение:

Phantom (01.03.2013), St_AnGer (01.03.2013)

 

Старый 01.03.2013, 01:08   #3

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

На удивление подход с оборачиванием первого списка в div работает даже в опере.
Но если я не контролирую вложенность списков в блоки, например в блоге кто-то создаёт статью и хочет как-то необычно её отформатировать и сталкивается с такой проблемой?
Хочу прописать волшебные строчки в css и забыть о проблеме.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 01:56   #4

moka

.

 

Регистрация: 04.08.2006

Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,858 пользователей)

Ответ: Иерархический нумерованный список средствами css

Не давай возможность в блогах делать сложные структуры, усложнения также негативны для читателя.
Не вижу смысла делать вложение в div.
Да и нашёл решение твой проблемы, вот тут: http://stackoverflow.com/questions/7...nswer-12348652
Этот CSS решает проблему с мульти OL.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Сообщение было полезно следующим пользователям:

Phantom (01.03.2013)

 

Старый 01.03.2013, 02:20   #5

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

Блог будет о программировании, где в первую очередь сам буду писать. Сейчас делаю набор css правил для распространённых конструкций при публикации статей: абзацы, заголовки, таблицы, списки и т. п. Но не хочу ограничиваться этими рамками и хочу иметь возможность использовать любой html и javascript код в статьях, если потребуется.
Решение по ссылке скоро посмотрю, будет круто, если поможет. (Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 04:09   #6

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

Пример по ссылке работает во всех браузерах кроме опять же оперы. Только теперь проблема иначе проявляется. У каждого вложенного подсписка нумерация идёт обычным образом. Вот пример (смотреть в опере):
http://jsfiddle.net/BQasT/2/
P.S. Скорее бы опера уже на вебкит перешла.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 06:37   #7

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

Прикол в том, что на сайте оперы: http://dev.opera.com/articles/view/a...-css-counters/ предлагается решение, подобное моему из первого поста. И оно работает на их примере с одним списком. Но если добавить в их код второй список, то понятное дело не работает.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 07:13   #8

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

Кажется я придумал решение. Тестировал на списках с разной иерархией и вкладывал списки в разные блоки на разную глубину в DOM. Проблем замечено не было. Вот код CSS:
ol{
  list-style: none;
  counter-reset: num;
}

ol li:before{
  content: counter(num) ' ';
  counter-increment: num;
}

ol ol{
  counter-reset: num2;
}

ol ol li:before{
  content: counter(num) '.' counters(num2,'.') ' ';
  counter-increment: num2;

Я завёл два разных счётчика. Один - для корневых списков, а второй - для вложенных подсписков. В принципе по коду должно быть понятно. (Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 10:50   #9

moka

.

 

Регистрация: 04.08.2006

Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,858 пользователей)

Ответ: Иерархический нумерованный список средствами css

Опера - не броузер. Они сами это признали, решив перейти на WebKit. Популярность оперы на минимуме, и только распространена в восточной Европе. И то, не так и популярен.
Тем более блог ты пишешь не для сегодня, а "завтра", когда уже выйдет WebKit версия. Следственно я бы не парился поддерживать кривость текущей Оперы.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Сообщение было полезно следующим пользователям:

Phantom (01.03.2013)

 

Старый 01.03.2013, 15:20   #10

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 15:22   #11

moka

.

 

Регистрация: 04.08.2006

Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,858 пользователей)

Ответ: Иерархический нумерованный список средствами css

Сообщение от Phantom Посмотреть сообщение

Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.

Любовь к Опере была основана на скорости? Ну это лишь за счёт их ужасного кеширования, которое всё в итоге портит.
Chrome - молодец. (Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием

 

Старый 01.03.2013, 15:25   #12

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

Мне нравилось, что она плавно пролистывала страницы, работала быстро, при попытке что-то сверстать обычно глюки вылазили в IE, а с оперой всё было нормально. Хрома тогда ещё не было, сейчас пользуюсь им.

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom

 

Старый 01.03.2013, 16:44   #13

Randomize

[object Object]

 
Аватар для Randomize  

Регистрация: 01.08.2008

Адрес: Планета Земля

Сообщений: 4,086
Написано 2,297 полезных сообщений
(для 6,411 пользователей)

Ответ: Иерархический нумерованный список средствами css

Ах вот кому нужны эти нумерованые списки, а я то всё думал

__________________
Retry, Abort, Ignore? █
Пека: AMD Athlon II x4 2.6Ghz; 8Gb ram; Nvidia Geforce GTX 750 Ti

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Randomize Сообщение было полезно следующим пользователям:

Phantom (01.03.2013)

 

Старый 02.03.2013, 03:53   #14

Phantom

Элита

 
Аватар для Phantom  

Регистрация: 14.06.2008

Адрес: Украина, Киев

Сообщений: 2,088
Написано 671 полезных сообщений
(для 1,672 пользователей)

Ответ: Иерархический нумерованный список средствами css

В общем ни к чему более умному, чем прописать правила на пять уровней вложенности с разными счётчиками, я не пришёл. Этот быдлокод работает во всех устраиваемых меня браузерах:
ol{
  list-style: none;
}

ol{
  counter-reset: num1;
}
ol li:before{
  counter-increment: num1;
  content: counter(num1) ' ';
}

ol ol{
  counter-reset: num2;
}
ol ol li:before{
  counter-increment: num2;
  content: counter(num1) '.'
           counter(num2) ' ';
}

ol ol ol{
  counter-reset: num3;
}
ol ol ol li:before{
  counter-increment: num3;
  content: counter(num1) '.'
           counter(num2) '.'
           counter(num3) ' ';
}

ol ol ol ol{
  counter-reset: num4;
}
ol ol ol ol li:before{
  counter-increment: num4;
  content: counter(num1) '.'
           counter(num2) '.'
           counter(num3) '.'
           counter(num4) ' ';
}

ol ol ol ol ol{
  counter-reset: num5;
}
ol ol ol ol ol li:before{
  counter-increment: num5;
  content: counter(num1) '.'
           counter(num2) '.'
           counter(num3) '.'
           counter(num4) '.'
           counter(num5) ' ';

(Offline) Нажмите, если это сообщение было для вас полезным Ответить с цитированием Phantom Ответ

« Предыдущая тема | Следующая тема »


Ваши права в разделе

Вы не можете создавать темы

Вы не можете отвечать на сообщения

Вы не можете прикреплять файлы

Вы не можете редактировать сообщения

BB коды Вкл.

Смайлы Вкл.

[IMG] код Вкл.

HTML код Выкл.


Часовой пояс GMT +1, время: 00:11.



vBulletin® Version 3.6.5.
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Перевод: zCarot



Источник: http://forum.boolean.name/showthread.php?p=254090


Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как сделать многоуровневый нумерованный список на html css, чтобы Гувернер вышивка все наборы

Как в css сделать нумерованный список в Как сделать список в HTML - маркированный, нумерованный
Как в css сделать нумерованный список в Иерархический нумерованный список средствами css - me
Как в css сделать нумерованный список в Измените нумерованные списки с помощью CSS
Как в css сделать нумерованный список в Маркированный и нумерованный список HTML
Как в css сделать нумерованный список в Css ul отступ вложенные списки
Как в css сделать нумерованный список в Нумерованный список
Как в css сделать нумерованный список в 15 лучших афоризмов Омара Хайяма мудрость через века
Как в css сделать нумерованный список в 7 нот здоровья Гель антицеллюлитный "Бадяга плюс ламинария
Афоризмы и цитаты про время Вязаный жилет для ребенка 1 /3 - 6/9 - 12/18 месяцев - 2 года Исчерпывающая инструкция о том, как перешить Как одеваться женщинам с пышными формами Блог о стиле Как сделать красивое фото? Компании : продукты питания оптовая продажа овощи Короткие поздравления с днем рождения Полный медицинский справочник фельдшера Смерть мужа Стихи