Im Gegensatz zu ungeordneten Listen, die einzig über ein Aufzählungssymbol verfügen, erhält die geordnete Liste durch den ol-Tag von HTML eine Reihenfolge übermittelt. Aber auch diese Reihenfolge kann durch CSS neu gestaltet werden, abhängig vom Thema und Bedarf bei der Anzeige und zwar auf Basis des Aufzählungszeichens bzw. der Art der Aufzählung.
So kann man etwa römische Zahlen als Zählweise heranziehen, es gibt aber noch viele weitere Optionen für die Darstellung der Liste, die mit CSS gewählt werden können.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
ergibt:
zuerst die Standardliste
und nun die CSS-Variante
Die geordnete Aufzählungsliste wird in HTML automatisch mit der dezimalen Zählweise dargestellt. CSS bietet aber neue Möglichkeiten, um diese Aufzählung mit anderen Varianten auszustatten. Als Beispiel ist die zweite Aufzählungsliste, die vom Prinzip her gleich programmiert ist, mit den großen römischen Zahlen ausgestattet worden.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Mögliche Optionen für die geordnete Liste sind:
Es gibt noch weitere Möglichkeiten, die aber oftmals vom Browser nicht richtig dargestellt werden
In Wirklichkeit ist diese Lösung interessant, aber man nutzt meist die voreingestellte Standardversion mit den dezimalen Zahlen und kümmert sich mehr um die Abstände zwischen den Einträgen, weil diese zum Lesen viel wichtiger sind.
Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.
Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.
Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.
Themenseiten
Artikel-Thema: Geordnete Liste mit neuem Aufzählungszeichen per CSS
Beschreibung: Mit CSS kann man auch die 👍 geordneten Aufzählungslisten (ol-Tag) formatieren und mit einem ✅ neuen Aufzählungszeichen ausstatten.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel