Cssler: Nummerierte Liste mit 3 Ebenen

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

  1. Mein Resultat sieht zurzeit übrigens so aus:

    1.

    01.
    02.
    03.

    1.

    01.
    02.
    03.

    031.
    032.

    01.
    02.

    Die Nummern innerhalb der Links waren nur, damit ihr versteht wie das Resultat aussehen soll. Dort steht natürlich dann ein Text (ohne die manuelle Nummerierung).

    Grüsse und Vielen Dank

    Der CSS Fanatiker ;)

  2. @@Cssler:

    nuqneH

    <ul>

    <ol class="numblist1">

      
    ul darf nur li-Elemente als Kinder haben. Das hätte dir der [Validator](http://validator.w3.org/) auch gesagt.  
      
    Qapla'
    
    -- 
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    
    1. Hallo Gunnar

      Ja, du hast vollkommen recht. Wie dumm von mir, nicht bemerkt.

      Vielen Dank!

  3. Hi,

    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/)

    Dann solltest Du die zweite Ebene in die erste und die dritte in die zweite schachteln, nicht lauter unabhängige Listen nacheinander.

    Die Klassen für die Schachtelungstiefe (numblistX) können dann auch wegfallen, das kann durch den Selector ol ol, ol ol ol usw. ausgedrückt werden.

    Wo ist eigentlich im HTML die Klasse ebene1 benutzt, für die Du im CSS was definierst?

    Das ul außenrum hat Gunnar ja schon angemeckert.

    • Die Punkte der ersten Ebene sind nicht fortlaufend Nummeriert, sondern haben alle eine 1.

    Du hast nicht eine Liste auf oberster Ebene, sondern viele.
    Und jede ist unabhängig von den anderen durchnumeriert

    Problem 2:

    • Die Nummerierung der zweiten Ebene stimmt, ausser dass es immer ein 0 davor hat. Also 01, 02

    Die 0 könnte von counter(listenpunkt_ebene1,decimal)  kommen - da der Counter außerhalb der Listen aufgerufen wird, für die er definiert ist.

    • Die Nummerierung der zweiten Ebene beinhaltet nicht die Nummer der ersten Ebenem, also 1.1 , Problem 3:

    siehe Problem Nummer 2.

    usw.
    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    1. Vielen Dank MudGuard !

      Deine Inputs waren super, habe sie umgesetzt.

      Funktioniert nun schon viel besser, aber noch nicht ganz.

      Wenn ich aber die CSS-Klasen wegnehme, funktioniert es gar nicht mehr.

      Was noch nicht funktioniert, ist die Übernahme der ersten Ebene in die zweite und dritte Ebene. Zur zeit wird ein Null davor gesellt, also

      1. XXX
      01. XX
      02. XX
      021. XX
      022. XX
      03. XX
      031. XX
      032. XX
      2. XXX
      01. XX

      Etc...

      Dazu, wie kriege ich es hin, dass es mir zwischen erster, zweiter und dritter Ebene ein Punkt dazwischen macht? Also:

      1. XXX
      0.1. XX
      0.2. XX
      0.2.1. XX
      0.2.2. XX
      0.3. XX
      0.3.1. XX
      0.3.2. XX
      2. XXX
      0.1. XX

      Natürlich sollte es bei zweiter und dritten Ebene kein 0 stehen, sondern die Nummer der vorherigen Ebene übernehmen:
      1. XXX
      1.1. XX
      1.2. XX
      1.2.1. XX
      1.2.2. XX
      1.3. XX
      1.3.1. XX
      1.3.2. XX
      2. XXX
      2.1. XX

      Meine aktuellen Codes:

        
      <ol class="numblist1">  
      <li><a href="" title="">xx 1. </a></li>  
      <ol class="numblist2">  
      <li><a href="" title="">xx 1.1 </a></li>  
      <li><a href="" title="">xx 1.2 </a></li>  
      <ol class="numblist3">  
      <li><a href="" title="">xx 1.2.1</a></li>  
      <li><a href="" title="">xx 1.2.2</a></li>  
      </ol></ol>  
        
      <ol class="numblist2">  
      <li><a href="" title="">xx 1.3</a></li>  
      <ol class="numblist3">  
      <li><a href="" title="">xx 1.3,1</a></li>  
      <li><a href="" title="">xx 1.3.2</a></li>  
      </ol></ol>  
        
      <li><a href="" title="">xx 2. </a></li>  
      <ol class="numblist2">  
      <li><a href="" title="">xx 2.1</a></li>  
      </ol>  
      </ol>  
      
      

      CSS:

        
      .numblist1{  
            counter-reset:listenpunkt_ebene1;  
            list-style-type:decimal;  
         }  
      .ebene1 li:before {  
      	content: counter(listenpunkt_ebene1) ". ";  
      	counter-increment:listenpunkt_ebene1;  
      }  
      .numblist2{  
            counter-reset:listenpunkt_ebene2;  
      	  list-style-type:none;  
         }  
      .numblist2 li:before {  
            content: counter(listenpunkt_ebene1,decimal) counter(listenpunkt_ebene2,decimal) ". ";  
            counter-increment:listenpunkt_ebene2;  
         }  
      .numblist3{  
            counter-reset:listenpunkt_ebene3;  
            list-style-type:none;  
         }  
      .numblist3 li:before {  
            content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,decimal) counter(listenpunkt_ebene3,decimal) ". ";  
            counter-increment:listenpunkt_ebene3;  
         }  
        
        
        
      
      
      1. P.s.

        Wenn ich das ,decimal im CSS rausnehme, passiert nichts....

        Viele Grüsse

      2. Hallo,

        Meine aktuellen Codes:

        ... zeigen, dass du das Verschachteln von Listen noch nicht verstanden hast. Schau es dir in der Doku oder im Wiki an.

        Gruß
        Kalk

        1. Oder du sagst mir, wie es dann aussehen müsste.
          oder Link in die Doku die du meinst?

          Deine Antwort hilf mir überhaupt nicht, und ich hätte nicht gefragt, wenn ich es 100% verstanden hätte. Also lass doch bitte solche Antworten gleich ganz bleiben....

          1. Om nah hoo pez nyeetz, Cssler!

            oder Link in die Doku die du meinst?

            Mit „Doku“ ist die SELFHTML 8.1 gemeint. Du kannst aber die Links anschauen, die du gestern von mir bekommen hast.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gast und Gastritis.

            1. Hallo Matthias & Tabellenkalk

              Ja hast recht. Habe es nun geschafft. War nur eine Frage des sauberen Arbeitens (Verschachtelung). Sorry vielmals.

              Etwas kriege ich aber nicht hin. Habe in einem alten Forumbeitrag gelesen, dass dies nicht möglich ist. Stimmt dies?
              Und zwar möchte ich nun, dass alle Texte der Aufzählungen, egal auf welcher Ebene, alle auf einer vertikalen Linie sind. D.h. ich möchte die Texte der Ebene 1 und Ebene 2 einrücken, damit sie danach auf selber Breite/Vertikaler Achse wie die Texte der Ebene 3 sind.

              Ich habe bereits versucht mit CSS:

              • Padding-left auf ol und li objekt
              • list-style-position (bringt natürlich nix, da list-style-type:none;)
              • margin (wobei dass ja dann die gesamte Nummerierungs-Elemente einrückt).

              Geht das wirklich nicht mittels CSS?

              Vielen Dank für eine kurze hilfreiche Antwort.
              Muss wissen ob ich weiter suchen und probieren soll. :-)

              1. Om nah hoo pez nyeetz, Cssler!

                Etwas kriege ich aber nicht hin. Habe in einem alten Forumbeitrag gelesen, dass dies nicht möglich ist. Stimmt dies?
                Und zwar möchte ich nun, dass alle Texte der Aufzählungen, egal auf welcher Ebene, alle auf einer vertikalen Linie sind. D.h. ich möchte die Texte der Ebene 1 und Ebene 2 einrücken, damit sie danach auf selber Breite/Vertikaler Achse wie die Texte der Ebene 3 sind.

                Vielen Dank für eine kurze hilfreiche Antwort.

                Du kannst die Listen einzeln selektieren, etwa

                ol ol für die 2. Ebene,
                ol ol ol für alle weiteren

                Beispiel, falls ich dich richtig verstanden habe.

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kai und Kaiser.

                1. Hallo Matthias

                  Vielen Dank. Nein, ich meinte die Positionierung des Textes.

                  Also anstelle:

                  1. Text
                  1.1. Text
                  1.1.1. Text

                  soltte Text auf der selben vertikalen Linie sein:

                  1.     Text
                  1.1.   Text
                  1.1.1. Text

                  Vielen Dank und Grüsse

                  1. Om nah hoo pez nyeetz, Cssler!

                    Das ist eigentlich für dezimale Aufzählungen und list-style-position: ouside Standard. dabblet

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lid und Lido.

                2. @@Matthias Apsel:

                  nuqneH

                  ol ol für die 2. Ebene,

                  ol ol für die 2. Ebene und alle weiteren

                  ol ol ol für alle weiteren

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)