CSS-Tricks: Listen mit grafischen Aufzählungszeichen

Auf der Webseite von Little Boxes – Webseiten gestalten mit HTML und CSS habe ich ein interessantes Beispiel gefunden, wie Sie mit grafischen Aufzählungszeichen ganz einfach eine ungeordnete Liste (<ul>) optisch aufwerten können.

Das Listen-Beispiel finden Sie in den Übungsdateien von Little Boxes Teil 02. Diese können unter Beispieldateien zu Little Boxes Teil 2 heruntergeladen werden (4,3Mb ZIP-Datei; ca. 100 Beispiele!).

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 meine Variante angepasst.

Fertiges Beispiel ansehen – Grafik anklicken!

Bearbeitung Quellcode und CSS-Dateien:

HTML-Quelltext:

<h3>Liste mit grafischen Aufz&auml;hlungszeichen</h3>
<div id="gif1">
<ul>
   <li>Kisten erstellen</li>
   <li>Kisten gestalten</li>
   <li>Kisten positionieren</li>
</ul>
</div>
<div id="gif2">
<ul>
   <li>Kisten erstellen</li>
   <li>Kisten gestalten</li>
   <li>Kisten positionieren</li>
</ul>
</div>
<div id="gif3">
<ul>
   <li>Flaggen herstellen</li>
   <li>Fahnen gestalten</li>
   <li>Fahnen positionieren</li>
</ul>
</div>

Bearbeiteter CSS-Code:

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: #800000;
border-bottom: 1px dotted #800000;
}
#gif1 ul, #gif2 ul, #gif3 ul {
background-color: #DFDFDF;
border: 1px solid #000;
padding: 2px 20px;
margin-left: 0;
}
#gif1 ul li {
list-style-type: none;
background: url(bullet_yellow.gif) no-repeat left 5px;
padding: 2px 20px;
margin-left: -0.5em;
}
#gif2 ul li {
list-style-type: none;
background: url(arrow_right.png) no-repeat left 5px;
padding: 2px 20px;
margin-left: -0.5em;
}
#gif3 ul li {
list-style-type: none;
background: url(at.gif) no-repeat left 6px;
padding: 2px 22px;
margin-left: -0.5em;
}

Quellen:

Little Boxes – Teil 2

Webseiten gestalten mit CSS.
Navigation, Inhalte gestalten, YAML und mehr.
Markt + Technik / Dezember 2007

Webseiten – Links
a) Little Boxes 2 – Webseiten gestalten mit CSS. Navigation, Inhalte gestalten, YAML und mehr.
b) Little Boxes 2- Beispieldateien

Ähnliche Artikel:

1. CSS für Anfänger: Unterschied zwischen relativer und absoluter Positionierung
2. CSS für Anfänger: Der normale Fluss von div-Boxen
3. Wie Sie mit CSS ungeordnete Listen formatieren
4. CSS für Anfänger: Bilderrahmen um Grafiken mit CSS
5. CSS für Anfänger – Wie Sie ganz einfach Drop Caps erstellen