Aufzählungslisten mit CSS ändern

Bessere Gestaltung als unter HTML

Aufzählungslisten trifft man auf Webseiten sehr oft an und sind auch nötig, um Struktur in die Information zu bringen. Gerade zusammenhängende Informationen wie Systemvoraussetzungen bei Computerspiele, Zutaten bei Kochrezepte oder nötige Dokumente für ein Verfahren sind mit einer Aufzählungsliste optimal dargestellt.

Mit HTML sind zwei Konzepte zur Verfügung stehend, die sich in die ungeordnete und in die geordnete Aufzählungsliste untergliedern lassen. Die ungeordnete Liste wird genauso aufgebaut wie die geordnete Liste, nur dass die geordnete Liste nummeriert ist.

Aufzählungslisten mit CSS bearbeiten

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Nun kann man mit CSS aber viel mehr Formatierungsschritte erwägen, als dies mit HTML möglich ist. Das geht soweit, dass man sein eigenes Logo integrieren könnte, sodass das Aufzählungszeichen einen Wiedererkennungswert ergibt. Allerdings kann dies bei langen Listen auch lästig werden, weshalb man sich genau überlegen sollte, ob diese Lösung eine gute ist. Es muss ja nicht das Logo sein, weil man kann ein Themenbild auch wählen und das regelmäßig austauschen.

Vor allem aber die Rahmenbedingungen, die Abstände, die Einrückung der Informationen - diese Dinge lassen sich mit CSS besser und eleganter lösen und vor allem auch zentral über eine CSS-Datei, wodurch alle Listen einer Webseite mit einem Arbeitsschritt überarbeitet werden können, wenn man statt Kleinbuchstaben Großbuchstaben als Aufzählungssymbole einer geordneten Liste haben möchte.

Der wichtigste Punkt sind die Einrückungen und die Abstände. Denn durch eine geschickte Formatierung kann man viel stärker verdeutlichen, was wozu gehört und was nicht. Eine lange Aufzählungsliste mit Argumenten, die vielleicht sogar noch eine weitere Ebene mit zusätzlichen Anmerkungen oder Argumenten aufweist, wird schnell unübersichtlich.

Mit den richtigen Abständen und auch einer stärkeren Einrückung kann man aber die Gesamtübersicht viel klarer gestalten und erleichtert damit auch das Lesen und Verstehen der Besucherinnen und Besucher.

Lesen Sie auch

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

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

Startseite CSS-Grundlagen

Aufzählungslisten mit CSS ändern

Bessere Gestaltung als unter HTML

Aufzählungslisten mit CSS bearbeiten

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich