Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren

Posted by sura1 - 16. Januar 2009

jan16_128x128
Bookmark and Share

5 Beispiele, wie Sie ungeordnete Listen formatieren können – 5 Ways To Set Your Unordered Lists Apart

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.

CSS bietet nun Mechanismen, die 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:

   Fertige Beispiele: Zip_Datei (14,2 KB)
demo2 button1

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.

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

ul1_1

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.

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

ul2

3: Verwendung einer Grafik (Use an Image)

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

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

ul3

4: Pseudo-Klasse a:hover, border, backgrounds (Borders, Backgrounds and the Hover Class)

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!

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

ul4

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!

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

ul5

   Fertige Beispiele: Zip_Datei (14,2 KB)
demo2 button1

Wenn Sie die Zip-Datei mit den 5 Beispielen downloaden, finden Sie im Ordner *unorderedlists* insgesamt 11 verschiedene Grafiken. Setzen Sie diese in den Beispielen 3 und 5 ein und ändern Sie damit das Aussehen dieser beiden Listen!

gradient8

Ähnliche Beispiele:

CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen
Formatierung von Überschriften mit CSS
Formatierung von Überschriften mit CSS (Teil 2)
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow)
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes – Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: