Peruns Weblog - Webwork und Internet

Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema WordPress, Webwork, und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.

Bildergallerie mit Definitionslisten

Perun am 16. Januar 2004 um 16:44 Uhr
wpSEO

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:

Verwandte Beiträge

Kategorien:
Artikel, HTML-CSS
Tags:
 
Beitrag:
Druckvorschau
Rivva:
Was sagen die Anderen dazu?
Kommentare:
Kommentare verfolgen oder ein Kommentar abgeben

«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»

Ein Kommentar

  1. 1. – CSS-Technik-News

    Trackback vom 16. Januar 2004 um 16:48

    Bildergallerie mit Definitionslisten

    Auf Dezwozhre.com wird auf ein Beispiel hingewiesen wie man mit Definitionslisten eine Bildergallerie erstellen kann. Das wäre (laut dem Autor) semantsch gesehen nur richtig, die Bilder…

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.