Listen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Einführung

Listen können Menschen auf verschiedene Arten dabei behilflich sein, den Überblick zu behalten und sich auf das Wesentliche zu konzentrieren. Das beginnt bei der Hausfrau, die ihrem Mann beim Verlassen des Hauses noch schnell den Einkaufszettel in die Hand drückt, und reicht bis zur Radiostation, die gerade die 100 schlimmsten Songs aller Zeiten vorstellt. Beim Webdesign ist das genauso: HTML-Listen helfen bei der Präsentation der organisierten Inhalte Ihrer Site, indem die Schlüsselelemente strukturiert zusammengefasst werden.

HTML-Listen bieten aufgrund ihrer unterschiedlichen Darstellung im Dokument gewisse Vorteile. Die Listeneinträge werden normalerweise eingerückt und mit einem vorangestellten Aufzählungszeichen (Marker, "Bullet") dargestellt. Für ungeordnete Listen ist der Marker normalerweise ein gefüllter Kreis (siehe folgende Abbildung), für geordnete Listen eine Zahl. Schon mit wenigen Zeilen HTML-Code kann ein Webautor auch ohne ein Bildbearbeitungsprogramm eine Liste mitsamt Aufzählungszeichen erstellen. Mit CSS können diese Listen noch ansprechender gestaltet werden.

Abbildung: Standarddarstellung einer Liste.

Webentwickler können die Darstellung einer Liste an das allgemeine Design einer Webseite anpassen, ohne sich dabei auf die Standarddarstellung des Browsers verlassen zu müssen. In diesem Kapitel beschäftigen wir uns mit den Möglichkeiten, die Nummerierung einer Liste anzupassen, ein eigenes Bild als Marker zu verwenden, sogenannte hängende Einzüge ohne Marker zu erreichen, und vielem mehr.

  

• Die Formatierung einer Liste ändern
• Browserübergreifende Einrückungen
• Listeneinträge voneinander trennen
• Eigene Aufzählungszeichen für Listeneinträge
• Eigene Grafiken als Marker für Listeneinträge verwenden
• Große Grafiken als Aufzählungszeichen verwenden
• Die Darstellung einer Liste durch Grafiken verstärken
• Listeneinträge als Inline-Elemente darstellen
• Hängende Einzüge für Listen definieren
• Das Aufzählungszeichen innerhalb des Eintrags darstellen

  

<< zurück

vor >>