Trali: Verschalchtelte nummerierte Listen einrücken?

Beitrag lesen

Hallo liebe Forum'ler,

ich suche nun schon seit Stunden nch einer Lösung und weiß einfach nicht wie ich das lösen kann. Ich möchte gerne eine verschachtelte LIste mit Nummerierung haben. Das klappt soweit auch sehr gut mit dem hier beschriebenen Trick: http://aktuell.de.selfhtml.org/artikel/css/nummerierung/. Nun möchte ich aber gerne, dass der Text unter 2a beispielsweise eingerückt ist . Dafür gibt es den Befehl list-style-position: outside - wenn ich den alerdings in meine Klasse integriere, funktioniert das nicht und ich weiß einfach nicht wieso :(. habe es auch versuchsweise in den html - Teil reingeschrieben, aber das hat auch nicht funktioniert. Wo genau ist mein Fehler bzw. wo muss ich das hineinschreiben?

<style type="text/css">
<!--
   ol.ebene1 {
      counter-reset:listenpunkt_ebene1;
      list-style-type:none;
   }
   ol.ebene1 li:before {
      content: counter(listenpunkt_ebene1) ". ";
      counter-increment:listenpunkt_ebene1;
   }
   ol.ebene2 {
      counter-reset:listenpunkt_ebene2;
      list-style-type:none;
   }
   ol.ebene2 li:before {
      content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) ". ";
      counter-increment:listenpunkt_ebene2;
      list-style-position: outside;
   }
-->
</style>
   </head>
   <body>
      <ol class="ebene1">
         <li>Allgemeines zu Pseudoformaten</li>
         <li>Pseudoformate für Verweise
            <ol class="ebene2">
               <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
               <li>:visited</li>
               <li>:hover</li>
               <li>:active</li>
               <li>:focus</li>
            </ol>
         </li>
         <li>Pseudoformate für Absätze
            <ol class="ebene2">
               <li>:first-line</li>
               <li>:first-letter</li>
               <li>:first-child </li>
            </ol>
         </li>
         <li>Pseudoformate für automatisch generierten Text
            <ol class="ebene2">
               <li>:before</li>
               <li>:after</li>
            </ol>
         </li>
         <li>Automatische Nummerierung</li>
      </ol>
   </body>

Würde mich sehr über Eure Hilfe freuen, da ich damit seit Stunden nicht weiterkomme:/.