Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Solution: Eine Bildbeschriftung über dem Bild platzieren

Solution: Eine Bildbeschriftung über dem Bild platzieren

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Solution: Eine Bildbeschriftung über dem Bild platzieren

“

(Upbeat-Musik) Sie sehen die Datei beschriftung.html hier aus dem Ordner zur Solution. Zunächst einmal wird die figcaption, die Beschriftung, hier absolut positioniert und mit left, right und bottom jeweils auf 0 positioniert. Dazu gleich noch ein bisschen mehr. Damit das überhaupt funktioniert, wird figure, das umgebenden figure-Element, relativ positioniert. Das ist der Trick mit der absoluten und relativen Positionierung kombiniert. Falls ich das auskommentiere hier oben, so, dann sieht man, das ficaption saust ganz nach unten, denn es wird jetzt am Stammelement ausgerichtet. Das ist so weit verständlich. "bottom: 0;" bewirkt, es wird unten im figure-Element ausgerichtet, aber warum jetzt left und right? Ich kommentiere das right einmal aus. Und dann sieht man, ein positioniertes, ein absolut positioniertes Element wird nur so breit wie sein Inhalt. Es wäre nun nicht besonders elegant, das mit Leerstellen aufzufüllen, bis es rechts einigermaßen passt, von daher ist es besser, dem…

Inhalt