Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS – Listen mit Sonderzeichen

Posted by sura1 - 3. September 2008

Bookmark and Share

CSS-Übung: Liste mit Sonderzeichen

Auf der Webseite www.little-boxes.de habe ich ein interessantes Beispiel gefunden, wie man mit Sonderzeichen 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!]

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:#ECE9D8;
color:#000;
margin:50px auto;
}
h2 {
text-align:center;
background:#0F0F0F;
color:#FFDF00;
letter-spacing:2px;
}
a {
color:#009F00;
text-decoration:none;
}
a:hover {
text-decoration:none;
color:maroon;
border-bottom:1px dotted maroon;
}
ul li {
list-style-type:none;
margin:0;
padding:0;
}
.liste {
background-color:#DFDFDF;
border:1px solid #000;
margin:4px 0;
padding:1px 0;
}
/* Der Trick: Aufzählung mit negativem margin nach links rücken */
ul li span {
margin-left:-1em;
}

Schreibe einen Kommentar

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: