WordPress & Webwork

Bildergallerie mit Definitionslisten

Wie man Bildergallerien mit Definitionslisten darstellen kann.

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

1 Reaktion(en)

  1. Pingback: CSS-Technik-News

Die Kommentare in diesem Beitrag sind geschlossen.