Wie man Listen erstellt, habe ich vor einiger Zeit in diesem Tutorial erklärt.
Heute folgen einige Beispiele, wie man die Listen mit Hilfe von CSS auf verschiedene Weisen stylen kann.

Als Grundgerüst verwenden wir eine einfache Liste; je nachdem, ob es sich um eine ungeordnete oder geordnete Liste handeln soll, notiert ihr also den ul- bzw. ol-Tag.

<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
<li>dritter Listenpunkt</li>
</ul>

Ohne jegliche CSS-Anweisungen sieht die Liste so aus:

Box

Um die Liste wie eine Box mit einzelnen Feldern aussehen zu lassen, benötigen wir folgende CSS-Angaben:

body {
font: 85%/100% Verdana, sans-serif;
color: #ddd;
font-variant: small-caps;
}

ul {
width: 200px;
padding: 0;          /* Listenpunkte nicht nach rechts eingerückt */
list-style: none;                    /* keine Listenpunkte */
background: #8385b4;
border-right: 2px solid #3e4292;    /* simuliert Schatten */
border-bottom: 2px solid #3e4292;    /* simuliert Schatten */
}

li {
border-bottom: 1px solid #3e4292;
padding: 10px;
display: block;   /* damit alle gleich breit sind */
text-align: center;
}

nummerierte Kasten

Hier wurde eine geordnete Liste verwendet:

ol {
width: 200px;
border: 1px solid #666;
padding: 10px 10px 10px 30px;    /* links mehr Padding wegen der Zahlen */
background: #f2ecf2;
}

li {
border: 1px solid #ccc;
padding: 12px;
margin: 2px 0;
background: #ddd url(bg.png);
}

horizontales Menue

Die Variante, in der die einzelnen Listenpunkte nebeneinander statt untereinander stehen, darf natürlich auch nicht fehlen:

body {
font: 85%/100% Verdana, sans-serif;
color: #b0600a;
text-transform: uppercase;
}

ul {
width: 480px;
background: #f8f8d5;
margin: 15px;
padding-left: 0;
display: inline;
}

li {
margin-left: 0;
padding: 6px 10px;
border-left: 2px solid #f98e2f;
list-style: none;
display: inline;
}

li.erster {
border: 0;   /* damit links außen keine Linie ist */
}

Hier wurde zusätzlich im HTML-Teil dem ersten Listenpunkt die Klasse “erster” zugewiesen.

Viel Spaß damit!