Beispielseiten

• mit Header

Wenn Ihr Layout einen Kopfbereich über alle Spalten haben soll, ist es schwierig, den oberen Anfangspunkt (top) für den oder die absolut positionierten Bereiche festzulegen.

• Eine Lösung bestünde darin, für den Kopfbereich eine feste Höhe wie z. B. height: 80px anzugeben und für absolut positionierte Bereiche als Anfangspunkt oben top: 81px zu definieren.
• Eine andere Möglichkeit wäre, die drei Bereiche unterhalb des Kopfbereichs mit einem zusätzlichen Bereich zu umgeben und diesen dann relativ zu positionieren, damit er zum Bezugspunkt für die absolute Positionierung wird.

Den Trick mit der Kombination von relativer und absoluter Positionierung kennen Sie bereits (im Buch von Seite 244). Der Vorteil dieser Lösung ist, dass die vertikale Flexibilität des Kopfbereichs erhalten bleibt.

Wenn Sie diesen zusätzlichen Bereich #wrapper nennen, sieht die HTML-Struktur der Seite etwa so aus:

<div id="kopfbereich"> ... </div>
<div id="wrapper">
<div id="navibereich"> ... </div>
<div id="sidebar"> ... </div>
<div id="textbereich"> ... </div>
</div> <!-- Ende wrapper -->

Im CSS wird der Wrapper relativ positioniert:

#wrapper { position: relative; }

Im Browser sieht dieses Layout wie folgt aus, wobei der unsichtbare #wrapper durch eine gestrichelte weiße Linie markiert ist:

Abbildung 15.4: Dreispaltig, absolut positioniert mit flexiblem Kopfbereich