Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Tabellenloses Design

Die CSS Angaben:

.content1 {
float:left;
font-size:10px;
line-height:22px;
padding:2%;
margin:1%;
color:#000;
background:#eee;
border:1px solid #ccc;
width:34em;
height:100%;
}

Kurze Erklärung:

Mit "float" wird erreicht, dass das nächste Element rechts {float:left} oder links {float:right} vorbeifliesst und sich an die Bildschirmgröße anpassen kann. Deshalb ist diese Angabe flexibler als eine feste Positionierung, die eben nicht für alle Auflösungen geeignet ist. Mit "padding" wird der Abstand des Textes zum Rand {border} bestimmt, mit "margin" der Abstand des div-Containers zum nächsten Element.

Browserprobleme:

Wenn zu wenig Whitespaces (Leerzeichen) in einer Zeile vorhanden sind, schreiben die Gecko-Browser (Firefox/Mozilla/Netscape die Zeilen auch über die Grenzen des definierten div-Containers hinaus. Der Internet Explorer 5.x macht einen Umbruch, um den Inhalt der definierten Breite anzupassen.

Man kann natürlich auch die Höhe eines Elements definieren {z. B. height: 500px;} und dann auch festlegen, was mit dem Text geschehen soll, der über diesen definierten Raum (height) hinausgeht. "Overflow" wie der Inhalt im Container angezeigt werden soll. Es gibt folgende Möglichkeiten:

Allerdings haben nicht alle Browser bis jetzt diese Möglichkeiten implementiert.

Die CSS Angaben:

.content2 {
float:right;
font-size:10px;
line-height:22px;
padding:5px 2% 5px 2%;
margin: 1%;
color:#000;
background:#eee;
border:1px solid #ccc;
width:34em;
height:100%;
}

Ohne Stylesheets kann man Elemente nur mit Hilfe von blinden Tabellen und "blind gifs" (Grafiken, die nicht angezeigt werden) positionieren, d.h. ihnen eine bestimmte Position innerhalb der Seite zuweisen. Der Nachteil von Tabellen ist der vergleichsweise große Quellcode, der zu Verzögerungen beim Laden der Seite führt.

Ausserdem machen Tabellen Probleme bei der Benutzung von Screenreaders und weiteren Ausgabemedien für Menschen mit Sehproblemen.

Mit CSS ist es nun möglich, Elemente punktgenau einzufügen, allerdings - wie üblich - verstehen das nur moderne Browser, d.h. der Internet Explorer ab Version 5.0, Netscape ab 6.0 (allerdings sicher erst ab 6.1) und Opera ab Version 5.0, sicher ab 6.0.

Tabellenloses Design ist das Design der Zukunft.
Weitere Möglichkeiten für zweispaltiges Layout gibt es hier

Als nächstes definieren wir mal ein dreispaltiges Layout.

CSS Praxis

zurück