19.01.2008

Listen: Richtig einsetzen und formatieren

Eine Gliederung lässt sich sehr übersichtlich mit einer Liste darstellen. Formatierungen erfolgen über CSS. In diesem Zusammenhang sind vorwiegend die "Ordered List" und die "Unordered List" von Bedeutung. Die "Definition-List" als dritte Variante ist vor allem für Glossare gedacht und soll hier außen vor bleiben.

1. Ordered List <ol> (nummerierte Liste)

Mit diesem Listentyp werden die Nummerierungen automatisch generiert. Es ist somit nicht erforderlich, die laufenden Nummern zu erfassen. Das hat auch den Vorteil, dass bei längeren Listen nicht auf die vertikale "Flucht" bei Zehnern und Einern geachtet werden muss.

Es gibt mehrere List-Style-Typen, die jedoch nicht immer von allen Browsern unterstützt werden. Sofern ein List-Style-Type nicht mit CSS funktionieren sollte, kann man in diesem Fall auf die HTML-Auszeichnung zurückgreifen. Hier die Angaben für die gängigsten Aufzählungen:

list-style-type: decimal; für Dezimalzahlen 1., 2., 3. usw.

list-style-type: upper-roman; für römische Zahlen I., II., III. usw.

list-style-type: lower-alpha; für Kleinbuchstaben a., b., c. usw.

list-style-type: upper-alpha; für Großbuchstaben A., B., C. usw.

Will man eine Liste in zwei Blöcke teilen, so packt man am besten jeden Listenteil als eigenständige Liste in einen Container und ordnet die Container per float nebeneinander an.
Damit der zweite Listenteil nicht wieder mit der Anfangsnummer/-Ziffer beginnt, kann diese individuell festgelegt werden, z.B.

<ol start="8">

Die List-Style-Type-Angaben werden für das Element ol hinterlegt.

Beispiele

2. Unordered List <ul> (Aufzählungsliste)

2.1 Reguläre Aufzählungszeichen

Sehr universell einsetzbar ist die "Unordered List". Sie sorgt nicht nur für Übersichtlichkeit bei Aufzählungen, sondern kann auch sehr gut bei Navigationen eingesetzt werden. Darüber hinaus bietet sie sehr vielfältige Gestaltungsmöglichkeiten.

Bei der gewöhnlichen Liste (ohne Zusatzangaben) wird ein Aufzählungspunkt dem Listeneintrag vorangestellt. Darüber hinaus gibt es noch weitere Zeichen, die dem Listeneintrag vorangestellt werden können:

list-style-type: circle; stellt einen kleinen, offenen Kreis voran

list-style-type: square; stellt ein ausgefülltes Quadrat voran.

list-style-type: disc; entspricht dem normalen Aufzählungspunkt.

Die List-Style-Type-Angaben werden für das Element ul hinterlegt. Soll kein Aufzählungspunkt erscheinen, setzt man das Attribut list-style-type: none;.

Beispiele

2.2 Aufzählungsgrafik

Mit list-style-image: url(listengrafik.gif); kann man mit einer eigenen Grafik einen Aufzählungspunkt ansprechend gestalten. Die Größe der Grafik sollte sich dabei an der verwendeten Schriftgröße orientieren.

Beispiele

3. List-Style-Position

Das Attribut "List-Style-Position" ist von Bedeutung, wenn sich ein Listeneintrag über mehrere Zeilen erstreckt.

Mit list-style-position: outside; wird festgelegt, dass das Listenzeichen stets mit einem kleinen Abstand vor dem gesamten Listeneintrag steht, unabhängig davon, über wieviele Zeilen sich dieser erstreckt. "Outside" ist die Standardeinstellung.

Dagegen steht bei list-style-position: inside; das Listenzeichen vor der ersten Zeile des Listeneintrags. Die weiteren dazugehörigen Zeilen werden unter dem Listenzeichen angeordnet.

Beispiele

4. Listeneinträge formatieren

Die Listeneinträge selbst können über das Element li speziell formatiert werden. Wie üblich können hier Angaben zu Schriftarten, -größen, -farben, Hintergrundfarben, Abstände etc. erfolgen, z.B. so:

li
{
font-size: 0.9em;
color: #8B2500;
padding-left: 5px;
background: #E6E6FA;
width: 200px;
margin-bottom: 5px;
}

Ergebnis:

nach oben