Eigene Grafiken als Marker für Listeneinträge verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen eine eigene Grafik als Marker für Listeneinträge verwenden – zum Beispiel das in der folgenden Abbildung gezeigte Bild eines Karos.

Eigene grafische Marker für Listeneinträge

Abbildung: Eigene grafische Marker für Listeneinträge.

Lösung

Verwenden Sie die Eigenschaft list-style-image, um eine Grafik für den Marker anzugeben:

ul {
 list-style-type: disc;
 list-style-image: url(bullet.gif);
}

Diskussion

Mit der Eigenschaft list-style-image können Sie den Speicherort der Grafik angeben, die Sie als Marker verwenden wollen. Da sich die Größe des Bildes mit CSS nicht verändern lässt, muss das Bild bereits die korrekten Dimensionen haben. Zu große Bilder können die Lesbarkeit des Listeneintrags herabsetzen oder dafür sorgen, dass der Marker teilweise außerhalb des sichtbaren Bereichs liegt, wie in der nächsten Abbildung gezeigt. Wenn Sie eigene Marker benutzen, sollten Sie sicherstellen, dass die Grafik die für das Design Ihrer Webseite richtige Größe hat.

Sind als Marker verwendeten Bilder zu groß, werden sie nicht vollständig dargestellt

Abbildung: Sind die als Marker verwendeten Bilder zu groß, werden sie eventuell nicht vollständig dargestellt.

Der Wert für das grafische Aufzählungszeichen wird vererbt. Das bedeutet, dass verschachtelte Einträge das gleiche Bild verwenden wie ihr Elternelement. Um das zu verhindern, muss für das enthaltene Kindelement der Wert none angegeben werden.

ul {
 list-style-type: disc;
 list-style-image: url(bullet.gif);
}
ul ul { list-style-image: none; }

Für den Fall, dass das Bild aus irgendeinem Grund nicht angezeigt werden kann, sollten Sie mit der Eigenschaft list-style-type immer eine Alternative angeben. In unserer Lösung wird der Markertyp disc benutzt, falls die Grafik bullet.gif nicht angezeigt werden kann.

Siehe auch

Das Rezept Eigene Aufzählungszeichen für Listeneinträge zum Erstellen eigener textbasierter Aufzählungszeichen und die CSS 2.1-Spezifikation zur Eigenschaft list-image-type.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln