Box-Modell und Layout

IT 11.7 – Webdesign · Einheit 5 · Café-Projekt Schritt 5

Lernziele

Du kannst das Box-Modell mit Inhalt, Innenabstand, Rahmen und Außenabstand beschreiben und die Breite einer Box berechnen.
Du kannst Abstände und Rahmen mit padding, border und margin gestalten und einen Bereich zentrieren.
Du kannst Elemente mit Flexbox nebeneinander anordnen und verteilen.
Du kannst ein einfaches Seitenlayout entwerfen und begründen.

Rückblick

1. Wie schreibt man im CSS einen Selektor für alle Elemente mit class=“karte”?

.karte – mit Punkt.

2. Für einen Absatz gelten p { color: gray; } und .hinweis { color: blue; }. Welche Farbe hat er, wenn er die Klasse hinweis hat?

Blau. Die Klasse ist genauer als das Element.

3. Wo bindet man eine CSS-Datei ein?

Im head jeder Seite mit <link rel="stylesheet" href="style.css">.

Alles klebt aneinander

Die Café-Seite hat jetzt Farben. Aber alles klebt am Rand des Browserfensters, die Navigation steht als Liste untereinander, und auf einem großen Bildschirm sind die Zeilen so lang, dass man beim Lesen die Zeile verliert.

Die Schülervertretung wünscht sich: Navigation nebeneinander, Inhalt mittig mit Abstand zum Rand und das Angebot als drei Kärtchen nebeneinander. Wie bekommt man Abstände, Rahmen und eine Anordnung nebeneinander?

Erkunden: Abstände und Anordnung

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Eine Box untersuchen mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Stelle nacheinander padding: 20px;, dann border: 4px solid #874026;, dann margin: 20px; ein. Beschreibe jeweils, wo der neue Abstand entsteht: innerhalb oder außerhalb der Farbe, innerhalb oder außerhalb des Rahmens?

b) Miss mit den Entwicklerwerkzeugen (F12, Element anklicken) oder schätze: Ist eine Box jetzt noch 200 Pixel breit? Stelle eine Vermutung auf, wie sich die sichtbare Breite zusammensetzt.

c) Füge die Zeile box-sizing: border-box; hinzu. Beschreibe, was sich an der Breite ändert.

Lösung

Erkundung 2: Nebeneinander mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Füge bei .menue die Zeile display: flex; hinzu. Beschreibe, was passiert.

b) Probiere nacheinander gap: 20px;, justify-content: center; und justify-content: space-between;. Beschreibe die Wirkung.

c) Entferne die Aufzählungspunkte und den Einzug der Liste. Probiere list-style: none; und margin: 0; aus.

Lösung

Das Box-Modell

Vergleicht eure Beobachtungen. Für den Browser ist jedes Element eine rechteckige Box:

Das Box-Modell: Um den Inhalt liegen Innenabstand, Rahmen und Außenabstand.

Teil	Eigenschaft	Beispiel
Inhalt	`width`, `height`	`width: 200px;`
Innenabstand	`padding`	`padding: 20px;`
Rahmen	`border`	`border: 4px solid #874026;` (Breite, Art, Farbe)
Außenabstand	`margin`	`margin: 20px;`

Werte für einzelne Seiten: padding: 10px 20px; heißt oben und unten 10, links und rechts 20. Mit vier Werten geht es im Uhrzeigersinn: oben, rechts, unten, links. Einzeln geht auch: margin-top, padding-left usw.

Abgerundete Ecken: border-radius: 8px;. Rahmen um Tabellenzellen: border an th, td, dazu border-collapse: collapse; an table, damit keine doppelten Linien entstehen.

Breite begrenzen und zentrieren

Lange Zeilen sind schwer zu lesen. Mit max-width darf ein Bereich höchstens so breit werden, auf kleinen Bildschirmen aber schmaler:

main {
  max-width: 60rem;
  margin: 0 auto;
}

margin: 0 auto; heißt: oben und unten 0, links und rechts automatisch gleich viel. Dadurch steht der Bereich in der Mitte.

Flexbox: Elemente anordnen

Mit Flexbox ordnet man Elemente in einer Reihe (oder Spalte) an. Die Regel kommt an den Behälter, wirkt aber auf seine direkten Kinder:

.angebote {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.karte {
  flex: 1;
  min-width: 12rem;
}

Eigenschaft	am	bewirkt
`display: flex`	Behälter	Kinder nebeneinander
`gap`	Behälter	Abstand zwischen den Kindern
`justify-content`	Behälter	Verteilung entlang der Reihe: `flex-start`, `center`, `space-between`, `space-around`
`align-items`	Behälter	Ausrichtung quer dazu: `stretch` (gleich hoch), `center`, `flex-start`
`flex-wrap: wrap`	Behälter	zu viele Kinder brechen in die nächste Zeile um
`flex-direction: column`	Behälter	Kinder untereinander
`flex: 1`	Kind	Kinder teilen sich den freien Platz gleichmäßig

Für Raster mit Zeilen und Spalten gibt es außerdem CSS Grid (Zusatzaufgabe).

Café-Projekt: Schritt 5

Café-Projekt, Schritt 5: Das Layout mittel

Ergänze style.css. Ändere im HTML nur, was für das Angebot nötig ist.

Ganz oben: * { box-sizing: border-box; }. Gib body den Außenabstand 0.
Kopfbereich: header mit Hintergrund Braun #874026, darin die h1 in Creme; Innenabstand 1rem.
Navigation: Die Liste in nav ohne Punkte, nebeneinander mit Abstand 1.5rem, Hintergrund #e8d3b9, Innenabstand 0.5rem 1rem.
Inhalt: main höchstens 60rem breit, zentriert, Innenabstand 1rem.
Angebot: Ersetze im Abschnitt „Unser Angebot“ den Text durch drei Kärtchen (div class="karte" in einem div class="angebote"): Getränke, Brötchen, Gebäck, jeweils mit h3 und einem Satz. Die Kärtchen stehen nebeneinander, haben einen Rahmen in #c9b29a, abgerundete Ecken, weißen Hintergrund und Innenabstand. Auf schmalen Bildschirmen brechen sie um.
Speisekarte: Rahmenlinien um alle Zellen, ohne doppelte Linien; Innenabstand in den Zellen.
Formular: Jedes label steht über seinem Feld (Tipp: display: block).

Tipp 1

Zu 3.: Die Flexbox-Regel gehört an nav ul, nicht an nav a. Denn die li sollen nebeneinander stehen.

Tipp 2

Zu 5.: flex-wrap: wrap am Behälter und flex: 1 mit einer min-width an der Karte lassen die Kärtchen umbrechen.

Stand nach Schritt 5

Aufgaben

Aufgabe 1: Wie breit ist die Box? leicht

.info {
  width: 300px;
  padding: 15px 25px;
  border: 3px solid black;
  margin: 10px;
}

a) Berechne die sichtbare Breite und Höhe der Box, wenn der Inhalt 80 Pixel hoch ist.

b) Berechne, wie viel Platz die Box in der Breite insgesamt einnimmt, einschließlich Außenabstand.

c) Gib an, wie breit die sichtbare Box mit box-sizing: border-box; wäre.

Lösung

Aufgabe 2: Drei Kärtchen mittel

Gestalte die drei Kärtchen mit CSS so, dass alle Prüfungen bestehen. Das HTML bleibt unverändert.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 3: Code lesen mittel

<div class="kopf">
  <div class="logo">Logo</div>
  <div class="suche">Suche</div>
  <div class="konto">Konto</div>
</div>

.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid gray;
}

.logo {
  height: 60px;
}

Skizziere die Anordnung der drei Elemente und beschreibe sie in eigenen Worten. Begründe, wie die Höhe von „Suche“ und „Konto“ zustande kommt.

Tipp 1

space-between verteilt die Elemente, align-items richtet sie quer dazu aus.

Lösung

Aufgabe 4: Warum klappt es nicht? mittel

Ein Mitschüler möchte seine Navigation nebeneinander und zentriert haben. Er schreibt:

<nav>
  <ul>
    <li><a href="index.html">Start</a></li>
    <li><a href="team.html">Team</a></li>
  </ul>
</nav>

nav a {
  display: flex;
  text-align: center;
}

nav {
  width: 40rem;
  text-align: center;
}

Die Einträge stehen weiter untereinander, und der Bereich nav ist nicht in der Mitte. Erläutere beide Fehler und gib eine Verbesserung an.

Tipp 1

An welchem Element muss display: flex stehen, damit die li nebeneinander kommen? Und was zentriert eine Box?

Lösung

Aufgabe 5: Ein Seitenlayout entwerfen schwer

Ein kleines Kino möchte eine Programmseite: oben ein Kopfbereich mit Name und Navigation nebeneinander, darunter zwei Spalten: links breit das Programm der Woche, rechts schmal eine Spalte mit Preisen und Öffnungszeiten, ganz unten ein Fußbereich.

a) Skizziere das Layout und gib an, welche HTML-Elemente du für die Bereiche verwendest.

b) Entwirf das CSS für die Anordnung mit Flexbox. Das Programm soll doppelt so breit sein wie die rechte Spalte.

c) Beurteile, was dein Layout auf einem Handy macht, und gib eine Idee an, wie man es dort verbessern könnte.

Tipp 1

Zu b): Programm und Seitenspalte stecken in einem gemeinsamen Behälter mit display: flex. Mit flex: 2 und flex: 1 bekommen sie den Platz im Verhältnis 2 : 1.

Tipp 2

Zu c): Was passiert mit zwei Spalten auf einem 390 Pixel breiten Bildschirm? Denk an flex-wrap oder an Einheit 7.

Lösung (Beispiel)

Zusatzaufgabe: CSS Grid schwer Zusatz

Recherchiere CSS Grid. Ordne damit sechs Kacheln in einem Raster aus drei Spalten und zwei Zeilen an. Vergleiche: Wann würdest du Flexbox nehmen, wann Grid?

Lösung (Beispiel)

Zusammenfassung

Jedes Element ist eine Box: Inhalt (width, height), Innenabstand (padding), Rahmen (border), Außenabstand (margin).
Sichtbare Breite = width + linker und rechter Innenabstand + linker und rechter Rahmen. Mit box-sizing: border-box gilt width für die ganze sichtbare Box.
Breite begrenzen mit max-width, Box zentrieren mit margin: 0 auto.
Flexbox: display: flex am Behälter ordnet die direkten Kinder nebeneinander; gap, justify-content, align-items, flex-wrap; flex: 1 an den Kindern verteilt den Platz.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du das Box-Modell beschreiben und die Breite berechnen? → Erkundung 1, Das Box-Modell, Aufgabe 1
Kannst du Abstände und Rahmen gestalten und zentrieren? → Breite begrenzen und zentrieren, Café-Projekt, Aufgabe 4
Kannst du Elemente mit Flexbox anordnen? → Erkundung 2, Flexbox, Aufgabe 2, Aufgabe 3
Kannst du ein Seitenlayout entwerfen? → Aufgabe 5

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Box-Modell	jedes Element ist ein Rechteck aus Inhalt, Innenabstand, Rahmen und Außenabstand
padding	Innenabstand zwischen Inhalt und Rahmen
border	Rahmen einer Box
margin	Außenabstand zu anderen Elementen
box-sizing: border-box	`width` gilt bis einschließlich Rahmen
max-width	größte erlaubte Breite
margin: 0 auto	zentriert eine Box mit begrenzter Breite
Flexbox	Verfahren, um Elemente in einer Reihe anzuordnen und zu verteilen
Behälter / Kind	Element mit `display: flex` / seine direkt enthaltenen Elemente
gap	Abstand zwischen den Kindern
justify-content, align-items	Verteilung entlang der Reihe / Ausrichtung quer dazu

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign (Stand November 2022).
CSS nach den Spezifikationen des W3C (CSS Box Model, CSS Flexible Box Layout, CSS Grid Layout).
Texte, Beispiele, Aufgaben, Abbildung und Code-Beispiele sind selbst erstellt.