Wie Sie mit CSS ungeordnete Listen formatieren

5 Beispiele, wie Sie ungeordnete Listen mit CSS formatieren

Begriffsbestimmung:

Eine ungeordnete Liste ist eine Reihe von Elementen, die in irgendeiner Weise miteinander in einer logischen Verbindung stehen, aber in keiner besonderen Reihenfolge aufgezählt werden müssen. Das Gegenstück zur ungeordneten Liste ist die geordnete Liste, die einen Index (Zahlen, Buchstaben, römische Zahlen etc.) vor jeden Listeneintrag setzt.

Informationen zu Listen:
http://de.selfhtml.org/html/text/listen.htm#aufzaehlung
http://www.css4you.de/listproperty.html

CSS (Cascading Stylesheets) bieten nun spezielle Mechanismen, um ungeordnete Listen zu formatieren – z.B. durch die Darstellung alternativer Listensymbole wie Grafiken oder Bildern.

5 Beispiele, wie Sie ungeordnete Listen formatieren können:

Basierend auf dem Beispiel 5 Ways to Set Your Unordered Lists Apart, welches ich auf der Webseite CSSNewbie entdeckt habe, möchte ich Ihnen hier meine deutschsprachige Bearbeitung zeigen und näher vorstellen.

1. Änderung Aufzählungszeichen (Change Your Bullets)

Durch den Einsatz von list-style-type können Sie das Aussehen einer ungeordneten Liste verändern.

Änderung Aufzählungszeichen

CSS:

ul#example1 {
	list-style-type: circle;
}

2. Einsatz von Margin und Padding (Add Margins and Padding)

Nur mit Margin und Padding können Sie eine ungeordnete Liste sehr elegant aus ihrem Fließtext hervorheben.

2. Einsatz von Margin und Padding

CSS:

ul#example2 {
	margin: 2em;
}
ul#example2 li {
	padding-left: 1em;
	margin-bottom: .5em;
}

3. Einsatz einer Grafik (Use an Image)

Nehmen Sie eine ansprechende Grafik und formatieren Sie die Listenelemente mit der CSS-Anweisung list-style-image.

3. Einsatz einer Grafik

CSS:

ul#example3 {
	list-style-image: url(block_border.gif);
}
ul#example3 li {
         margin-bottom: .2em;
}

4. Verwendung der Pseudo-Klasse a:hover + Border und Background

Verwenden Sie die Pseudo-Klasse a:hover und die beiden CSS-Befehle Borders und Backgrounds, um Ihre Liste optisch aufzumöbeln. Dieser Trick funktioniert jedoch nicht im IE6!

4. Verwendung  der Pseudo-Klasse a:hover + Border und Background

CSS:

ul#example4 {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
ul#example4 li {
	font-weight: bold;
	margin: 0;
	padding: 3px 10px 5px 20px;
	border-bottom: 1px solid #ccc;
	color: #666;
}
ul#example4 li:hover {
	color: #000;
	background-color: #ddd;
}

5. Mix aus den Punkten 1-4

Mit einem Mix aus Pseudo-Klasse a:hover, list-style-image (2 verschiedene Grafiken) und den CSS-Eigenschaften Border, Margin und Padding erstellen Sie im Nu eine außergewöhnliche ungeordnete Liste. Achtung: im IE6 funktioniert diese Liste nicht!

5. Mix aus den Punkten 1-4

CSS:

ul#example5 {
	margin: 1.5em;
}
ul#example5 li {
	list-style-image: url(quadrat_yellow.gif);
	border-bottom: 1px solid #ccc;
	padding: .2em 0 .2em .5em;
	font-weight: bold;
	color: #666;
}
ul#example5 li:hover {
	cursor: pointer;
	list-style-image: url(quadrat_haken_yellow.gif);
	background-color: #f2f2f2;
	color: #000;
}
Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *