Linuchs: Absätze zur Liste machen

Hallo,

während der Bearbeitung eines Textes ist es nützlich, die <p> Absätze zu nummerieren. Dafür versuchte ich

p {
  line-height: 140%;
  display: list-item;
  list-style-type: decimal;
}

Jedem Absatz wurde die Ziffer 0 vorangestellt. Wie könnte ich eine aufsteigende Nummerierung erreichen? Zwischendurch gibt es Überschriften <h3>, die Nummerierung kann weiterlaufen oder neu starten.

Gruß, Linuchs

  1. Hallo

    wahrscheinlich hilft dir CSS counters oder CSS Zähler. Info zum Beispiel unter

    https://www.mediaevent.de/css/counter-increment-counter-reset.html

    oder

    https://developer.mozilla.org/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Z%C3%A4hler_verwenden

    CanIUse sieht auch gut aus:

    http://caniuse.com/#search=counters

    Gruss

    MrMurphy

    1. danke. Dachte nicht, dass es so einfach ist:

      p {
        line-height: 140%;
      /*
        display: list-item;
        list-style-position: outside;
        list-style-type: decimal;
      */
        counter-increment: kapnum 1;
      }
      p:before {
        content: counter(kapnum) ". ";
      }
      

      Die Nummer wird zwar nicht links vom Absatz positioniert (wie zuvor die Ziffer 0), sondern wird dem Text vorangestellt.

      Aber der Zweck ist erfüllt.

      1. Hallo

        Die Nummer wird zwar nicht links vom Absatz positioniert (wie zuvor die Ziffer 0), sondern wird dem Text vorangestellt.

        Flexbox.

        Gruss

        MrMurphy

        1. Hallo

          Das CSS für eine Flexbox-Lösung könne folgendemaßen aussehen:

          @media all {
             p {
                counter-increment: kapnum 1;
             }
             p::before {
                content: counter(kapnum) ". ";
                display: block;
             }
          }
          @media only screen and (min-width: 700px) {
             p {
                display: flex;
             }
             p::before {
                flex-grow: 0;
                flex-shrink: 0;
                flex-basis: 2rem;
             }
          }
          

          Die Werte kannst du natürlich anpassen.

          Bei schmalen Fenstern wird die Nummer über dem Text angezeigt. Das ist in der Literatur durchaus üblich.

          Das display: block brauchen zudem ältere IE als Nachhilfe für Flexbox, also werden gleich zwei Fliegen mit einer Klappe geschlagen. Und es ist gleichzeitig ein Fallback für Browser die mit Flexbox nix anfangen können. Also gleich ein dritter Vorteil.

          Ab einer vorgegebenen Breite (im Beispiel 700px) werden die Zähler dann links vom Text angezeigt.

          Bei schmalen Spaltenbreiten sollten diese fest vorgegeben werden.

          Bei den flex-Angaben verwende ich aus verschiedenen Gründen lieber die lange Schreibweise. Anfänger kommen mit der Kurzschreibweise immer wieder in unterschiedliche Bredouillen, die sich durch die lange Schreibweise vermeiden lassen.

          Gruss

          MrMurphy

      2. @@Linuchs

        p:before {
          content: counter(kapnum) ". ";
        }
        

        Firefox scheint hier den zweiten Parameter zu benötigen, siehe Pen.

        Die Nummer wird zwar nicht links vom Absatz positioniert (wie zuvor die Ziffer 0), sondern wird dem Text vorangestellt.

        Das kannst du ja durch absolute Positionierung erreichen, siehe Pen.

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  2. @@Linuchs

    Zwischendurch gibt es Überschriften <h3>, die Nummerierung kann weiterlaufen oder neu starten.

    Das erreichst du, indem du counter-reset auf das entspechende Element anwendest.

    In diesem Beipiel ist es für section gesetzt; die Numerierung beginnt jedesmal neu.

    Wenn du den Selektor in body änderst, wird weitergezählt.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe