Page-layout-example
Die Quellen können Sie auch als ZIP-Datei herunterladen, um eigene Experimente zu machen.
Grundstruktur
Das Webseiten-Layout soll eine typische 3-Spalten-Webseite realisieren, die von oben nach unten aus folgenden Teilen besteht:
#page_header
| ||
|---|---|---|
#page_top
| ||
#page_left
| #content
| #page_right
|
#page_bottom
| ||
- Eine Titelzeile (
#page_header) - Eine obere, horizontale Menüleiste (
#page_top) - Einen mittleren Bereich mit 3 Spalten:
- Eine linke Menüleiste (
#page_left) - Ein Inhaltsbereich mit dem eigentlichen Seiteninhalt (
#content) - Eine rechte Leiste mit Zusatzunformationen (
#page_right)
- Eine linke Menüleiste (
- Eine Fußleiste mit Impressum, etc. (
#page_bottom)
Alles diese div-Elemente haben die Klasse .page
und liegen als Geschwister in einem Eltern-div #page.
Wir benutzen als Basis folgende div-Struktur, die meist ausschließlich anhand der CSS-Styles modifiziert werden. Lediglich die Table-Lösung erfordert wesentliche Änderungen. Für die Absolutpositionierungs-Lösung wird später ein zusätzliches Zwischen-div eingefügt.
- Basis-HTML-Struktur (unpositioniert)
Wir benutzen zur einheitlichen Darstellung zwei gemeinsame externe css-Dateien, die in allen Lösungen unverändert genutzt werden:
- CSS für alle Seiten (Grund-Optik, Menüausrichtung, etc.)
- zusätzlich CSS nur für Seiten mit fester Breite (außer bei den Flexbox-/Grid-Lösungen)
/* debug support */".)
Mit der ersten CSS-Datei ergibt sich schon in der noch unpositionierten Darstellung eine deutlich verbesserte Optik:
- Basis-HTML-Struktur mit Optik-CSS (unpositioniert)
Realisierung als Tabelle
Hier wird eine Tabelle mit 4 Zeilen und 3 Spalten große Tabelle angelegt,
bei der die 3 einspaltigen Zeilen durch das Attribut colspan=3
zu einer Zelle verbunden werden.
Schauen Sie sich dazu zunächst dieses einfache Grunddesign ohne CSS-Formatierungen an und versuchen Sie die Eigenschaften nachzuvollziehen:
Aufbauend auf dieser Idee wird nun das Design nachgebildet:
Realisierung als floating DIVs
Hier werden die horizontal durchgehenden Zeilen und der Inhalt als div relisiert, wordurch die vertikale Anordnung automatisch entsteht. Die beiden seitlichen Leisten werden durch die CSS-Eigenschaften float: left und float: right angeordnet.
Beachten Sie, dass die Variante mit variabler Größe empfindlich auf lange Inhalte im Inhaltsbereich reagiert. (Fügen Sie in ihrer lokalen Kopie oder mit Firebug im Browser einmal eine Menge Text ein.)
Realisierung als absolut positionierte Elemente
Man kann die Elemente auch absolut positionieren
(CSS-Eigenschaften "position: absolute" oder "position: relative"
zusammen mit den Positionsangaben "top", "left",
etc. fest positionieren.
(Siehe auch
Selfhtml
dazu.)
Diese Lösung enthält einige auf Basis der Breite der Menüleisten berechnete Abstände. Dies macht die Lösung sehr unflexibel, sobald man diese Breiten oder variieren will.
Realisierung Flexbox
Flexbox ist ein neues Konzept in CSS-3, deshalb ist die Browser-Unterstützung noch nicht perfekt. Die u.a. Beispiele sollten auf allen aktuellen Browsern funktionsfähig sein.
In Flexbox kann man sehr dynamische Layouts erzeugen.
(Siehe auch
Selfhtml und
A Guide to Flexbox.)
Schauen Sie sich dazu zunächst dieses einfache Grunddesign an und versuchen Sie die Eigenschaften nachzuvollziehen:
Aufbauend auf dieser Idee wird nun das gewohnte Design nachgebildet:
- Seite mit variabler Größe
- Seite mit fester Größe
- Seite mit beschränkter Größe (kann schrumpfen aber nicht beliebig wachsen)
Testen Sie, wie die Seiten auf verschieden breite Browser-Fenster und lange Inhalte im Inhaltsbereich reagieren.
Responsive Designs: Media-Switch (Flexbox)
Man kann die Dynamik der Anpassung an die Größe des Ausgaberäts noch weiter steigern, indem man CSS-Eigenschaften angibt, die z.B. von der Breite des Viewports abhängen. Dadurch lassen sich völlig unterschiedliche Designs erstellen. (Siehe CSS/Media Queries)
Hier wird die Flexbox-Seite (mit fester Größe) bei schmalem Fenster (unter 950px) völlig umstrukturiert:
- Das linke Menü wird jetzt oben horizontal und mit anderer Optik dargestellt
- Die rechte Leiste wird nach unten verlegt und kleiner dargestellt
- Der Titel wird erweitert
- ...
Diese Technik hängt nicht von Flexbox ab, sondern kann mit allen hier gezeigten Techniken geeignet kombiniert werden.
Realisierung Grid
Grid ist auch ein neues Konzept in CSS-3, deshalb ist auch hier die Browser-Unterstützung noch nicht perfekt. Die u.a. Beispiele sollten auf allen aktuellen Browsern funktionsfähig sein.
Mit Grid kann man komplexe 2D-Layouts entlang eines Rasters erzeugen.
(Siehe auch
Selfhtml und
A Guide to Grid.)
Schauen Sie sich dazu zunächst dieses einfache Grunddesign an und versuchen Sie die Eigenschaften nachzuvollziehen:
Aufbauend auf dieser Idee wird nun das gewohnte Design nachgebildet:
Übung: Die Begrenzung der Breite im letzten Beispiel wurde mit Flexbox realisiert.
Könnten Sie das auch mit Grid lösen? (Tipp: Beginnen Sie mit einer festen Breite (zentriert).)
Responsive Designs: Media-Switch (Grid)
Auch zusammen mit Grid kann man über Media-Switches ein Responsive Design realisieren:
- Seite mit Media-Switch (und begrenzte Größe)
Testen Sie, wie die Seiten auf verschieden breite Browser-Fenster und lange Inhalte im Inhaltsbereich reagieren.
Bei Grids gibt es noch andere Methoden Fluide Designs zu realisieren (siehe Vorlesungsfolien, Stichwort "auto-fill").
Ausblick: Dropdown-Menüs
Zuletzt noch eine Demonstration, wie man mit Absolut-Positionierung und :hover / :active
mit einfachen Mitteln ein Dropdown-Menü erzeugen kann.
Im folgenden Beispiel haben die Menüs "drei", "vier" und "drei-b" jeweils Dropdown-Menüs:
Versuchen Sie nachzuvollziehen, wie die Menüs positioniert und angezeigt werden.