Smart Lists: grafische Aufzählungspunkte
Durch den immer stärkeren Fokus auf Web Standards, werden immer häufiger auch HTML-Listen nicht nur für Augzählungen sondern auch zur Erstellung von Navigationen verwendet. Bartelme Design zeigt, wie einfache Listen ansprechend und browserübergreifen gleich dargestellt werden können.
Web Standards
In letzter Zeit steigen immer mehr Seiten auf XHTML und CSS um — ein Trend, welchen ich zugegebenermaßen sehr begrüße. Die Vorteile der strikten Trennung von Style und Content und die damit verbundene Felxibilität, Kostenersparnis und Accessibility scheint sich nun wirklich bei einer großen Anzahl an Designern im Bewusstsein zu verankern.
Einen wichtigen und im Web oft diskutierten Bereich nehmen dabei geordnete und ungeordnete Listen ein, welche durch den Einsatz von CSS in beliebigen Anordnungen und Styles verwendet werden können — so finden sich im Web duzente Tutorials, wie aus einfachen Listen beispielsweise horizontale oder vertikale Navigationselemente erstellt werden können — was aber, wenn die Liste einfach als solche angezeigt werden soll? Was tun, wenn ich den standardmäßigen Aufzählungspunkt durch eine eigens erzeugte Grafik ersetzen möchte?
Verschiedene Browser — verschiedene Ergebnisse
Ein möglicher Ansatz besteht nun darin, über das CSS-Attribut list-style das standardmäßige Aufzählungszeichen
des Browsers zu überschreiben und durch eine eigene Grafik zu ersetzen. Die dafür notwendige CSS-Regel sieht folgendermaßen
aus:
ul {
list-style-image: url(“dot.png”);
}
Das Ergebnis ist jedoch eher unzufriedenstellend. Die unterschiedlichen Browser zeigen bezogen auf die vertikale Position
das zuvor definierte Bild recht unterschiedlich an. Einmal wird es zu weit oben, dann wieder zu weit unten angezeigt. Beim Einsatz von Listen tendiere ich persönlich daher eher dazu, den gewünschten Effekt mittels des CSS-Attributs background-image
zu erzielen. Und so geht’s:
Schritt 1
Um unseren Listenelementen ein Hintergrundbild zuweisen zu können, müssen wir zuerst das störende Aufzählungszeichen
loswerden. Dies geschieht einfach über folgende Regel ul { list-style: none; }. Den meist störenden Abstand zur linken
Seite hin können wir durch das Setzen von margin und padding auf den Wert „0“ erreichen.
ul { list-style: none; margin: 0; padding: 0;}. Ihr werdet bemerkt haben, dass ich beiden Attributen lediglich den
Wert „0“ ohne Einheit (z.B. px oder em) zugeweisen habe — 0 ist eben 0, egal in welcher Einheit. Dieser
Ansatz wird von vielen CSS-Experten favorisiert; ist jedoch eher eine Sache der persönlichen Einstellung. However, innerer
und äußerer Abstand sind nun auf 0 gesetzt.
Schritt 2
In einem zweiten Schritt weisen wir nun allen Listenelementen das zuvor erstellte Hintergrundbild zu
li { background: transparent url(“dot.png”) no-repeat 0px 50%; }. Auch hier hat meine Vorliebe für kompakte
CSS-Regeln wieder zugeschlagen — Shorthand nennt sich dieser Stil, bei welchem mehrere Attribute aneinandergereiht werden.
Diese Regel könnte man auch folgendermaßen lesen:
Setze die Hintergrundfarbe eines jeden Listenelements auf transparent. Weise danach jedem dieser Elemente die
Grafik „dot.png“ als Hintergrundbild zu. Zeige das Bild nur ein einziges Mal an — und zwar 0px vom linken
Rand und vertikal zentriert.
Wichtig dabei ist, dass diese Reihenfolge exakt eingehalten wird, da es sonst zu Darstellungsfehlern kommen kann. Sieht man sich die Liste nun in einem Browser an, wird man bemerken, dass das Bild nun unterhalb des Textes angezeigt wird,
wodurch weder der Text, noch das Bild einwandfrei zu erkennen sind. Aus diesem Grund muss der zuvor erstellten Regel noch ein
gewisser Abstand zur linken Seite hin zugewiesen werden. Dies geschieht über das Attribut padding-left: 20px.
Dadurch wird der Text eines jeden Listenelements 20px nach rechts verschoben, wodurch die Grafik nun klar ersichtlich ist. Der Abstand ergibt sich klarerweise aus der Größe des verwendeten Bildes; ist das Bild größer, wird ein höherer Wert definiert, und umgekehrt.
