Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Liste mit grafischen Aufzählungszeichen

Posted by sura1 - 2. September 2008

Bookmark and Share

CSS-Übung: Listen mit grafischen Aufzählungszeichen

Auf der Webseite www.little-boxes.de habe ich ein interessantes Beispiel gefunden, wie man mit grafischen Aufzählungszeichen eine ungeordnete Liste <ul> optisch aufwerten kann.

Ich habe die Vorlage als Grundlage für meine Bearbeitung genommen. Dabei wurden von mir sowohl die CSS-Dateien als auch der HTML-Quellcode an diese Variante angepaßt.

Das fertige Beispiel sieht so aus:

[Live-Demo: Fertiges Beispiel oder Demo-Button anklicken!]

Die Grafiken für obiges Beispiel finden Sie hier: (Download: rechte Maustaste – Grafik speichern unter… )

Die 3 Icons stammen aus dem Silk-Set und Flags-Set von famfamfam.

Das Listen-Beispiel befindet sich in den Übungsdateien von Little Boxes Teil 02 und kann unter www.little-boxes.de/Beispieldateien heruntergeladen werden (4,3Mb ZIP-Datei; ca. 100 Beispiele!).

Modifizierter HTML-Quellcode:

Bearbeiteter CSS-Code:

Die CSS-Datei ist im HTML-Quellcode im Kopfbereich eingebunden!

CSS-Code:

body {
width:450px;
font-family:"Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
font-size:small;
font-weight:700;
line-height:1.5;
background-color:#ece9db;
color:#000;
margin:10px auto;
}
h3 {
color:#FFBF00;
background-color:#0F0F0F;
text-align:center;
letter-spacing:1px;
padding:1px 0;
}
a {
color:#009F00;
text-decoration:none;
}
a:hover {
text-decoration:none;
color:maroon;
border-bottom:1px dotted maroon;
}
#gif1 ul,#gif2 ul,#gif3 ul {
background-color:#DFDFDF;
border:1px solid #000;
margin-left:0;
padding:2px 20px;
}
#gif1 ul li {
list-style-type:none;
background:url(bullet_yellow.gif) no-repeat left 5px;
margin-left:-.5em;
padding:2px 20px;
}
#gif2 ul li {
list-style-type:none;
background:url(arrow_right.png) no-repeat left 5px;
margin-left:-.5em;
padding:2px 20px;
}
#gif3 ul li {
list-style-type:none;
background:url(at.gif) no-repeat left 6px;
margin-left:-.5em;
padding:2px 22px;
}

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: