Layout mit CSS
Achtung
Für HTML und CSS werden neue Sprachversionen veröffentlicht. Hier kommen neue Funktionen dazu und neue verbindliche Sprachelemente werden definiert (Ein klein wenig wie ein neuer Duden oder die neue deutsche Rechtschreibung).
Webbrowser unterstützen in verschiedenen Versionen verschiedene Sprachversionen und manchmal leider auch eigene Dialekte.
Die hier vorgestellte Lösung wird u.a. von Firefox ab Version 52, Chrome ab Version 57, Edge ab Version 16 und Safari ab Version 10.1 (alle im Frühjahr bis Sommer 2017 erscheinen) unterstützt. Ältere Browser oder etwa der Internet Explorer sprechen eigene Dialekte oder kennen die Funktion nicht.
Das unsichtbare Netz
Flexbox
Sehr viele Browser können mit Flexbox oder etwa mit Frameworks wie Bootstrap (welches ab Version 4 auf Flexbox aufbaut) unterstützt werden.
Grid
Grid (zu deutsch Gitter) wird über die gesamte Webseite oder einen Teil davon gelegt. Anschließend können daran Elemente ausgerichtet werden.
Einfaches Beispiel mit zwei Spalten
Im Folgenden soll anhand obiger Darstellung gezeigt werden, wie dies in HTML und CSS umgesetzt werden kann:
<body>
<div class="nav">
<a href="#">Link 1</a>
<br>
<a href="#">Link 2</a>
</div>
<div class="content">
Weit hinten, hinter den Wortbergen, ...
</div>
</body>
Zuerst erklären wir, dass wir mithilfe des Gitters arbeiten möchten:
body {
display: grid;
}
Alles innerhalb des body
wird nun am Gitter ausgerichtet.
Nun beschreiben wir unser Gitter:
body {
display: grid;
grid-template-columns: 20% 80%;
}
Die erste Spalte (column
) soll 20%
und die zweite Spalte soll 80%
der verfügbaren Breite einnehmen.
Absolute Breiten gehen natürlich auch, da Bildschirme sehr verschiedene Auflösungen und Pixeldichten haben, musst du hier genau nachdenken. Absolute Größen sind etwa sinnvoll, wenn du eine Navigationsliste erstellst und diese unabhängig von den anderen Elemente eine feste Höhe haben soll.
In dem erstellten Gitter beschreiben wir nun, wo unsere Navigation (nav
) sein soll:
.nav {
grid-column-start: 1;
}
Die Navigation ist in der 1. Spalte (es wird nicht von 0 sondern von 1 losgezählt).
Den eigentlichen Inhalt deiner Seite (content
) deiner Webseite positionierst du direkt daneben in der zweiten Spalte mit
.content {
grid-column-start: 2;
}
Aufgabe
Übernimm die CSS-Befehle in den Editor.
komplexes Beispiel einer Webseite
Im Folgenden soll anhand obiger Darstellung gezeigt werden, wie dies in HTML und CSS umgesetzt werden kann:
<body>
<header>Überschrift</header>
<nav>Navigation</nav>
<main> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...</main>
</body>
Zuerst erklären wir wieder, dass wir mithilfe des Gitters arbeiten möchten:
body {
display: grid;
}
Alles innerhalb des body
wird nun am Gitter ausgerichtet.
Nun beschreiben wir unser Gitter:
body {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
Hier wurden 7 Zeilen (rows
) und 7 Spalten (colums
) angelegt. Alle Zellen sollen gleich groß sein. Daher sind diese alle 1fr
groß. fr
ist eine neue Einheit. Sie errechnet sich automatisch aus der Anzahl der Spalten bzw. Zeilen. Hier gilt 1fr
= 100%/7 = 14,28%
.
grid-template-rows: 1fr 2fr 1fr;
Hier ist die mittlere Spalte doppelt so breit wie die anderen beiden. Du hättest auch 25% 50% 25%
schreiben können.
In dem erstellten Gitter beschreiben wir nun, wo unsere Überschrift sein soll:
header {
grid-row: 1;
grid-column-start: 3;
grid-column-end: 6;
}
Die Überschrift ist in der 1. Zeile (es wird nicht von 0 sondern von 1 losgezählt). Sie beginnt in der 3. Spalte und endet genau vor der 6. Spalte. Folglich geht die Überschrift von der 3. bis zur 5. Spalte.
Den Text positionierst du mit
main {
grid-row-start: 3;
grid-row-end: 8;
grid-column-start: 2;
grid-column-end: 7;
}
An den beiden obigen Beispielen siehst du gut eine Kurzschreibweise: Erstreckt sich ein Element nur innerhalb einer Spalte oder Zeile, so reicht grid-row
bzw. grid-column
. Soll es mehrere umfassen, wird mit –start
und –end
gearbeitet. Es gibt noch weitere Schreibweisen, die im Endeffekt zum gleichen Ergebnis führen.
Aufgabe
Übernimm die CSS-Befehle in den Editor
Aufgabe
Schreibe selbst das CSS für nav
Aufgabe
Übe deine Fähigkeiten, indem du im Grid Garden die Pflanzen bis Level 6 wässerst.
Expertenaufgabe
Schaffe möglichst viele Level!
Weiterführende Artikel:
Glückwunsch! 🥳 Du hast nun erweiterte Fähigkeiten in CSS erworben!
Aufgabe
Wende all dein Wissen und Geschick aus den vorangegangenen Kapiteln auf das Erweitern deiner Filmwebseite ab Aufgabe 3 an.