Der beliebteste Tarif
Die meisten Leute wählen die Tagespflege, und das soll die Seite sagen. Wir haben an ihrer Karte ein Etikett ergänzt: ein span mit der Klasse etikett, dessen Aussehen schon in style.css steht. Die Karte hat außerdem eine neue Klasse, beliebt.
Das Etikett sitzt am oberen Rand der Karte, zum Teil über der Karte und zum Teil in ihr, in der rechten Hälfte der Karte. Es nimmt in der Karte keinen Platz weg, sodass die Überschrift und der übrige Inhalt dort sind, wo sie auch in den anderen Karten sind.
Die ganze Karte sitzt außerdem 8px höher als die anderen, damit sie auffällt. Die anderen Karten bewegen sich nicht.
Die fertige Seite sieht so aus (verkleinert):
Ein Tipp: In der Lektion Display und Position hast du ein Element in die Ecke eines anderen Elements gesetzt. Dieselbe Eigenschaft kann auch die Karte selbst verschieben.
Das ist das ganze Projekt. Du hast eine ganze Seite gestaltet: eine Navigationsleiste, Karten, die sich an die Breite des Bildschirms anpassen, Knöpfe, die unten ausgerichtet sind, und ein Etikett genau an der richtigen Stelle. In der nächsten Lektion, CSS Grid, lernst du, Elemente gleichzeitig in Zeilen und Spalten anzuordnen.
So schreibst du es:
Anweisungen
- 1
Das Etikett sitzt am oberen Rand der mittleren Karte, in deren rechter Hälfte, und der Inhalt der Karte ist dort, wo er auch in den anderen Karten ist.
- 2
Die mittlere Karte sitzt 8px höher als die anderen Karten, die an ihrem Platz bleiben.