Große Grafiken als Aufzählungszeichen verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Wenn Sie für die Eigenschaft list-style-image besonders große Grafiken verwenden, werden diese unter Umständen nicht vollständig dargestellt.

Lösung

Verwenden Sie anstelle von list-style-image die Eigenschaft background. Entfernen Sie hierfür zu Beginn das Standard-Aufzählungszeichen mittels der Eigenschaft list-style (siehe nächste Abbildung):

ul {
 margin-left: 40px;
 padding-left: 0px;
 list-style: none;
}

Standard-Aufzählungszeichen wurden entfernt

Abbildung: Die Standard-Aufzählungszeichen wurden entfernt.

Damit genügend Platz für das neue Bild vorhanden ist, müssen Sie links von den Listeneinträgen einen entsprechenden breiten Außenabstand definieren (siehe folgende Abbildung):

ul {
 margin-left: 40px;
 padding-left: 0px;
 list-style: none;
}
li {
 padding: .3em 0 1em 40px;
 font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
}

Auf linker Seite der Listeneinträge wurde zusätzlicher Außenabstand definiert

Abbildung: Auf der linken Seite der Listeneinträge wurde zusätzlicher Außenabstand definiert.

Jetzt können Sie das neue Aufzählungszeichen mit Hilfe der Eigenschaft background einfügen (siehe nächste Abbildung):

ul {
 margin-left: 40px;
 padding-left: 0px;
 list-style: none;
}
li {
 padding: .3em 0 1em 40px;
 font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
 background: url(search_32.eps) no-repeat;
}

Aufzählungszeichen werden vollständig dargestellt

Abbildung: Die Aufzählungszeichen werden vollständig dargestellt.

Diskussion

Die Verwendung der Eigenschaft background gibt Ihnen größeren Gestaltungsspielraum als list-style-image. Mit der hier gezeigten Technik können die Aufzählungszeichen eine beliebige Größe haben, solange der linke Außenabstand breit genug ist.

Siehe auch

Das Rezept Die Darstellung einer Liste durch Grafiken verstärken für eine komplexere Version dieser Lösung.

  

<< 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