forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)
-   Дизайн (http://forum.boolean.name/forumdisplay.php?f=138)
-   -   Иерархический нумерованный список средствами css (http://forum.boolean.name/showthread.php?t=17947)

Phantom 01.03.2013 04:41
Иерархический нумерованный список средствами css
 
Вложений: 1
Пытаюсь сделать иерархический вложенный список средствами css. В интернетах предлагается решение вида:
PHP код:
ol{
  list-style: none;
  counter-reset: num;
}
ol li:before{
  content: counters(num,'.') ' ';
  counter-increment: num;
} 
И это работало, пока я не захотел использовать несколько списков на одной странице. По моим наблюдениям проблема появляется в Опере всегда, а в других браузерах когда списки находятся в разных уровнях вложенности внутри DOM. Вот пример кода:
PHP код:
<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 без скриптов?

moka 01.03.2013 04:57
Ответ: Иерархический нумерованный список средствами css
 
Вложи первый список тоже в DIV.
http://jsfiddle.net/BQasT/

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

Phantom 01.03.2013 05:08
Ответ: Иерархический нумерованный список средствами css
 
На удивление подход с оборачиванием первого списка в div работает даже в опере.

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

moka 01.03.2013 05:56
Ответ: Иерархический нумерованный список средствами css
 
Не давай возможность в блогах делать сложные структуры, усложнения также негативны для читателя.
Не вижу смысла делать вложение в div.

Да и нашёл решение твой проблемы, вот тут: http://stackoverflow.com/questions/7...nswer-12348652
Этот CSS решает проблему с мульти OL.

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

Решение по ссылке скоро посмотрю, будет круто, если поможет. :)

Phantom 01.03.2013 08:09
Ответ: Иерархический нумерованный список средствами css
 
Пример по ссылке работает во всех браузерах кроме опять же оперы. Только теперь проблема иначе проявляется. У каждого вложенного подсписка нумерация идёт обычным образом. Вот пример (смотреть в опере):

http://jsfiddle.net/BQasT/2/

P.S. Скорее бы опера уже на вебкит перешла.

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

Phantom 01.03.2013 11:13
Ответ: Иерархический нумерованный список средствами css
 
Кажется я придумал решение. Тестировал на списках с разной иерархией и вкладывал списки в разные блоки на разную глубину в DOM. Проблем замечено не было. Вот код CSS:
PHP код:
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;
} 
Я завёл два разных счётчика. Один - для корневых списков, а второй - для вложенных подсписков. В принципе по коду должно быть понятно.

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

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

moka 01.03.2013 19:22
Ответ: Иерархический нумерованный список средствами css
 
Цитата:
Сообщение от Phantom (Сообщение 254058)
Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.
Любовь к Опере была основана на скорости? Ну это лишь за счёт их ужасного кеширования, которое всё в итоге портит.
Chrome - молодец.

Phantom 01.03.2013 19:25
Ответ: Иерархический нумерованный список средствами css
 
Мне нравилось, что она плавно пролистывала страницы, работала быстро, при попытке что-то сверстать обычно глюки вылазили в IE, а с оперой всё было нормально. Хрома тогда ещё не было, сейчас пользуюсь им.

Randomize 01.03.2013 20:44
Ответ: Иерархический нумерованный список средствами css
 
Ах вот кому нужны эти нумерованые списки, а я то всё думал

Phantom 02.03.2013 07:53
Ответ: Иерархический нумерованный список средствами css
 
В общем ни к чему более умному, чем прописать правила на пять уровней вложенности с разными счётчиками, я не пришёл. Этот быдлокод работает во всех устраиваемых меня браузерах:
PHP код:
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) ' ';
} 


Часовой пояс GMT +4, время: 14:17.

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