Nummerierte Liste mit 3 Ebenen

[Cssler]

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

[Cssler]

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

[Gunnar Bittersmann]

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

[Cssler]

Hallo Gunnar

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

Vielen Dank!

[MudGuard]

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

[Cssler]

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;  
   }  
  
  
  

[Cssler]

P.s.

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

Viele Grüsse

[Tabellenkalk]

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

[Cssler]

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

[Matthias Apsel]

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

[Cssler]

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

[Matthias Apsel]

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

[Cssler]

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

[Matthias Apsel]

Om nah hoo pez nyeetz, Cssler!

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

Matthias

[Gunnar Bittersmann]

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