dl dt dd in verschiedenen Brwosern

[Yael]

Guten Abend,

ich helfe meiner  Freundin eine kleine Seite umzusetzten. Dort gibt es ein Profil mit diversen Angaben wie z.B.:

Alter
Haarfarbe
Figur
Größe

Sie wollte dafür eine Tabelle bzw. divs nehmen, ich meinte, das könnte man auch mit einer dl Liste Lösen, dieses habe ich so (als Basis habe ich dieses genommen http://forum.de.selfhtml.org/?t=217714&m=1496302) umgesetzt:

  
      <dl class="spalten_xxx">  
  
         <dt>Alter:</dt>  
         <dd>24</dd>  
         <dt>Haarfarbe:</dt>  
         <dd>blond</dd>  
         <dt>Figur:</dt>  
         <dd>36/38 </dd>  
  
         <dt>Sex:</dt>  
         <dd>heterosexuell</dd>  
         <dt>Herkunft:</dt>  
         <dd>Deutschland </dd>  
         <dt>Augenfarbe:</dt>  
         <dd>braun </dd>  
  
      </dl>  

Mein CSS sieht so aus

  
.spalten_xxx {  
    -moz-column-count: 2;  
    -moz-column-gap: 30px;  
    padding:5px;  
}  
  
.spalten_xxx dt {  
    float: left;  
    margin: 0;  
    padding: 0 0 8px;  
    width: 44%;  
}  
  
.spalten_xxx dd {  
    float: left;  
    margin: 0;  
    padding: 0 0 8px;  
    width: 56%;  
}  

Im Firefox und auch Chrome funktioniert es ohne Probleme, wie sieht es denn mit den anderen Browsern aus und sollte ich dieses wirklich so umsetzten, oder hat sie recht mit Tabellen bzw. divs.

Hab diese Diskussion noch im Kopf: http://forum.de.selfhtml.org/?t=217714&m=1496256

[Jörg Reinholz]

Hab diese Diskussion noch im Kopf: http://forum.de.selfhtml.org/?t=217714&m=1496256

Hätte die Freundin grüne Augen hätte ich nach der Adresse gefragt. So ist sie mir zu jung. :)

Im Ernst. Der Sachverhalt könnte die Tabelle ebenso wie die Definitionsliste rechtfertigen.

Genau genommen geht es auch mit:

<div class="row">  
   <span class="key">Alter:</span><span class="value">24</span>  
</div>

oder etwas wie::

<style type="text/css>  
.daten   { display:table; }  
.zeile   { display:table-row; }  
.daten .zeile div { table-cell; }  
</style>  
  
  
<div class="daten">  
   <div class="zeile">  
       <div>Alter:</div><div>24</div>  
   </div>  
</div>

Beides wäre beim Erstellen erkennbar übersichtlicher.

Jörg Reinholz

[molily]

Hallo!

ihr könnt hier dl verwenden, klar, aber eine Tabelle wäre genauso passend für die Inhalte. Wenn ihr sowieso eine Spaltendarstellung wollt, dann ist eine Tabelle doch am einfachsten. Kein Grund mit floats und Multi-Column-Layout etwas zu basteln, was denselben Effekt haben soll und nur halb so robust ist.

Grüße
Mathias