Cssler: Nummerierte Liste mit 3 Ebenen

Beitrag lesen

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...