Layout mit CSS gestalten
Layout mit CSS gestalten
Embedded Files
Wir haben die unterschiedlichen HTML-Elemente für Layouts bereits auf der Seite "Layout von Webseiten" kennengelernt.
Beim Gestalten von Layouts geht es nun darum, diese Blöcke zu einem Layout anzuordnen.
Dazu verwenden wir:
CSS-Grid, um ein zwei-dimensionales Layout mit Spalten und Zeilen zu definieren
Flexboxen, um Elemente innerhalb der Layoutblöcke horizontal oder vertikal anzuordnen
margin um die Abstände zwischen den Blöcken zu definieren
padding um den Innenabstand zu definieren
border um den Blöcken einen Rahmen zu geben
Ziele:
Ziele:
G7: Ich kann erläutern, wie mit HTML und CSS ein Layout gebaut wird.
F7: Ich kann mit HTML und CSS ein einfaches Layout gestalten.
E7: Ich kann das Layout meiner Webseite einheitlich und responsive umsetzen.
HTML-Grundlagen:
HTML-Grundlagen:
Kopf, Navigation, Text, (Randspalte) und Fusszeile
Fast alle Webseiten haben einen Kopfbereich mit einem Logo, einen Bereich für die Navigationselemente, einen Bereich für den Inhalt, (eine rechte Randspalte) und eine Fusszeile. Die folgende Minimalausstattung entspricht dem und hat sich als Grundlage für einfache Layouts bewährt:
Kopfbereich (Header) mit Logo und Slogan
Navigationsbereich mit Navigationselementen
Inhaltsbereich mit Text und Grafiken
Randspalte (Sidebar) mit Zusatzinformationen wie weiterführende Links zum Thema
Fusszeile (Footer) mit Platz für Adresse, Copyright, Impressum usw.
Für jeden der oben genannten Bereich stellt HTML5 ein eigenes Tag zur Verfügung, welches technisch gesehen ein Duplikat des <div>-tags ist. Mit eigenem Tag-Namen können diese Bereiche aber einfacher mit CSS adressiert werden:
<body>
<!-- Kopfzeile -->
<header>Header</header>
<!-- Navigation -->
<nav>Navigation</nav>
<!-- Inhalt -->
<main>Hauptinhalt</main>
<!-- Randspalte -->
<aside>Randspalte</aside>
<!-- Fusszeile -->
<footer>Footer</footer>
</body>
Zentrieren der Webseite auf grossen Bildschirmen:
Zentrieren der Webseite auf grossen Bildschirmen:
Damit sich die Webseite bei grossen Bildschirmen nicht über die gesamte Breite ausdehnt, können wir der Seite eine maximale Breite geben und den die Seite im Fenster zentrieren.
body {
max-width: 1200px; //maximale Breite
margin: 0 auto; //zentrieren
}
Möchte man eine Hintergrundfarbe für die komplette Seite definieren, kann man das im Element <html> machen.
html {
background-color: black;
}
CSS-Grid:
CSS-Grid:
CSS Grid ist für zwei-dimensionale Layouts gedacht, bei denen Sie sowohl Spalten als auch Zeilen definieren und anordnen möchten.
Dabei wird ein Raster festgelegt, in welches später die einzelnen Inhaltsbereiche <header>, <nav>, <main>, <aside> und <footer> abgelegt werden.
In unserem Beispiel brauchen wir ein Raster, welches 3x3 Felder gross ist.
Jeder Spalte geben wir eine Breite, jeder Zeile geben wir eine Höhe.
Zudem vergeben wir jeder Zelle einen Alias, welchen wir später einem unserer HTML-Elemente zuweisen können.
body {
display: grid;
/* Breite der drei Spalten */
grid-template-columns: 20% 60% 20%;
/* Höhe der drei Zeilen*/
grid-template-rows: 100px 1fr 100px;
/* Alias für die Zellen */
grid-template-areas:
"header header header"
"navigation content sidebar"
"footer footer footer";
}
Zuweisen der HTML-Elemente an die Grid-Aliase:
Zuweisen der HTML-Elemente an die Grid-Aliase:
Nun können wir die HTML-Elemente diesen grid-template-areas zuweisen:
/* header: Breite 100%, Höhe 100px */
header {
grid-area: header;
}
/* nav: Breite 20% Höhe 1fr */
nav {
grid-area: navigation;
}
/* main: Breite 60% Höhe 1fr */
main {
grid-area: content;
}
/* aside: Breite 20% Höhe 1fr */
aside {
grid-area: sidebar;
}
/* footer: Breite 100%, Höhe 100px */
footer {
grid-area: footer;
}
Flexboxen:
Flexboxen:
Flexbox ist hervorragend für ein-dimensionales Layout geeignet, sei es horizontal oder vertikal. Es eignet sich ideal, wenn Sie Elemente entlang einer einzigen Achse (entweder Reihe oder Spalte) anordnen möchten.
Flexcontainer:
Flexcontainer:
Im Beispiel-Layout, oben auf dieser Seite ist zu sehen, dass die Navigation-Elemente horizontal angeordnet sind.
Indem wir das Element <ul> zu einem Flexcontainer machen, können wir die horizontale oder vertikale Anordnung der Flexelemente <li> sowie den Abstand der Elemente untereinander steuern.
nav ul {
display: flex; /* Flexcontainer */
flex-direction: row; /* Anordnung in Spalten */
flex-wrap: nowrap; /* kein Umbruch der Flex-Elemente erlauben */
justify-content: space-between; /* Leerraum zwischen den Flex-Elementen verteilen */
}
flex-direction:
flex-direction:
Bestimmt die Reihenfolge der Flexelemente sowie wie die Anordnung in Spalten oder Zeilen
row | column | row-reverse | column-reverse
flex-wrap:
flex-wrap:
Bestimmt, ob die Flexelemente bei Platzmangel auf einer neuen Zeile angezeigt werden
nowrap | wrap
justify-content
justify-content
Bestimmt, wie der übrigbleibende Platz innerhalb der des Flexcontainers aufgeteilt wird:
flex-start: Elemente gruppieren sich am Anfang
flex-end: Elemente grupieren sich am Ende
center: Elemente gruppieren sich in der Mitte
space-between: Leerraum wird gleichmässig zwischen den Elementen aufgeteilt
space-around: Leerraum Links und rechts der Elemente gleich, doppelter Leerraum bleibt bestehen
space-evenly: Leerraum Links und rechts der Elemente gleich, doppelter Leerraum überlappt
Videos:
Videos:
Page updated
Report abuse