5 Beispiele, wie Sie ungeordnete Listen formatieren können

Definition einer Liste:

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 vor jeden Listeneintrag setzt.

Informationen zu Listen:

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

Die meisten Browser trennen die Aufzählung von den vorangehenden und folgenden Elementen durch einen Absatz, ziehen jeden Absatz um einige Pixel ein und setzen dem Absatz eine gefüllte Kugel – bullet – voran. Ungeordnete und geordnete Listen können verschachtelt werden und verschachtelte Aufzählungen können verschiedene Aufzählungszeichen aufweisen.

Cascading Stylesheets bieten nun Mechanismen, die speziell ungeordnete und geordnete Listen formatieren – z.B. die Darstellung römischer oder griechischer Ziffern in geordneten Listen, alternativer Listensymbole wie Grafiken oder Bildern anstelle der Kugel oder die Unterdrückung der Listenkugeln.

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

Fertiges Beispiel: Zip_Datei (14,2 KB)

1: Ändern Sie die Aufzählungszeichen (Change Your Bullets)

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

1
2
3

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

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

Nur mit margin und padding können Sie eine ungeordnete Liste sehr schön aus Ihrem Fließtext hervorheben.

1
2
3
4
5
6
7

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

3. Verwendung einer Grafik (Use an Image)

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

1
2
3
4
5
6

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

4. Pseudo-Klasse a:hover, border, backgrounds

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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 (The Whole Shebang)

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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Fertiges Beispiel: Zip_Datei (14,2 KB)

Quelle: CSS Newbie.com
Originalbeispiel ansehen:hier

Ähnliche Artikel:

Diagonale CSS-Navigation mit Rollover-Effect (CSS)

Tags: a:hover, Aufzählungszeichen, Bullets, CSS, CSS-Beispiele, CSS4You, Definition einer Liste, HTML, list-style-type, margin, padding, Pseudoklasse, selfhtml, ungeordnete Listen, unordered lists, www.cssnewbie.com