Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> вложенные списки 
:(
    Опции темы
zFermer
Дата 21.1.2012, 20:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.7.2011

Репутация: нет
Всего: нет



есть пример:

Код

<ol>
    <li class="_NLI">aaa</li>
    <li class="_NLI">
        aaa
        <ul>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
        </ul>
    </li>
    <li class="_NLI">aaa</li>
    <li class="_NLI">aaa</li>
    <li class="_NLI">aaa</li>
    <li class="_NLI">
        aaa
        <ol>
            <li class="_NLI">
                aaa
                <ol>
                    <li class="_NLI">aaa</li>
                    <li class="_NLI">aaa</li>
                    <li class="_NLI">
                        aaa
                        <ul>
                            <li>aaa</li>
                            <li>aaa</li>
                            <li>aaa</li>
                        </ul>
                    </li>
                </ol>
            </li>
            <li class="_NLI">aaa</li>
        </ol>
    </li>
    <li class="_NLI">aaa</li>
</ol>

<ul>
    <li>
        aaa
        <ol>
            <li class="_NLI">
                aaa
                <ol>
                    <li class="_NLI">aaa</li>
                    <li class="_NLI">
                        aaa
                        <ul>
                            <li>aaa</li>
                            <li>
                                aaa
                                <ol>
                                    <li class="_NLI">aaa</li>
                                </ol>
                            </li>
                            <li>aaa</li>
                        </ul>
                    </li>
                    <li class="_NLI">aaa</li>
                </ol>
            </li>
            <li class="_NLI">aaa</li>
            <li class="_NLI">aaa</li>
            <li class="_NLI">aaa</li>
        </ol>
    </li>
    <li>aaa</li>
    <li>aaa</li>
</ul>


и css код:

Код

li{ list-style-position: inside; list-style-type: none !important; }
ol{ counter-reset: list1; }
ol ._NLI:before{ counter-increment: list1; content: counter(list1) ". "; }
ol ol{ counter-reset: list2; }
ol ol ._NLI:before{ counter-increment: list2; content: counter(list1) "." counter(list2) ". "; }
ol ol ol{ counter-reset: list3; }
ol ol ol ._NLI:before{ counter-increment: list3; content: counter(list1) "." counter(list2) "." counter(list3) ". "; }
ol ol ol ol{ counter-reset: list4; }
ol ol ol ol ._NLI:before{ counter-increment: list4; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) ". "; }
ol ol ol ol ol{ counter-reset: list5; }
ol ol ol ol ol ._NLI:before{ counter-increment: list5; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) "." counter(list5) ". "; }
ol ol, ol ul, ul ul, ul ol{ margin: 0 0 0 10px; }
ul li:before{ content: "• "; }


Хотелось сдлеать универсально чтобы любые списки в любые вставлять можно было. Но вот не могу решить проблему клгда списки нумерные чередуються с не нумерными.
Проблема в том что стиль игнорирует что между тегами ol и ol еще находиться тег ul и продолжает нумерацию (как во втором списке) можно ли какнибут ьрегить эту проблему? или мб есть уже готовое решение более элегантное на css?
PM MAIL   Вверх
SelenIT
Дата 22.1.2012, 03:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Как вариант, отслеживать всю цепочку:
Код

ol > li > ol { counter-reset: list2; }
ol > li > ol > ._NLI:before{ counter-increment: list2; content: counter(list1) "." counter(list2) ". "; }
ol > li > ol > li > ol { counter-reset: list3; }
ol > li > ol > li > ol > ._NLI:before { counter-increment: list3; content: counter(list1) "." counter(list2) "." counter(list3) ". "; }
и т.д.

Но лично я не вижу смысла в такой уже универсальности, чтобы ради этого было оправдано такое раздувание CSS и усложнение селекторов. Имхо, многоуровневый нумерованный список — задача довольно штучная (кроме чего-то типа оглавления, особых "юзкейсов" на ум и не приходит), для него вполне можно и каждому уровню класс задать...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
zFermer
Дата 22.1.2012, 15:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 26.7.2011

Репутация: нет
Всего: нет



Спасибо большое, избавился от класса _NLI я догадывался что должна быть эта ">" только не омг найти какже она именно пишеться. Спасибо!

В проекте именно постоянно такие списки поэтому и использую.

Конечный вариант

Код

li{ list-style-position: inside; list-style-type: none !important; list-style-type: decimal; }
ol{ counter-reset: list1; }
ol > li:before{ counter-increment: list1; content: counter(list1) ". "; }
ol > li > ol{ counter-reset: list2; }
ol > li > ol > li:before{ counter-increment: list2; content: counter(list1) "." counter(list2) ". "; }
ol > li > ol > li > ol{ counter-reset: list3; }
ol > li > ol > li > ol > li:before{ counter-increment: list3; content: counter(list1) "." counter(list2) "." counter(list3) ". "; }
ol > li > ol > li > ol > li > ol{ counter-reset: list4; }
ol > li > ol > li > ol > li > ol > li:before{ counter-increment: list4; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) ". "; }
ol > li > ol > li > ol > li > ol > li > ol{ counter-reset: list5; }
ol > li > ol > li > ol > li > ol > li > ol > li:before{ counter-increment: list5; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) "." counter(list5) ". "; }
ul > li:before{ content: "• "; }
ol ol, ol ul, ul ul, ul ol{ margin: 0 0 0 10px; }

PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0668 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.