Inhalt:Beispiele für verschachtelte Listen

Die einfachste und naheliegendste Möglichkeit eine Liste zu nutzen, ist diese auch als solche einzusetzen. Wenn Sie also Daten auflisten möchten bzw. müssen, die einen chronologischen Ablauf haben, können Sie hierfür ganz bequem eine geordnete Liste nutzen. Eine geordnete Liste wird über das <ol>-Tag definiert. Sollte es sich hingegen um eine reine Aufzählungen handeln, bietet sich die Nutzung einer ungeordneten Liste an, die über das <ul>-Tag definiert wird.

Auge

Beispiel: ungeordnete Liste

Wie man an den Listen auf dieser Seite sieht, können diese ohne Probleme auch ineinander verschachtelt werden. Dabei spielt es überhaupt keine Rolle, ob man verschiedene Listenarten verschachtelt oder in welcher Reihenfolge verschachtelt wird o.ä.. Einfach so verschachteln, wie es die Auflistung der Daten erfordert bzw. das lesen der Listen für den User einfacher macht.

Außerdem bieten Listen von Haus aus Aufzählungszeichen an, so genannte Bullets. Je nach Listen-Typ stehen unterschiedliche Zeichen zur Verfügung - grundsätzlich lassen sich diese Zeichen aber per CSS ändern bzw. sogar komplett ausblenden. Letzteres ist bei den meisten anderen Beispielen der Fall, weil es sonst Probleme mit dem Layout geben würde.

Wenn die Aufzählungszeichen verwendet werden, nutzt man die geordneten Listen in der Regel mit römischen oder arabischen Zahlen oder mit Buchstaben. Für die ungeordneten Listen kommen normalerweise Quadrate oder Kreise zum Einsatz. Wer möchte, kann auch eigene Bilder als Bullet angeben, aber da kann es zu Problemen bei der Positionierung selbiger kommen. Diese Problematik wird meist dadurch umgangen, dass man über ein backgrund-image und ein wenig padding ein Bild hinterlegt.

Ordner

Beispiel: geordnete Liste

  1. Begrüßung
  2. Vorstellung der Veranstaltung
  3. Vortrag "Sicherheit in WebApps"
    1. Was mus ich wissen?
      1. Aktualität der Informationen
      2. Seriöse Quellen
    2. Was kann ich tun?
    3. Wer kann mir helfen?
  4. Pause
  5. Wahl des Vorstands
  6. Verabschiedung

Nun der Vollständigkeit wegen noch eine gemischte Liste, um zu zeigen, dass auch eine Verschachtelung von verschiedenen Listenarten ohne Probleme möglich ist und auch durchaus sinnvoll sein kann, wenn es die darzustellenden Daten zulassen. Der Einfachheit halber, habe ich die obere geordnete Liste genommen und die äußere Liste in eine ungeordnete gewandelt.

Beispiel: gemischte Liste

zur Hauptseite der CSS-Listen

Schauen Sie doch auch mal im PHP4-Forum vorbei...