Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   www.boolean.name > Веб-программирование > Дизайн

Дизайн Оформление сайтов

Ответ
 
Опции темы
Старый 01.03.2013, 00:41   #1
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Иерархический нумерованный список средствами css

Пытаюсь сделать иерархический вложенный список средствами css. В интернетах предлагается решение вида:
ol{
  list-
stylenone;
  
counter-resetnum;
}
ol li:before{
  
contentcounters(num,'.'' ';
  
counter-incrementnum;

И это работало, пока я не захотел использовать несколько списков на одной странице. По моим наблюдениям проблема появляется в Опере всегда, а в других браузерах когда списки находятся в разных уровнях вложенности внутри 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
Просмотров: 916
Размер:	3.8 Кб
ID:	18876  
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 00:57   #2
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,861 пользователей)
Ответ: Иерархический нумерованный список средствами 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,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

На удивление подход с оборачиванием первого списка в div работает даже в опере.

Но если я не контролирую вложенность списков в блоки, например в блоге кто-то создаёт статью и хочет как-то необычно её отформатировать и сталкивается с такой проблемой?
Хочу прописать волшебные строчки в css и забыть о проблеме.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 01:56   #4
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,861 пользователей)
Ответ: Иерархический нумерованный список средствами 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,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

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

Решение по ссылке скоро посмотрю, будет круто, если поможет.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 04:09   #6
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

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

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

P.S. Скорее бы опера уже на вебкит перешла.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 06:37   #7
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

Прикол в том, что на сайте оперы: http://dev.opera.com/articles/view/a...-css-counters/ предлагается решение, подобное моему из первого поста. И оно работает на их примере с одним списком. Но если добавить в их код второй список, то понятное дело не работает.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 07:13   #8
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

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

ol li:before{
  
contentcounter(num' ';
  
counter-incrementnum;
}

ol ol{
  
counter-resetnum2;
}

ol ol li:before{
  
contentcounter(num'.' counters(num2,'.'' ';
  
counter-incrementnum2;

Я завёл два разных счётчика. Один - для корневых списков, а второй - для вложенных подсписков. В принципе по коду должно быть понятно.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 10:50   #9
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,861 пользователей)
Ответ: Иерархический нумерованный список средствами css

Опера - не броузер. Они сами это признали, решив перейти на WebKit. Популярность оперы на минимуме, и только распространена в восточной Европе. И то, не так и популярен.
Тем более блог ты пишешь не для сегодня, а "завтра", когда уже выйдет WebKit версия. Следственно я бы не парился поддерживать кривость текущей Оперы.
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Phantom (01.03.2013)
Старый 01.03.2013, 15:20   #10
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 15:22   #11
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,861 пользователей)
Ответ: Иерархический нумерованный список средствами css

Сообщение от Phantom Посмотреть сообщение
Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.
Любовь к Опере была основана на скорости? Ну это лишь за счёт их ужасного кеширования, которое всё в итоге портит.
Chrome - молодец.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 15:25   #12
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

Мне нравилось, что она плавно пролистывала страницы, работала быстро, при попытке что-то сверстать обычно глюки вылазили в IE, а с оперой всё было нормально. Хрома тогда ещё не было, сейчас пользуюсь им.
(Offline)
 
Ответить с цитированием
Старый 01.03.2013, 16:44   #13
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: Планета Земля
Сообщений: 4,140
Написано 2,335 полезных сообщений
(для 6,492 пользователей)
Ответ: Иерархический нумерованный список средствами css

Ах вот кому нужны эти нумерованые списки, а я то всё думал
__________________
Retry, Abort, Ignore? █
AMD Ryzen 7 1700X x8 3.4Ghz; 16Gb ram; Radeon RX 570
AMD Athlon II x4 2.6Ghz; 8Gb ram; Nvidia Geforce GTX 750 Ti
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Phantom (01.03.2013)
Старый 02.03.2013, 03:53   #14
Phantom
Элита
 
Аватар для Phantom
 
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,141
Написано 704 полезных сообщений
(для 1,740 пользователей)
Ответ: Иерархический нумерованный список средствами css

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

ol{
  
counter-resetnum1;
}
ol li:before{
  
counter-incrementnum1;
  
contentcounter(num1' ';
}

ol ol{
  
counter-resetnum2;
}
ol ol li:before{
  
counter-incrementnum2;
  
contentcounter(num1'.'
           
counter(num2' ';
}

ol ol ol{
  
counter-resetnum3;
}
ol ol ol li:before{
  
counter-incrementnum3;
  
contentcounter(num1'.'
           
counter(num2'.'
           
counter(num3' ';
}

ol ol ol ol{
  
counter-resetnum4;
}
ol ol ol ol li:before{
  
counter-incrementnum4;
  
contentcounter(num1'.'
           
counter(num2'.'
           
counter(num3'.'
           
counter(num4' ';
}

ol ol ol ol ol{
  
counter-resetnum5;
}
ol ol ol ol ol li:before{
  
counter-incrementnum5;
  
contentcounter(num1'.'
           
counter(num2'.'
           
counter(num3'.'
           
counter(num4'.'
           
counter(num5' ';

(Offline)
 
Ответить с цитированием
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


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


vBulletin® Version 3.6.5.
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com