MINT lernen

CSS: Gestalten mit Regeln

Zwei Textaufgaben mit Hinweisen und Erwartungshorizont — eine Karte gestalten und ein Layout, das nicht in die Spalte passt.

Dein Fortschritt:
0 / 0 Aufgaben
1

Eine Karte für den Vertretungsplan

AFB I–II

Auf der Schulseite soll jeder Vertretungseintrag als Karte erscheinen:

<div class="karte">
  <h2>7b – Mathe</h2>
  <p class="raum">Raum 204</p>
</div>
.karte {
  width: 260px;
  padding: 16px;
  border: 2px solid #2c5fb5;
  margin: 12px;
  background: #eef3fb;
}
.raum { font-weight: bold; }
  1. Nenne die Selektoren im Stylesheet und gib jeweils an, welche Elemente sie treffen.
  2. Berechne die sichtbare Breite einer Karte und den Platz, den sie in der Zeile einnimmt.
  3. Begründe, warum für die Karten eine Klasse und keine ID verwendet wird.

Hinweise

Hinweis zu Aufgabe a)
Punkt = Klasse.
Hinweis zu Aufgabe b)
Sichtbar: width + 2 · padding + 2 · border; Platz: zusätzlich 2 · margin.
Hinweis zu Aufgabe c)
Wie viele Karten gibt es auf einer Seite?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

.karte trifft das div mit class="karte"; .raum trifft den Absatz mit class="raum".

Erwartungshorizont zu Aufgabe b)

Sichtbar: 260 + 2 · 16 + 2 · 2 = 296 px. Platz: 296 + 2 · 12 = 320 px.

Erwartungshorizont zu Aufgabe c)

Es gibt viele Vertretungseinträge, die alle gleich aussehen sollen. Eine Klasse darf an beliebig vielen Elementen stehen, eine ID nur an genau einem — mit einer ID müsste man für jede Karte eine eigene Regel schreiben.

2

Drei Knöpfe in einer Reihe

AFB II–III

In einem 600 px breiten Bereich sollen drei Knöpfe nebeneinander Platz finden. Jonas schreibt:

.knopf {
  width: 200px;
  padding: 10px;
  border: 1px solid black;
  margin: 0;
}

Der dritte Knopf rutscht in die nächste Zeile.

  1. Erkläre mit einer Rechnung, warum der dritte Knopf nicht mehr in die Reihe passt.
  2. Ermittle den größten ganzzahligen Wert für width, bei dem drei Knöpfe genau hineinpassen (padding und border bleiben).
  3. Beurteile Lauras Vorschlag, statt width einfach padding: 0 zu setzen.

Hinweise

Hinweis zu Aufgabe a)
Rechne die Breite eines Knopfs mit Innenabstand und Rahmen aus.
Hinweis zu Aufgabe b)
Drei sichtbare Breiten dürfen zusammen höchstens 600 px sein.
Hinweis zu Aufgabe c)
Was bedeutet padding für das Aussehen der Knöpfe?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Ein Knopf: 200 + 2 · 10 + 2 · 1 = 222 px; drei Knöpfe: 666 px > 600 px. Der dritte passt nicht mehr daneben.

Erwartungshorizont zu Aufgabe b)

3 · (w + 22) ≤ 600 ⇒ w + 22 ≤ 200 ⇒ w ≤ 178. Also width: 178px; (3 · 200 = 600 px).

Erwartungshorizont zu Aufgabe c)

Ohne padding wäre ein Knopf 202 px breit, drei sind 606 px — passt immer noch nicht. Außerdem klebt die Beschriftung dann am Rahmen, die Knöpfe werden schlecht lesbar und schwer zu treffen. Besser: width verkleinern (178 px) und den Innenabstand behalten.