dynamicinternet Wir machen Ihr Web dynamisch!

Definitionslisten nutzen

geschrieben von Micha am 09. August 2007 | kein Kommentar

Eigentlich wollte ich schon immer mal über das HTML Element Definitionsliste (definition list) und dessen Einsatzmöglichkeiten schreiben. Da ich heute morgen bei einem WordPress Projekt ein Problem mit einer Definitionsliste lösen konnte, will ich meine Erfahrungen gleich einmal wiedergeben.

Was ist eine Definitionsliste?

Neben den häufig eingesetzten ungeordneten Listen <ul> und geordneten Listen <ol> gibt es noch eine dritte Listenform, die Definitionsliste, im englischen definition list <dl>. Schauen wir uns die Notierung einer Definitionsliste im Quelltext an:

<dl>
	<dt>Ausdruck</dt>
	<dd>Definition</dd>
</dl>

Definitionslisten sind also Ausdruck-Wert-Paare, wobei auch mehrere dt oder dd Elemente verwendet werden können. Ebenso können diese Elemente verschachtelt werden.

Was bringt uns so eine Definitionsliste? Erst einmal die semantische Zusammengehörigkeit von Elementen innerhalb einer Aufzählung:

dl

Definitionsliste

ul

ungeordnete Liste

ol

geordnete Liste

Ebenso sind damit Gegenüberstellungen zu realisieren, ohne gleich eine Tabelle zu bemühen:

<dl>
	<dt>Äpfel</dt>
	<dd>1 kg</dd>
	<dd>2,99 &euro;</dd>
	<dt>Mango</dt>
	<dd>1 Stück</dd>
	<dd>0,99 &euro;</dd>
</dl>

Mit ein bischen CSS sieht das dann so aus:

Wir lassen dazu die Liste nach links floaten, ebenso die einzelnen Elemente. Die Liste bekommt eine Breite zugewiesen und diese Breite wird auf die 3 Listenelemente aufgeteilt.

CSS:
dl{
	float:left;
	width:300px;
}
dt, dd{
	float:left;
	width:100px;
	margin:0;
	padding:0;
}

Per CSS stehen euch alle Möglichkeiten offen, die Liste zu stylen.

WordPress und Definitionslisten

Das WordPress von Haus aus keine Tabellen unterstützt, macht die Definintionslisten für uns Blogger natürlich interessant. Es gibt zwar Plugins, die Tabellen in WordPress ermöglichen, aber außer Herr Basic mit seinen monatlichen Statistiken nutzt die wohl kaum jemand.
Wir können Definitionslisten in unseren Theme Dateien verwenden. Zum Beispiel in der single.php: die Autor-, Datums- und Kommentarinformationen unter der Beitragsüberschrift können mit einer Definitionsliste abgebildet werden (bei mir ist es eine ungeordnete Liste), oder unter dem Artikel die Beitragsinformationen. Perun hat dazu einen ausführlichen Beitrag geschrieben.

Nun zu meinem Problem heute morgen. In diesem Projekt werden sehr viele Seiten verwendet. Eine Seite “Geschichte” soll die vorhandenen Unterseiten abbilden. Das alleine wäre ja mit wp_list_pages() und den entsprechenden Parametern kein Problem. Es soll natürlich optisch etwas hermachen. Mit eigenem Aufmacherbild, Hintergrundimage usw. Um zu probieren, wie es aussehen könnte, habe ich bei der Seite in den Code-Editor folgenden Code eingefügt:

<div class="bla">
	<img src="..." />
	<h3>Titel</h3>
	<ul>
		<li>Link zur Unterseite</li>
	</ul>
</div>

Soweit sah das auch alles wie gewünscht aus. Als ich jedoch die Seite noch einmal bearbeitet habe und sie danach gespeichert habe, sah der Code plötzlich so aus:

<p class="bla">&nbsp;</p>
	<img src="..." />
	<h3>Titel</h3>
	<ul>
		<li>Link zur Unterseite</li>
	</ul>

Das Div war verschwunden und statt dessen ein Paragraph, völlig unbrauchbar. Also habe ich eine Definitionsliste verwendet:

<dl class="eineKlasse">
	<dt><img src="bild.jpg" alt="text" class="float_left" /></dt>
	<dd><h3><a href="link" title="text">Seitentitel</a></h3></dd>
	<dd>Link zur Unterseite</dd>
</dl>

Damit kann ich die Unterseiten nun so darstellen, wie ich es mir vorstelle. Natürlich schreibe ich diese Seitenlisten nicht manuell in den Editor, sondern ich habe mir ein Seitentemplate erstellt, wo das automatisch geht. Aber das ist eine andere Baustelle…