Sie sind hier: Startseite -> CSS-Grundlagen -> Listen -> Listen formatieren

CSS-Grundlagen: Listen formatieren

Listen mit CSS formatieren

Neben den Aufzählungszeichen gibt es vor allem die Möglichkeit, mit CSS die generelle Darstellung sehr bequem zu verändern. Das betrifft die Liste als solches ebenso wie jeden einzelnen Eintrag, der in seinen Abständen und Einrückungen verändert werden kann.



Da steht ein Satz.

  • Erster Eintrag>
    • Unterpunkt 1
    • Unterpunkt 2
  • Zweiter Eintrag

Da steht noch ein Satz.

  • Erster Eintrag>
    • Unterpunkt 1
    • Unterpunkt 2
  • Zweiter Eintrag

Das ist wohl der letzte Satz.

Im ersten Fall sieht man eine 08/15-Aufzählungsliste, wie sie für HTML typisch ist. Sie ist zusätzlich zwar unterteilt, indem der erste Listenpunkt zwei Unterpunkte erhalten hat und damit zwei Ebenen dargestellt werden, aber ansonsten sind es die Standardeinstellungen, wie sie der Browser üblicherweise anzeigt.

Die zweite Liste ist mit CSS manipuliert worden. Als erstes ist der obere Rand der Liste selbst (ul-Tag) deutlich erhöht worden und deshalb habe ich Sätze zwischen den Listen eingetragen, um den Unterschied sichtbar zu machen. Die erste Liste ist weniger weit vom darüber befindlichen Satz entfernt als die zweite Liste.

Der erste Eintrag der zweiten Liste ist auch weiter nach rechts gerückt als der zweite, weil dieser erste Eintrag vom linken Rand um fünf Pixel verschoben wurde. Seine beiden Unterpunkte sind gar um 30 Pixel verschoben worden, was durch den Unterschied zur ersten Liste offenbar wird.

Mit diesen Befehlen, die man normalerweise natürlich nicht direkt bei den Einträgen schreibt, sondern zentral in einem CSS-Dokument anführt, kann man die Abstände zwischen der Liste und ihrer Umgebung einerseits und innerhalb der Liste bei den Beiträgen andererseits stark verändern. So könnte eine mehrfach verschachtelte Liste durch engere oder weitere seitliche Abstände gut strukturiert werden, damit man erkennen kann, was zusammengehört und was nicht.

Ebenfalls interessant:

Bulletzeichen (ul)

Informationen über die Möglichkeit, mit CSS die Aufzählungszeichen der Listen zu verändern.

Bullettzeichen (ol)

Informationen über die Möglichkeit, die Aufzählungszeichen bei geordneten Listen mit CSS zu verändern.

list-style-image

Informationen über den CSS-Befehl list-style-image, mit dem bei einer ungeordneten Aufzählungsliste ein eigenes Zeichen eingebaut werden kann.

[aktuelle Seite]

Listen formatieren

Informationen über die Möglichkeiten, mit CSS Aufzählungslisten zu formatieren.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Listen

Startseite CSS-Grundlagen