Multi-level in an OL

Question

Multi-level in an OL

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

I'm trying to get the following result:

Introduction

1.1. Content

1.2. Programming

1.2.1. JAVA

1.2.2. DOTNET



Conclusion

2.1. Thanks

2.1.1 Family

2.1.2. Teachers



End

Using the following HTML :

<ol>
    <li>Apresentacao</li>
    <ol>
        <li> Conteudo </li>
        <li> Programação </li>
        <ol>
            <li> JAVA </li>
            <li> DOTNET </li>
        </ol>
    </ol>
    <li>Conclusão</li>
    <ol>
        <li> Agradecimentos</li>
         <ol>
            <li> Família </li>
            <li> Professores </li>
        </ol>
    </ol>
    <li>Fim</li>
</ol>

I got closer through the following CSS :

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

Example

But it still causes some problems.

Is there a resource of CSS or HTML to get to my result?

html css

asked by anonymous 05.09.2014 / 15:34

2 answers

2

One possible solution:

body {
    counter-reset: chapter; /* contador de capitulos */
}
ol {
   list-style-type: none;
}
.chapter > li:before {
   counter-increment: chapter; 
   content: counter(chapter)"."; 
}
ol.section {
    counter-reset: section;
}

ol.section > li:before { 
    content: counter(chapter)"."counter(section)" "; 
    counter-increment: section;
}

ol.subsection {
    counter-reset: subsection;
}

ol.subsection > li:before { 
    content: counter(chapter)"."counter(section)"."counter(subsection)" "; 
    counter-increment: subsection;
}

And in HTML

<ol class="chapter">
    <li>Apresentacao</li>
    <ol class="section">
        <li> Conteudo </li>
        <li> Programação </li>
        <ol class="subsection">
            <li> JAVA </li>
            <li> DOTNET </li>
        </ol>
    </ol>
    <li>Conclusão</li>
    <ol class="section">
        <li> Agradecimentos</li>
         <ol class="subsection">
            <li> Família </li>
            <li> Professores </li>
        </ol>
    </ol>
    <li>Fim</li>
</ol>

Fiddle

05.09.2014 / 16:00

Overwritten data when saving access log to file Python indentation error

score 4 · Accepted Answer

You need to leave the <li> tag open at each level and close when another level starts.

Corrected code:

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
    <li class="reseta">Apresentacao
	    <ol>
		    <li> Conteudo </li>
		    <li> Programação </li>
		    <ol>
		        <li> JAVA </li>
		        <li> DOTNET </li>
	        </ol>
	    </ol>
    </li>
	<li class="reseta">Conclusão
        <ol>
            <li> Agradecimentos</li>
             <ol>
                <li> Família </li>
                <li> Professores </li>
            </ol>
        </ol>
    </li>
	<li>Fim</li>
</ol>

Example on Fiddle