Layout
Als Layout bezeichnet man das sichtbar machen eines gedanklichen Bildes.
In CSS gibt es gleich mehrere Techniken, um Layouts umzusetzen, die zum Teil miteinander kombinierbar sind. Darunter fallen das klassische "2-Spalten"- oder "3-Spalten"-Layout sowie die etwas moderneren Techniken: "Flexbox" und "Grid-Layout" bis hin zum modernen "Responsive Webdesign".
Ab hier können wir auf die bisher geschriebenen Daten in der HTML-Datei (<body>) und der CSS-Datei verzichten und mit leeren Vorlagen die Layouts kennenlernen.
2-Spalten Layout
Mit den Eigenschaften "float" und "margin" können wir schnell und einfach ein "2-Spalten-Layout" erstellen.
Hierfür erstellen wir einfach 2 <div>-Elemente in der HTML-Datei und vergeben als Attribute jeweils eine Klasse für links und eine Klasse für rechts.
<div>-Elemente für Mehrspaltenlayout
<body>
...
<div class="links">Linke Seite</div>
<div class="rechts">Rechte Seite</div>
</body>
Dazu wird ein bestimmter Teil der Webseite auf eine feste Breite gesetzt und mit der Eigenschaft "float" aus dem Elementfluss gerissen.
Die Elemente, die noch im Elementfluss sitzen, rutschen dadurch nach oben.
Mit einen Abstand vom linken Browserfensterrand, der etwas größer ist als der linke Bereich mit seiner festen Breite, erschaffen wir ein einfaches "2-Spalten-Layout".
.links {
width: 150px;
background-color: coral;
text-align: center;
float: left;
}
.rechts {
margin-left: 160px;
background-color: orange;
text-align: center;
}
Der linke Bereich bleibt "150px" breit, während sich der rechte Bereich von "160px" bis zum Browserfensterrand auf der rechten Seite ausstreckt.
3-Spalten Layout
Für ein "3-Spalten-Layout" erstellen wir eine linke Seite und ein Hauptbereich.
Der Hauptbereich wird in Mitte und rechte Seite unterteilt.
<div>-Elemente für Mehrspaltenlayout
<body>
...
<div class="links">Linke Seite</div>
<main>
<div class="mitte">Mitte</div>
<div class="rechts">Rechte Seite</div>
</main>
</body>
Der linke Bereich wird wieder mit "float" aus dem Elementfluss gerissen und bekommt eine feste Breite.
.links {
width: 100px;
background-color: coral;
text-align: center;
float: left;
}
Der Hauptbereich rutscht dadurch nach oben. Zusätzlich bekommt er einen Abstand zum linken Rand, damit sich die Elemente nicht überschneiden.
main {
margin-left: 110px;
}
Der rechte Bereich wird auch mit "float" aus dem Elementfluss gerissen, bekommt eine flexible Größe und wird an der rechten Seite ausgerichtet.
.rechts {
width: 29%;
background-color: orange;
text-align: center;
float: right;
}
Der Bereich mitte nimmt die restliche flexible Größe vom Hauptteil mit einem kleinen Abstand ein und wird nach links ausgerichtet.
.mitte {
width: 70%;
background-color: tomato;
text-align: center;
float: left;
}
Der linke Bereich behält seine feste Breite, während der mittlere und der rechte Bereich mit der Größe des Browserfensters mitwachsen.
Feste Breiten mit zentrierter Webseite
Es ist durchaus sinnvoll, seiner Webseite eine maximale Breite zu geben.
Damit können wir sicherstellen, dass unsere Webseite nicht durch ständig wachsenden "Viewport" irgendwann so gezerrt wird, dass es in den Augen wehtut.
Die Umsetzung ist ein Kinderspiel.
Wir packen unsere Webseite in einem Container, der bekanntlich auch als "wrapper" bezeichnet wird (wrapper = Verpackung).
Der "wrapper" dient als Schutz für unsere Seite, daher positionieren wir ihn als äußerstes Element um alle anderen Elemente aber innerhalb des <body>-Elements von HTML.
<body>
<div class="wrapper">
...
</div>
</body>
In CSS geben wir der Klasse "wrapper" nun noch eine maximale Breite.
.wrapper {
max-width: 1200px;
}
Die Seite wird nun nicht größer als der angegebene Wert. Bei "Viewports", die Größer als der angegebene Wert sind, bleibt die Webseite am linken Rand stehen und rechts neben der Seite öffnet sich ein großer leerer Bereich. Um die Webseite mittig auszurichten, geben wir der Klasse "wrapper" einen automatischen Abstand zur Seite.
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
Weiter mit Flexbox