Bildergallerie mit Definitionslisten

Auf Dezwozhre.com wird auf ein Beispiel hingewiesen wie man mit Definitionslisten eine Bildergallerie erstellen kann. Das wäre semantisch gesehen nur richtig, die Bilder und den dazugehörigen Text und/oder Links als Definitionslisten darzustellen. Das Problem dabei ist, dass die Definitionslisten, im Gegensatz zu ‘normalen’ Listen paarweise daherkommen. Dies erschwert die Formatierung durch CSS.

Eine mögliche Lösung wäre es, die jeweiligen Bilder und der dazugehöriger Text als separate Definitionslisten anzugeben, was wiederum (laut Russ Weakley) nicht semantisch ideal ist.

Und so sieht der Quelltext aus:

dl.gallery{
	border: 1px solid #000;
	background-color: #ddd;
	width: 102px;
	text-align: center;
	padding: 10px;
	float: left;
	margin-right: 1em;}
dt { font-weight: bold; }
dt img{
	border: 1px solid #000;
	width: 100px;
	height: 100px;}
.gallery dd{
	margin: 0;
	padding: 0;}
.list dd{
	margin: 0 0 1em 0;
	padding: 0;}
<dl class="gallery">
	<dt>< img src="flower.jpg" alt=""></dt>
         <dt>< a href="#">Title here< /a></dt>
	<dd>Description here</dd>
</dl>
<dl class="gallery">
	<dt>< img src="flower.jpg" alt=""></dt>
	<dt>< a href="#">Title here< /a></dt>
	<dd>Description here</dd>
</dl>

Wie es in der Praxis aussieht kann man an diesen drei Links nachsehen:

Beispiel 1
Browsercam-Resultate des ersten Beispiels
Weiteres Beispiel

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.