Absätze zur Liste machen

[Linuchs]

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

[MrMurphy1]

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

[Linuchs]

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.

[MrMurphy1]

Hallo

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

Flexbox.

Gruss

MrMurphy

[MrMurphy1]

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

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

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