suit: Liste mit Jahreszahlen

Beitrag lesen

Ungeachtet des bereits vorhandenen Vorschlag hätte ich noch einen:

<ul class="chronik">  
  <li>  
   <h2>2001</h2>  
   <p>Text 1</p>  
   <p>text 2</p>  
  </li>  
  <li />  
  <li />  
</ul>

Die li-Elemente erhalten einen entsprechenden Aussenabstand auf der linken Seite (oder das ul-Element einen Innenabstand).

Das h2-Element wird rauspositioniert.

Alternativ kann das h2-Element gegen eine andere Überschriftenebene ersetzt werden.

Vorteil dieser Lösung: imho einfacher per CSS gestaltbar als eine pure Defintionsliste (siehe auch Malcolms Einwand) und produziert auch weniger Markup.

Haken: wenn der Abschnitt eines Jahres mehrere Absätze hat, versagt die Lösung - dann ist wieder eine Liste als Kind von Vorteil.

Rein Semantisch gesehen ist eine pure Definitionsliste wie sie Gunnar vorschlägt aber die bessere Wahl - und schwierig zu formatieren ist sie (mit gezieltem Einsatz von float: left; und float: right;) eigentlich auch nicht.