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;
}
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):
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;
}
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