Lesefortschritt:

Aufzählungsliste absteigend nummerieren

22. Februar 2023 | HTML

Trick # 210 | Dieser Beitrag beinhaltet 581 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Ein kleiner handlicher Hack lässt die klassische Aufzählungsliste <ol> umgekehrt aufzählen: beginnend mit dem höchsten Wert und endend mit dem kleinsten. Dem HTML-Code wird nur ein kleines Attribut hinzugefügt, schon wird die Aufzählung rückwärts nummeriert.

Hinter nummerierten Aufzählungslisten kann etwa ein Code dieser Art stehen:

<ol>
  <li>erste Zeile</li>
  <li>zweite Zeile</li>
  <li>dritte Zeile</li>
  <li>vierte Zeile</li>
</ol>

Dieser Code gibt folgendes Ergebnis:

  1. erste Zeile
  2. zweite Zeile
  3. dritte Zeile
  4. vierte Zeile

Nun lässt sich mit einem simplen Trick die Liste umdrehen – bzw: die Liste absteigend nummerieren. Dem <ol>-Tag wird dafür bloss das Attribut «reversed» hinzugefügt. So wie in diesem Code:

<ol reversed>
  <li>erste Zeile</li>
  <li>zweite Zeile</li>
  <li>dritte Zeile</li>
  <li>vierte Zeile</li>
</ol>

Nun sieht das Ergebnis so aus:

  1. erste Zeile
  2. zweite Zeile
  3. dritte Zeile
  4. vierte Zeile

Ehrlich gesagt: Einen Verwendungszweck für sowas seh ich jetzt auch nicht auf Anhieb. Ist aber noch lustig, zu wissen.

Werbung

Mit dem hr-Element Akzente setzen

Das hr-Element des HTML-Codes ergibt normalerweise eine Trennlinie, welche grau und auf der gesamten Anzeigebreite dargestellt wird. Doch dieser Horizontal Ruler hr lässt sich auch als Akzent einsetzen. Im heutigen Tipp ein paar Beispiele.

Verlinkung der Telefonnummer verhindern

Kennen Sie das? Sie zeigen auf Ihrer Website die Telefonnummer. In praktisch allen Browsern erscheint die Nummer als normaler Text. Aber es gibt ein paar Kandidaten, die zeigen auch in der Desktop-Ansicht die Nummer als wirklich hässlichen ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.