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
Diesen Blogartikel teilen:

Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Verwandte Beiträge

1 Gedanke zu „Bildergallerie mit Definitionslisten“

  1. Pingback: CSS-Technik-News

Kommentare sind geschlossen.