Die Darstellung einer Liste durch Grafiken verstärken

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Durch die Verwendung von Grafiken soll die Aufmerksamkeit der Benutzer auf eine Liste gelenkt werden.

Lösung

Verwenden Sie als Hintergund für das Element ul und die Aufzählungszeichen der li-Elemente eigene Grafiken.

Erzeugen Sie zuerst ein Hintergrundbild für die ungeordnete Liste und für das Aufzählungszeichen (siehe folgende Abbildung).

Für die Darstellung verwendeten Bilder

Abbildung: Die für die Darstellung verwendeten Bilder.

Im nächsten Schritt definieren Sie für das Element ul das Hintergrundbild. Um der Liste die gleiche Breite zu geben wie dem Bild, verwenden Sie außerdem die Eigenschaft width (siehe nächste Abbildung):

ul {
 background: url(list-bkgd.gif) bottom;
 width: 298px;
 list-style: none;
 padding: 0 0 12px;
 margin: 0;
}

Hintergrundbild für die gesamte Liste

Abbildung: Das Hintergrundbild für die gesamte Liste.

Definieren Sie nun das Aufzählungszeichen für die Listeneinträge. Zusätzlich können Sie die Definitionen für Rahmen einsetzen, um die Listeneinträge klarer voneinander zu trennen (siehe folgende Abbildung):

ul {
 background: url(list-bkgd.gif) bottom;
 width: 298px;
 list-style: none;
 padding: 0 0 12px;
 margin: 0;
}
li {
 color: #eee;
 font-family: Verdana, Arial, Verdana, sans-serif;
 padding: 7px 7px 7px 20px;
 border-bottom: 1px solid #888;
 background: url(list-marker.gif) no-repeat 5px .8em;
}

Stildefinitionen für Listeneinträge machen Darstellung vollständig

Abbildung: Die Stildefinitionen für die Listeneinträge machen die Darstellung vollständig.

Diskussion

Für diese Lösung kommen mehrere Techniken gemeinsam zum Einsatz. Der erste Teil der Lösung besteht in der Verwendung eines eigenen Hintergrundbilds für das Element ul. Da diese Grafik eine feste Höhe und Breite besitzt, müssen Sie die Breite für die Liste ebenfalls im CSS-Code definieren.

Es gibt eine Reihe von Gründen, warum Webentwickler sich scheuen, die Eigenschaft height zu verwenden. So könnte ein Benutzer die Standardgröße für die Textdarstellung verändern, oder die Stildefinitionen werden für Listen mit einer sehr hohen oder sehr geringen Anzahl von Einträgen verwendet.

Damit das Hintergrundbild in möglichst vielen Situationen verwendet werden kann, muss es eine möglichst große Höhe besitzen. In unserem Beispiel hatte das Hintergrundbild eine Höhe von 465 Pixeln, was für die Darstellung von einer Handvoll Einträgen mehr als genug ist. Wie in der nächsten Abbildung zu sehen ist, bleibt das Design auch dann noch intakt, wenn die Schriftgröße stark erhöht wird.

Design bleibt auch bei hohen Textgrößen intakt

Abbildung: Das Design bleibt auch bei hohen Textgrößen intakt.

Da das Hintergrundbild am unteren Ende abgerundete Ecken besitzt, wurde an der Unterseite ein Außenabstand von 12 Pixeln definiert, damit in diesem Bereich keine Listeneinträge angezeigt werden. Außerdem wurde die Position des Hintergrundbildes mit dem Wert bottom definiert, damit die abgerundeten Ecken auch dann noch dargestellt werden, wenn der Text vergrößert dargestellt wird oder sich die Anzahl der Listeneinträge erhöht.

Auch für die Einträge wurden mehrere Techniken kombiniert. Zuerst wurden die Einträge optisch voneinander getrennt. Im Gegenssatz zum Rezept Listeneinträge voneinander trennen wurde in dieser Lösung für die Unterseite des ul-Elements kein Wert für die untere Rahmenseite definiert. Zweitens haben wir die Technik aus dem Rezept Große Grafiken als Aufzählungszeichen verwenden verwendet, um eigene Aufzählungszeichen zu definieren.

Siehe auch

Den Abschnitt Links und Navigation für Möglichkeiten, eine Liste als Navigationsmenü darzustellen.

  

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