buch.informatik.cc

Aussehen

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 ​

img

Im Folgenden soll anhand obiger Darstellung gezeigt werden, wie dies in HTML und CSS umgesetzt werden kann:

html
<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:

css
body {
	display: grid;
}

Alles innerhalb des body wird nun am Gitter ausgerichtet.

Nun beschreiben wir unser Gitter:

css
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:

css
.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

css
.content {
	grid-column-start: 2;
}

Aufgabe

Übernimm die CSS-Befehle in den Editor.

komplexes Beispiel einer Webseite ​

img

Im Folgenden soll anhand obiger Darstellung gezeigt werden, wie dies in HTML und CSS umgesetzt werden kann:

html
<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:

css
body {
	display: grid;
}

Alles innerhalb des body wird nun am Gitter ausgerichtet.

Nun beschreiben wir unser Gitter:

css
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%.

css
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:

css
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

css
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.