HTML-Struktur ( 5 / 6 )
Ansicht wechseln zwischen Minimal-Variante und Maximal-Variante
Bitte schalten Sie Java-Script ein. Für das einwandfreie Funktionieren dieser WebApp ist Java-Script erforderlich.
Die wichtigsten Sections und DIVs innerhalb des <body>
| Parent | Children | Grandchildren | GrandGrandchildren | ... |
|---|---|---|---|---|
| #bgHeader | absolut positioniert. Enthält die Header-Farbe | |||
| #bgUserStatusBar | #userStatusBar | #appName #user #logout |
absolut positioniert, schwarzer Hintergrund. Enthält alle Elemente der Statusbar | |
| #wrapper | #header | #headerLogo |
#logo #headLineBig #metaNavi |
#logo enthält #logoWeb und #logoPrint |
| #mainNavi (optional) |
Mit Haupt- und Subnavigation (CSS-gesteuertes DropDown-Menu) | |||
| #content | #flowNavi | absolut postioniert | ||
| #contentContainer | #contentTop #contentMain #contentMain -> .inside |
#contentTop enhält das H1-Heading. #contentMain enthält als erstes die Klasse ".inside", welches als Abstandhalter fungiert. Weitere darin enhaltene DIV-Klassen: .intro, .error, .note, .formButtons |
||
| #contentContainerSide (optional) | .inside .inside -> .box |
|||
| #contentContainerNext (optional) |
Kann abgrenzend und nachfolgend zum #contentContainer benutzt werden. Kann auch ein 2-spaltiges Layout mit .left und .right enthalten. Kann alle DIV-Klassen aus #contentContainer benutzen. | |||
| #contantContainerEnd | Cleart Floats der vorangegangenen contentContainer. Abstandhalter zu Fixed Footer | |||
| #footer | #footerLinks #copyright |
Enthält die Footer-Farbe. Der Footer wird als sog. Fixed Footer eingesetzt. |
Status bar
Diese wird nur nach dem Login angezeigt. Diese benötigt a) Markup und b) die Klasse "withStatusBar" im Body.
Main navigation
In den seltesten Fällen wird eine Navigation benötigt. Der Standard nach dem Login ist das Dashboard: Startseite, Übersicht und Einstieg in diverse Prozesse. Diese benötigt a) Markup und b) die Klasse "withMainNavi" im Body.
Equal Column Heights
Es gibt verschiede Ansätze, um mit diesem bekannten Problem umzugehen. Wir setzen ein jQuery Plugin ein.