Leonard: verschiedene Listenformatierungen

Hallöle,

ich blicke mal wieder bei meine eigenen Schusseligkeit nicht durch.

ich habe verschieden Listen, die ich in einer gesonderten CSS-Datei definiere, nur klappen zwei Dinge nicht:
1. - ich möchte die dritte Ebene nicht mit 1. 2. 3. haben sondern mit a. b. c.
2. - meine aufgeführten Punkte sind meist länger als eine Zeile und eigendlich müssten sie ja Standard mäsßig auf list-style: outside; stehen, sind sie jedoch nicht

Kann mir jemand helfen?

HTML-Datei:

  
<ol class="para">  
	<li>Oberpunkt mit §</li>  
	<li>Oberpunkt mit §</li>  
	<li>Oberpunkt mit §  
	<ol class="absatz">  
		<li>Unterpunkt Ebene 1 mit (1)</li>  
		<li>Unterpunkt Ebene 1 mit (2)</li>  
		<li>Unterpunkt Ebene 1 mit (3)  
		<ol class="absatz2">  
			<li>Unterpunkt Ebene 2 mit a. -</li>  
			<li>Unterpunkt Ebene 2 mit b. - </li>  
			<li>Unterpunkt Ebene 2 mit c. - </li></li>  
		</ol>  
   	     </li>  
	</ol>  
</ol>

und die CSS-Datei:

  
ol.para {  
	counter-reset: item;  
	list-style-position: outside;}  
ol.para li { display: block; }  
ol.para li:before {  
	content: "§" counter(item) " - ";  
	counter-increment: item;  
}  
  
ol.absatz {  
	counter-reset: item;  
	list-style-position: outside;}  
ol.absatz li { display: block; }  
ol.absatz li:before {  
	content: "(" counter(item) ") ";  
	counter-increment: item;  
}  
  
ol.absatz2 {  
	counter-reset: item;  
	list-style-position: outside;  
	list-style: lower-latin;}  
ol.absatz2 li { display: block; }  
ol.absatz2 li:before {  
	content: counter(item) ". -  ";  
	counter-increment: item;  
}

und Aussehen soll es eigentlich so (Die Punkte am Anfang sind wegzudenken):

§1 - Oberpunkt 1 mit §
§2 - Oberpunkt 2 mit §
§3 - Oberpunkt 3 mit §
...(1) Unterpunkt Ebene 1 mit (1)
...(2) Unterpunkt Ebene 1 mit (2)
...(3) Unterpunkt Ebene 1 mit (3)
......a. -  Unterpunkt Ebene 2 mit a. -
......b. -  Unterpunkt Ebene 2 mit b. -
......c. -  Unterpunkt Ebene 2 mit c. -

  1. Hola,

    vielleicht das hier?

    ol {  
    	list-style: none;  
    	counter-reset: item;  
    }  
      
    ol li:before {  
    	content: "§" counter(item) " - ";  
    	counter-increment: item;  
    }  
      
    ol ol li:before {  
    	content: "(" counter(item) ") ";  
    	counter-increment: item;  
    }  
      
    ol ol ol {  
    	list-style: lower-latin !important;  
    }  
      
    ol ol ol li:before {  
    	content: "-  ";  
    	counter-increment: item;  
    }
    
    <ol>  
        <li>Oberpunkt mit §</li>  
        <li>Oberpunkt mit §</li>  
        <li>Oberpunkt mit §  
        <ol>  
            <li>Unterpunkt Ebene 1 mit (1)</li>  
            <li>Unterpunkt Ebene 1 mit (2)</li>  
            <li>Unterpunkt Ebene 1 mit (3)  
            <ol>  
                <li>Unterpunkt Ebene 2 mit a. -</li>  
                <li>Unterpunkt Ebene 2 mit b. - </li>  
                <li>Unterpunkt Ebene 2 mit c. - </li>  
            </ol>  
            </li>  
        </ol>  
        </li>  
    </ol>
    

    gruss qx

  2. @@Leonard:

    nuqneH

    §1 - Oberpunkt 1 mit §
    §2 - Oberpunkt 2 mit §
    §3 - Oberpunkt 3 mit §
    ...(1) Unterpunkt Ebene 1 mit (1)
    ...(2) Unterpunkt Ebene 1 mit (2)
    ...(3) Unterpunkt Ebene 1 mit (3)
    ......a. -  Unterpunkt Ebene 2 mit a. -
    ......b. -  Unterpunkt Ebene 2 mit b. -
    ......c. -  Unterpunkt Ebene 2 mit c. -

    Bei Paragraphen/Abschnitten wäre ich vorsichtig mit der automatischen Numerierung mit CSS. Auf solche wird oft von anderen Stellen verwiesen: „gemäß §3(1)“.

    Sollte nun §2 entfallen, numeriert CSS automatisch um:
    §1 - Oberpunkt 1 mit §
    §2 - Oberpunkt 3 mit §
    und die Referenz stimmt nicht mehr.

    Die Nummern gehören doch mit zum Inhalt, können/sollten also durchaus im Text stehen:

    <ol>  
      <li>§1 - Oberpunkt 1 mit §</li>
    

    Per CSS unterdrückt man die automatische Numerierung: ol { list-style: none }

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallöle Gunnar Bittersmann

      Bei Paragraphen/Abschnitten wäre ich vorsichtig mit der automatischen Numerierung mit CSS. Auf solche wird oft von anderen Stellen verwiesen: „gemäß §3(1)“.

      In diesem Fall nicht.

      Sollte nun §2 entfallen, numeriert CSS automatisch um:
      §1 - Oberpunkt 1 mit §
      §2 - Oberpunkt 3 mit §
      und die Referenz stimmt nicht mehr.

      Macht nichts.

      Es geht quasi um eine Art Hausordnung oder Kodex und nicht um Tatsächliche Gesetze, deswegen war die Antwort von qx schon extrem hilfreich.
      Trotzdem Danke auch an dich

    2. Hi,

      Die Nummern gehören doch mit zum Inhalt,

      Sehe ich auch so, insb. bei Listen mit nicht-default Aufzählungszeichen oder nicht 1 als Startwert oder Lücken in der Nummerierung.

      Kein CSS = Verlust dieser Nummerierung, die eher Inhalt als Formatierung ist.

      können/sollten also durchaus im Text stehen:

      <ol>

      <li>§1 - Oberpunkt 1 mit §</li>

        
      Ich ziehe da ol[start], ol[type] und li[value] aber vor.  
        
      MfG ChrisB  
        
      
      -- 
      RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?