dt - dd Liste Probleme || Vielleicht auch eine Frage an @MrMurph

[Martin_Online]

So langsam habe ich das Gefühl, dass ich mit meinen dt – dd Listen auf einem falschen Weg bin. Mein Code sieht derzeit wie folgt aus:

  
      <dl class="multicolumn">  
  
         <dt>Link 1:</dt>  
         <dd><?php echo $l1;?></dd>  
  
         <dt>Link 2:</dt>  
         <dd><?php echo $l2;?></dd>  
  
         <dt>Link 3:</dt>  
         <dd><?php echo $l3;?> </dd>  
  
         <dt>Link 4:</dt>  
         <dd><?php echo $l4;?> </dd>  
  
         <dt>Link 5:</dt>  
         <dd><?php echo $l5;?></dd>  
  
         <dt>Link 6:</dt>  
         <dd><?php echo $l6;?></dd>  
  
         <dt>Link 7:</dt>  
         <dd><?php echo $l7;?></dd>  
  
         <dt>Link 8:</dt>  
         <dd><?php echo $l8;?> </dd>  
  
         <dt>Link 9:</dt>  
         <dd><?php echo $l9;?> </dd>  
  
         <dt>Link 10:</dt>  
         <dd><?php echo $l10;?></dd>  
  
      </dl>  

Mit einem if prüfe ich, ob mein User etwas ausgefüllt hat

  
		<?php if (strlen($l10) > 0): ?>  
         <dt>Link 10:</dt>  
         <dd><?php echo $l10;?></dd>  
		<?php endif;?>  

Funktioniert alles ohne Problem, auch wird alles schön angezeigt. Sobald aber ein Feld _nicht_ ausgefüllt ist, werden alle Eintrage untereinander dargestellt, sonst sind immer zwei Einträge in einer Reihe. Ich hatte erwartet, dass der Platz einfach durch den darauf folgenden Eintrag genommen wird.

Mein CSS Code sieht so aus

  
   dt {  
      width: 40%;  
      float: left;  
      padding: 0 0 8px 0;  
      margin: 0;  
   }  
   dd {  
      width: 60%;  
      float: left;  
      padding: 0 0 8px 0;  
      margin: 0;  
  
   /* Multicolumn */  
   .multicolumn {  
      -moz-column-count: 2;  
      -moz-column-gap: 30px;  
      -webkit-column-count: 2;  
      -webkit-column-gap: 30px;  
      column-count: 2;  
      column-gap: 30px;  
   }  
   .multicolumn h1 {  
      padding: 0;  
      margin: 0 0 1rem 0;  
      border-bottom: 2px solid black;  
   }  
   .multicolumn h2 {  
      padding: 0;  
      margin: 0 0 1rem 0;  
      break-inside: avoid;  
   }  
   .multicolumn p {  
      padding: 0;  
      margin: 0 0 1rem 0;  
      text-align: justify;  
      break-inside: avoid;  
   }  
   .ueberallespalten {  
      -webkit-column-span: all;  
      column-span: all;  
   }  

Dieser Code habe ich auf dieser Seite gefunden http://foreninfo.bplaced.net/seiten_fremdprobleme/. Daher vielleicht auch eine Frage an MrMurphy da von ihm der Code kommt.

[MrMurphy]

Hallo,

ich kann das Problem nachvollziehen. Eine Lösung habe ich aber noch nicht gefunden.

Um das Problem einzugrenzen habe ich die beiden Spalten mit in einem div liegenden p-Elementen erstellt. Das Problem scheint somit das float innerhalb von Multicolumn zu sein.

Wenn die beiden Spalten gleich viele Einträge enthalten, zeigt Multicolumn sie wie gewünscht an:

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

Sobald die Anzahl ungrade ist verweigert Multicolumn den Dienst:

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

Die Anzeige bei schmalen Fenster ist hingegen korrekt.

Für die Anzeige bei breitem Fenster / Bildschirm bleibt zur Zeit wohl nur die jeweils zusammengehörgen Einträge ohne float nebeneinander zustellen. Vielleicht mit "display: table;".

Ich habe heute aber keine Zeit mehr das zu testen.

Gruss

MrMurphy

[Martin_Online]

Hallo,

Um das Problem einzugrenzen habe ich die beiden Spalten mit in einem div liegenden p-Elementen
Für die Anzeige bei breitem Fenster / Bildschirm bleibt zur Zeit wohl nur die jeweils zusammengehörgen Einträge ohne float nebeneinander zustellen. Vielleicht mit "display: table;".

Danke für deine schnelle Antwort. Ich bin am überlegen ob ich einfach auf das Multicolumn  verzichten soll und jeweils mit DIVs arbeiten. Merke immer mehr, dass die neuen HTML5 Elemente bzw. CSS3 Eigenschaften diverse Probleme machen.