<div>-Bereiche sind alles.

Vorbemerkung: Diese Seiten sind zunächst für ein Browserfenster von 800x600 entworfen. Bestimmte Effekte treten nur bei diesem Fenster so wie beschrieben auf. Andererseits wird es oft sinnvoll sein, die Größe des Browserfensters zu variieren. Ich empfehle daher Download und Benutzung des Browsersizers.

Das Layout dieser ersten Seite ist sehr simpel: Die Formatierung des Seitenhintergrundes erfolgt durch eine Stylezuweisung "background: url(back.gif)" für das Element <body>; vor diesem Hintergrund "schwebt" ein mit <div> bestimmter Bereich, dem im Style genau zwei Atribute zugewiesen sind: eine Hintergrundfarbe (weiß), und eine relative Breite (80 %). Von alleine positioniert sich dieser Bereich so, daß die linke obere Ecke am "Nullpunkt" der Seite zu liegen kommt: Auf diesen Punkt beziehen sich alle später erfolgenden "absoluten" Positionierungen von Elementen.

Wer findet, daß dieser Nullpunkt ruhig etwas näher bei Null liegen könnte, findet Näheres dazu hier.

Man könnte dem Bereich auch eine Höhe zuweisen, aber schon gäbe es Ärger mit der Browserkompatibilität: MSIE dehnt den weißen Hintergrund über die angegebene Höhe hinaus aus, wenn der Text zu lang wird, NN 6 zeigt zwar auch überschüssigen Text an - der weiße Hintergrund bleibt aber auf der voreingestellten Größe. Viel interessanter ist jedenfalls die Möglichkeit, die Breite (die Höhe wenn' sein muß auch) mit % relativ zur Breite des Browserfensters anzugeben - damit stellt sich der auch beim Tabellenlayout beliebte Effekt ein, daß die Länge der Textzeilen sich dem Browserfenster anpasst. Weitere Feinheiten sind auf der folgenden Seite zu besichtigen.

weiter

Es gibt für das Tutorial auch ein Inhaltsverzeichnis. Ich empfehle aber sehr, sich die einzelnen Seiten - es sind gerade einmal 15 - der Reihe nach anzusehen.