TIP: Spalten mit Listen

Immer wieder werden im Inhaltsbereich 2 Spaltige Darstellungen für Biografien, Jahrestafeln usw. gewünscht. Listenelemente sind für solche Anwendungen eine gute Alternative, die wesentlich schneller aufgebaut und übersichtlicher ist, als Tabellen oder viele verschachtelte DIV Tag's.

Beispiel: 2 Spaltige Text Darstellungen mit Listen

Firefox, Mozilla und Netscape
Firefox The better way to surf the net!
Css-Intensivstation
Die CSS-INTENSIVSTATION gibt Einblicke, Hilfen, Tipps und Templates für den Umgang mit CSS2 und tableless Design.
XHTML und CSS
Valider Xhtml und CSS Code ist die Voraussetzung für gut funktionierendes Webdesigns.

Beispiel: Bild / Text Darstellungen mit Listen

Die CSS-INTENSIVSTATION gibt Einblicke, Hilfen, Tipps und Templates für den Umgang mit CSS2 und tableless Design.
Valides Xhtml ist die Voraussetzung für ein Browserübergreifendes funktionieren von CSS.
Dowload 2 Spalten Inhalts-Template

HTML Code für Listen

<ul>
   <li class="innen">Css-Intensivstation</li>
   <li class="aussen">CSS2 Templates</li>
   <li class="clr"><br class="clr" /></li>
</ul>

CSS Code für 2 spaltige Listen-Darstellungen

Diese Angaben gelten für alle Browser.

ul.colums-two {
   list-style-type: none;
   padding: 0;
   margin: 0; }

li.innen {
   float: left;
   width: 150px;
   font-weight: bold;
   margin: 0 20px 10px 0; }
      
li.aussen {
   float: left;
   width: 300px; 
   padding: 0;
   margin: 0 0 10px 0;}

Der Browser-Unterschied besteht im clearing.

Für Firefox, Opera und alle Mac Browser kann man die clearing-Klasse "clr" direkt dem <li> mitgeben und ihn wie ein "empty Element" behandeln. <li class="clr" />
Leider kann der IE damit nichts anfangen, er verdoppelt den Abstand zwischen den List-Elementen.

li.clr {
   clear: left;
   width: 1px;
   height: 1px; 
   margin: 0;}

Der IE braucht eine Spezialbehandlung.

Diese Cross-Browser Version funktioniert auf allen Browsern, ist absolut dynamisch und kann in jedes Layout inplementiert werden.
<li class="clr"><br class="clr" /></li>
Der <li> mit der Klasse "clr" wurde auf display:inline gesetzt, damit auch der IE die Abstände richtig macht. Der clear wird dem <br /> mitgegeben.

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
   width: 1px;
 }

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
 }