Workshop Internet-Präsenz

Seitenlayout: Navigation, Kopf, Information, Fußteil

Das zweite Beipiel realisiert ein mehrspaltiges Layout, indem die Seitenbereiche auf den Rand des zentralen Fensters gelegt werden. Der das Navigationsfenster und das Informationsfenster umschließende <div>-Bereich muss relativ positioniert werden, damit die absolute Positionierung der Seitenbereiche (Navigation) auf Null bezogen werden kann.

Aufgrund der fehlerhaften Breiten- und Höhenberechnung beim Internet Explorer sollten linke und rechte margin- und padding-Angaben auf Null gesetzt werden oder Breitenangaben vermieden werden.

Viele Browser haben Probleme bei der Höhenberechnung der absolut positionierten Randstreifen. Trotz der Angabe Höhe 100% (bezogen auf die Höhe des umschließenden <div>-Bereichs) wird häufig die wirklich benötigte Höhe eingestellt (meist kleiner oder größer als die Höhe des Informationsfensters). Es gibt kein allgemein funktionierender Workaround für alle Browser. Die Hintergrundfarbe des Navigationsfensters wird daher nicht im Navigationsbereich selbst, sondern im umschließenden <div>-Bereich eingestellt, um den Eindruck zu vermitteln, die Seitenbereiche seien genau so groß.

Ein weiteres Problem stellen die Ränder von Überschriften und Absätzen dar. Sie würden über die sie umschließenden <div>-Bereiche hinausragen, so dass zwischen dem Kopfteil, Mittelteil und Fußteil Abstände von einer Zeilenhöhe zu sehen sind.

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 4
Fußbereich