Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Definitionslisten mit CSS

Gelegentlich merkt man, das die Seitenbeschreibungssprache HTML sehr viel mit dem plattformübergreifenden (d.h. vom Betriebssystem unabhängigen) Austausch wissenschaftlicher Texte zu tun hat. So hat neben den "normalen" Listen auch immer die Definitionsliste zum Standard gehört. CSS macht es möglich, Listen generell zu formatieren, und natürlich auch Definitionslisten. Und um die soll es hier gehen.

Begriff
ausführliche Beschreibung des Begriffes

So geht es

Die Definitionsliste besteht aus drei verschiedenen Tags:
"dl" (definition list: Beginn und Ende der Liste),
"dt" (definition term: der Begriff, der erklärt werden soll),
"dd" (definition description: der Text zur Erklärung).
Alle Tags sollten natürlich geschlossen werden. Voreinstellung ist ein Zeilenumbruch, der eingerückt wird. Bei Definitionslisten sind - anders als bei unsortierten (Aufzählungs-) Listen - keine Bullets oder eigene Grafiken vorgesehen. Aber das lässt sich mit ein bisschen CSS leicht ändern.

Nun, bauen wir uns mal eine Linkliste. In der oberen Zeile soll der Link stehen, und in der unteren ein kurze Erklärung dazu.

Ebenen
Ein Piranho Workshop über den Gebrauch von Ebenen mit CSS.

Wie wird es gemacht?

dd {
font-weight:bold;
text-indent:30px;
line-height:20px;
background:url(bild.gif) no-repeat top left;
}

Erklärung

Nur das "dd" Tag wurde formatiert. Und zwar wird ein Hintergrundbildchen eingebunden, das nicht wiederholt werden soll, also laut Voreinstellung linksbündig ausgerichtet ist. Damit nun der Text das Bild nicht überschreibt, muss er mit "text-indent" eingerückt werden. Dazu muss noch die Zeilenhöhe ("line-height") der Größe der Grafik angepasst werden. Und das ist alles.

Man kann mehrere Beschreibungen hintereinanderschalten und damit auch Linklisten erstellen. Und damit es nicht so grau ausschaut, gibt es noch ein Hintergrundbild:

Dies ist eine Linkliste
CSS einbinden
Links mit CSS
workshop4a.html

Wie wird es gemacht?

dl {
background:url(../pix/bunt.jpg) top left repeat-y #eee;
border:1px solid blue;
padding:20px;
width:400px;
margin-left:100px;
}
dt {
text-align:center;
margin-bottom:10px;
color:blue;
border:1px solid black;
padding:10px;
background-color:gray;
width:200px;
}
dd {
text-align:center;
margin-bottom:10px;
border:1px solid black;
padding:10px;
background-color:gray;
}
dd a:link {
text-align:center;
margin:10px;
color:blue;
border:1px solid black;
padding:10px;
width:200px;
text-decoration:none;
}
dd a:visited {
text-align:center;
margin:10px;
color:white;
border:1px solid black;
padding:10px;
width:200px;
text-decoration:none;
}
dd a:hover {
color:black;
text-decoration:none;
background-color:#eee;
}