Beispiel

[MrMurphy]

Hallo

Ich meinte, ich hab eine Überschrift mit einer Trennlinie und darunter die Einträge.

Das ist doch kein Problem und schon lange kein Grund Tabellen zum Layouten zu mißbrauchen.

Hast du für mich ein kleines Beispiel wie ich das mit so einer Liste hinbekomme?

Gerne.

Ich habe aus deinen Angaben eine dl-Liste mit flexiblen Layout und Responsive Design erstellt.

Entsprechend werden auch alle Informationen durchgehend angezeigt, nichts ausgeblendet (warum sollen User mit schmalen Fenstern weniger Informationen bekommen?) und selbstverständlich muss auch bei schmalen Fensterbreiten nicht seitwärts gescrollt werden. Die User mit schmalen Fenstern (Smartphone und Tablet) machen inzwischen über 50% der Besucher aus - mit steigender Tendenz.

Auch eine Änderung, insbesondere eine Vergrößerung, des Zoom-Faktors führt nicht zur Zerstörung des Layouts.

Bei großen Fensterbreiten wird das Layout ähnlich wie bei dir dargestellt.

Bei mittleren Fensterbreiten werden die "Überschriften" links von den Informationen dargestellt und die einzelnen Rechnungen durch eine horizontale Linie getrennt.

Bei kleinen Fensterbreiten bleibt die Trennung der einzelnen Rechnungen durch horizontale Linien. Die "Überschrift" wird über der jeweiligen Information in Fettschrift dargestellt und zwischen den Informationen wird ein kleiner Abstand eingefügt.

Der HTML-Quellcode ist simpel und Übersichtlich:

  
      <dl class="clearfix">  
         <dt>Rechnungsnummer</dt>  
         <dd>Rechnungsdatum</dd>  
         <dd>Rechnungshöhe</dd>  
         <dd>Status</dd>  
         <dd>Bezahldatum</dd>  
         <dt>58763387</dt>  
         <dt><img src="../bilder/bilder_fremdprobleme/2014_06_14_yael_dl_liste_01.jpg" alt="Adobe Icon" /></dt>  
         <dd>11.01.2014</dd>  
         <dd>12.50</dd>  
         <dd>bezahlt</dd>  
         <dd>14.01.2014</dd>  
         <dt>58767441</dt>  
         <dt><img src="../bilder/bilder_fremdprobleme/2014_06_14_yael_dl_liste_01.jpg" alt="Adobe Icon" /></dt>  
         <dd>15.02.2014</dd>  
         <dd>12.50</dd>  
         <dd>bezahlt</dd>  
         <dd>18.02.2014</dd>  
      </dl>  

Abstände, Farben, Schriftarten, -formatierungen u.a. können natürlich noch angepasst werden.

Hier der Link zu der Beispielseite:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_06_14_yael_01_dl_liste.html

Gruss

MrMurphy