Trali: Verschalchtelte nummerierte Listen einrücken?

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

  1. Hallo

    ol.ebene2 li:before {
          list-style-position: outside;
       }

    willst du das li:before oder vielleicht doch nur das li beeinflussen?

    Gruß
    Kalk

    1. Hallo

      ol.ebene2 li:before {
            list-style-position: outside;
         }

      willst du das li:before oder vielleicht doch nur das li beeinflussen?

      Gruß
      Kalk

      hallo Kalk,

      wenn ich nur das li beeinfluss bekomme ich doch nicht die gewünschten Unterpunkte 1.1, 1.2 usw.,oder?

      Gruß,

      Trali

      1. Hallo,

        oder?

        ich geb zu, so ganz begriffen hab ich nicht, was du eigentlich erreichen möchtest.
        Hilft dir vielleicht

          
          ol.ebene2 li{  
            text-indent: -3ex;  
            padding-left:2ex;  
        }  
        
        

        ?

        Gruß
        Kalk

        1. Hallo,

          oder?

          ich geb zu, so ganz begriffen hab ich nicht, was du eigentlich erreichen möchtest.
          Hilft dir vielleicht

          ol.ebene2 li{
              text-indent: -3ex;
              padding-left:2ex;
          }

          
          > ?  
          >   
          > Gruß  
          > Kalk  
            
          Hallo Kalk,  
            
          mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen. Eine automaische Nummerierung einer Liste mit Unternummern (wie in dem Beispiel<http://aktuell.de.selfhtml.org/artikel/css/nummerierung/beispiel.htm>). Aber ich möchte auch, dass der Text, wenn er über eine Zeile geht, nicht unter der Nummer weiterläuft, sondern da wo der Text anfängt, falls er länger ist.  
            
          Viele Grüße und lieben Dank für die Bemühungen, Trali
          
          1. Hallo,

            mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen.

            Hast du es denn ausprobiert? Du kommst immer wieder mit Rückfragen, die du eigentlich selbst beantworten können musst.

            Ist dein Problem jetzt die Nummerierung oder die Einrückung? Ich verstehs nicht. Es sind zwei unabhängige, gelöste Probleme. Oder ich habs immer noch nicht begriffen.

            Gruß
            Kalk

            1. Hallo,

              mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen.

              Hast du es denn ausprobiert? Du kommst immer wieder mit Rückfragen, die du eigentlich selbst beantworten können musst.

              Ist dein Problem jetzt die Nummerierung oder die Einrückung? Ich verstehs nicht. Es sind zwei unabhängige, gelöste Probleme. Oder ich habs immer noch nicht begriffen.

              Gruß
              Kalk

              Hallo Kalk,

              ja, ich habe es ausprobiert. Und ich bekomme sowohl die Nummerierung hin als auch die Einrückung als einzelnes jeweils. Aber kombiniert bekomme ich es nicht hin :). Also dass ich sowohl diese Unternummerierung haben als auch die Einrückung. Vielleicht habe ich auch deinen Tipp nicht 100%ig verstanden :).

              Viele Grüße,

              Trali

            2. Hallo,

              mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen.

              Hast du es denn ausprobiert? Du kommst immer wieder mit Rückfragen, die du eigentlich selbst beantworten können musst.

              Ist dein Problem jetzt die Nummerierung oder die Einrückung? Ich verstehs nicht. Es sind zwei unabhängige, gelöste Probleme. Oder ich habs immer noch nicht begriffen.

              Gruß
              Kalk

              Hi,

              ich habe gerade noch mal mit deinem Lösungsansatz rumprobiert und: Es hat funktioniert! Vielen vielen Dank!! :) Verstehe nicht, was ich vorhin anders probiert habe. Sorry, für die Verwirrung :).

  2. Hallo Trali,

    das funktioniert so nicht.

    list-style-position bezieht sich auf die "normalen" Aufzählungszeichen. Wobei "list-style-position: outside" die Vorgabe ist.

    Mit "list-style-type: none" werden in deinem Beispiel die "normalen" Aufzählungszeichen jedoch ausgeblendet.

    Über das Pseudo-Element :before werden dann zwar wieder Aufzählungszeichen eingefügt, die lassen sich aber nicht mit list-style-position beeinflussen. Das sind halt nicht die "normalen" und mit list-style-position beeinflussbaren Aufzählungszeichen.

    Deshalb sollte man mit solchen CSS-Tricks immer vorsichtig sein.

    Gruss

    MrMurphy

    1. Hallo Trali,

      das funktioniert so nicht.

      list-style-position bezieht sich auf die "normalen" Aufzählungszeichen. Wobei "list-style-position: outside" die Vorgabe ist.

      Mit "list-style-type: none" werden in deinem Beispiel die "normalen" Aufzählungszeichen jedoch ausgeblendet.

      Über das Pseudo-Element :before werden dann zwar wieder Aufzählungszeichen eingefügt, die lassen sich aber nicht mit list-style-position beeinflussen. Das sind halt nicht die "normalen" und mit list-style-position beeinflussbaren Aufzählungszeichen.

      Deshalb sollte man mit solchen CSS-Tricks immer vorsichtig sein.

      Gruss

      MrMurphy

      Hallo,

      ok Danke. :) Gewunert hatte mich nur, dass ich mit dem Befehl "display" was bewirken kann. Gibt es denn eine Möglichkeit eine Liste zu erstellen, die sowohl auch nummerische Unterpunkte als auch eine Einzug hat, also ungefähr so:

      1. blubb
        1.1 Der gesamte Text fängt auf Höhe von  blubb2 an
        1.2 blubb3
      2. blabb

      Oder ist das gar nicht möglich?

      1. @@Trali:

        nuqneH

        Gibt es denn eine Möglichkeit eine Liste zu erstellen, die sowohl auch nummerische Unterpunkte als auch eine Einzug hat, also ungefähr so:

        1. blubb
            1.1 Der gesamte Text fängt auf Höhe von  blubb2 an
            1.2 blubb3
        2. blabb

        Oder ist das gar nicht möglich?

        Klar ist es. Für untergeordnete Listen ``ol ol { padding-left: 1em }{:.language-css} sollte helfen.

        Qapla'

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

          nuqneH

          Gibt es denn eine Möglichkeit eine Liste zu erstellen, die sowohl auch nummerische Unterpunkte als auch eine Einzug hat, also ungefähr so:

          1. blubb
              1.1 Der gesamte Text fängt auf Höhe von  blubb2 an
              1.2 blubb3
          2. blabb

          Oder ist das gar nicht möglich?

          Klar ist es. Für untergeordnete Listen ``ol ol { padding-left: 1em }{:.language-css} sollte helfen.

          Qapla'

          Hallo Qapla,

          aber mit der Lösung habe ich dann kein 1.1, sondern:

          1. blubb
              1. blubb

          Oder verstehe ich deinen Ansatz falsch?

          1. Om nah hoo pez nyeetz, Trali!

            Nach ca. 10 Antworten sollte dir aufgefallen sein, dass Vollzitate hier unerwünscht sind. Außerdem hast du es jedesmal oberhalb des Buttons „Beitrag absenden“ gelesen.

            Also: Bitte vermeide Vollzitate. Sie stören nur den Lesefluss. Zitiere nur das, worauf du dich in deiner Antwort konkret beziehst. Danke.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sau und Sauerkraut.

          2. @@Trali:

            nuqneH

            Hallo Qapla,

            Und: Bitte vermeide es, mich mit „Qapla“ anzureden. Danke.

            Qapla'

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

              Und: Bitte vermeide es, mich mit „Qapla“ anzureden. Danke.

              Eine barrierefreie Grußformel hilft dem Zielpublikum, Verwirrungen zu vermeiden.

              dedlfix.

              1. @@dedlfix:

                nuqneH

                Eine barrierefreie Grußformel hilft dem Zielpublikum, Verwirrungen zu vermeiden.

                Nicht mein Zielpublikum. ;-)

                Und überhaupt ist es dazu nur gekommen, weil damals™ manche der Meinung waren, Postings ohne Grußformeln seien unhöflich; Postings mit automatisch generierten Grußformeln hingegen seien höflich. Keine Pointe.

                Qapla'

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

                  Und überhaupt ist es dazu nur gekommen, weil damals™ manche der Meinung waren, Postings ohne Grußformeln seien unhöflich; Postings mit automatisch generierten Grußformeln hingegen seien höflich. Keine Pointe.

                  Mir sind die im Prinzip auch egal, eine Grußformel bringt mir keinen Gewinn, aber sie wird von vielen erwartet. (Störend allerdings empfinde ich einleitendes Geschwafel, à la "Ich hab da mal eine Frage ...", das nur meine Zeit raubt.) Deswegen hab ich auch (nach anderen Versuchen) eine neutrale, die zu allen Stimmungslagen passt. Für diese hat mich noch keiner angeniest, scheint also ein brauchbarer Kompromiss zu sein.

                  dedlfix.

            2. Hallo,

              Hallo Qapla,

              Und: Bitte vermeide es, mich mit „Qapla“ anzureden. Danke.

              Qapla'

              Nimm stattdessen „Qapla'“...

              Gruß
              Kalk