Das Aufzählungszeichen innerhalb des Eintrags darstellen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Der Marker soll innerhalb der Box für den Listeneintrag dargestellt werden, wie in der folgenden Abbildung gezeigt. Dadurch umfließt der Text den Marker.
Abbildung: Den Marker innerhalb des Listeneintrags darstellen.
Lösung
Benutzen Sie die Eigenschaft list-style-position mit dem Wert inside:
li {
list-style-position: inside;
width: 33%;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0 0 0 1em;
}
Diskussion
In der Regel werden die Listenmarker außerhalb der Einträge dargestellt, wodurch das typische Listen-Layout zustande kommt. In manchen Designs soll das Aufzählungszeichen aber vielleicht zusammen mit dem Text erscheinen, um beispielsweise auf der linken Seite nicht zu viel Leerraum entstehen zu lassen. Dieses Rezept kann visuell noch aufgewertet werden, wenn Sie Ihren eigenen Marker verwenden wie in der nächsten Abbildung, wo anstelle des Standardmarkers Pfeile benutzt wurden.
Abbildung: Ein eigener Marker innerhalb des Listeneintrags.
Siehe auch
Die CSS 2.1-Spezifikation zur Eigenschaft list-style-position.
<< 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