CSS Website-Layout
Display und Position zeigten, wie Boxen sitzen und sich stapeln. Ein Website-Layout stellt die größere Frage: Wie teilen sich Seitenregionen — Header, Navigation, Hauptinhalt, Sidebar, Footer — einen Bildschirm ruhig? Skizziere zuerst die Hülle; Flexbox und Grid vertiefen die Spaltenarbeit bald.
Ein Werkzeugkasten für Layout-Regionen
📊 Seitenregionen auf einen Blick
| Region | Alltagsaufgabe |
|---|---|
| Header | Site-Identität, Hauptaktionen, manchmal Suche |
| Navigation | Links zu wichtigen Abschnitten (oft im oder unter dem Header) |
| Main | Primärer Inhalt, um den die Seite geht |
| Aside / sidebar | Verwandte Links, Tipps, Nebenkarten |
| Footer | Rechtliches, sekundäre Nav, Kontaktspuren |
| Container | Max-width-Hülle, die lesbaren Inhalt zentriert |
Gutes Layout beginnt bei HTML-Landmarks, dann CSS-Abstände und Spalten. Jede Box mit position: absolute zu bemalen skaliert selten gut.
Semantische Seitenhülle
Benenne Regionen mit echten Elementen. Klassen verfeinern das Aussehen, aber Landmarks halten die Struktur für Leser und Hilfstechnik ehrlich.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Zentrierter max-width-Container
Lange Zeilen ermüden die Augen. Wickle die lesbare Spalte in einen Container mit max-width und horizontalem margin: auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Header-Leiste Grundlagen
Ein Header spannt oft den Container oder die volle Breite. Halte Abstände konsistent und lass tiefes Nav-Styling für die nächste Lektion.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
Eine einfache Zwei-Spalten-Skizze
Bis zu den Flexbox/Grid-Lektionen kann eine ruhige Float-Skizze main + aside zeigen. Lerne als Nächstes Flex/Grid für echte Seitenspalten — das ist eine Brücke, kein Dauerplan.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Footer unter der Geschichte
Nach Float-Spalten den Footer clearen, damit er unter beide Spalten fällt. Spätere Flex/Grid-Layouts halten Spalten ohne Float-Clearfix-Gewohnheiten.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
Eine ruhige Layout-Gewohnheit
Zuerst Landmarks, dann Container, dann Abstand. Float nur als vorübergehende Spalten-Skizze. Greife in den kommenden Modulen zu Flexbox und Grid für belastbare Seitenstruktur — nicht Absolute-Haufen oder endlose Float-Grids.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
Selbst ausprobieren
- Baue eine Landmark-Hülle: header, nav, main, aside, footer.
- Wickle Inhalt in ein
.containermit max-width und zentrierten Margins. - Style eine einfache Header-Leiste mit Padding und unterem Rand.
- Skizziere main + aside mit Float-Breiten, dann clear den Footer.
- Schreibe einen Satz: Warum ersetzt Flex/Grid diese Float-Skizze später?
Häufige Fehler
- Absolute-Positionierung jeder Spalte der Seite
- Text über die volle Viewport-Breite ohne max-width
- Semantische Landmarks zugunsten anonymer Div-Haufen überspringen
- Diese Lektion wie object-fit behandeln (Medienrahmen, nicht Seitenregionen)
- Für immer Float-Seitengrids ausliefern statt als Nächstes Flex/Grid zu lernen
Zusammenfassung
- Website-Layout heißt: Seitenregionen teilen sich einen Bildschirm
- Nutze semantische Landmarks plus zentrierten max-width-Container
- Eine Float-Main/Aside-Skizze kann Spalten kurz illustrieren
- Footer unter Floats clearen; bald Flex/Grid für Struktur bevorzugen
- Layout ≠ object-fit — Regionen vs. Medienpassung in einer Box
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt