Hallo Zusammen
Ich versuche eine nummerierte Liste mit drei Ebenen zu machen. Ich habe in diesem Forum eine gutes Bsp. gefunden, schaffe es aber nicht zu erweitern (Original: http://aktuell.de.selfhtml.org/artikel/css/nummerierung/)
<ul>
<ol class="numblist1">
<li><a href="" title="">1.</a></li>
</ol>
<ol class="numblist2">
<li><a href="" title="">1.1</a></li>
<li><a href="" title="">1.2</a></li>
<li><a href="" title="">1.3</a></li>
</ol>
<ol class="numblist1">
<li><a href="" title="">2.</a></li>
</ol>
<ol class="numblist2">
<li><a href="" title="">2.1</a></li>
<li><a href="" title="">2.2</a></li>
<li><a href="" title="">2.3</a></li>
</ol>
<ol class="numblist3">
<li><a href="" title="">2.3.1</a></li>
<li><a href="" title="">2.3.2</a></li>
</ol>
<ol class="numblist2">
<li><a href="" title="">2.4</a></li>
<li><a href="" title="">2.5</a></li>
</ol>
</ul>
CSS:
ol.numblist1{
counter-reset:listenpunkt_ebene1;
list-style-type:decimal;
}
ol.ebene1 li:before {
content: counter(listenpunkt_ebene1) ". ";
counter-increment:listenpunkt_ebene1;
}
ol.numblist2{
counter-reset:listenpunkt_ebene2;
list-style-type:none;
}
ol.numblist2 li:before {
content: counter(listenpunkt_ebene1,decimal) counter(listenpunkt_ebene2,decimal) ". ";
counter-increment:listenpunkt_ebene2;
}
ol.numblist3{
counter-reset:listenpunkt_ebene3;
list-style-type:none;
}
ol.numblist3 li:before {
content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,decimal) counter(listenpunkt_ebene3,decimal) ". ";
counter-increment:listenpunkt_ebene3;
}
Problem 1:
- Die Punkte der ersten Ebene sind nicht fortlaufend Nummeriert, sondern haben alle eine 1.
Problem 2: - Die Nummerierung der zweiten Ebene stimmt, ausser dass es immer ein 0 davor hat. Also 01, 02
- Die Nummerierung der zweiten Ebene beinhaltet nicht die Nummer der ersten Ebenem, also 1.1 , Problem 3:
- Die Nummerierung der dritten Ebene stimmt soweit, ausser
-- Beinhaltet auch nicht die Nummer der ersten Ebene (1.1.1, 1.1.2
-- Hat keinen Punkt zwischen der zweiten und dritten Ebene (also zurzeit 11, 12 > anstelle > 1.2, 1.2
-- wiederum wird das Null der zweiten Ebene übernommen (also zurzeut: 001, 012 anstelle > 1.1.1 und 1.1.2)
Fragen:
Geht das überhaupt nur mit CSS? Oder muss ich die Nummerierungen von Hand machen?
Thx für eure Inputs
P.s. wenn ich bei ol.numblist1 list-style-type auf "none" setzte, kommt gar keine Nummer mehr...