figcapction-Text ins Bild verschieben

[MrMurphy]

Hallo,

ich habe in ein figure-Element eine Grafik und ein figcaption-Element mit einem Text eingefügt.

Das figure-Element hat eine Breite von 64% und passt sich mitsamt seines Inhalts der Fenstergröße bzw. -breite an. Das funktioniert wie von mir gewünscht.

Der Text des figcaption-Elements steht dabei unterhalb der Grafik.

Ist es möglich nur mittels css das figcaption-Element so zu verschieben, das es sich unten in der Grafik befindet und auch bei Veränderung der Fensterbreite seine Position dort behält? Der untere Rand des figcaption-Elements soll dabei mit dem unteren Rand der Grafik übereinstimmen.

Alles CSS-Angaben befinden sich direkt in der HTML-Datei mit dem aktuellen Stand der Dinge:

http://foreninfo.bplaced.net/seiten_probleme/2014_04_01_figcaption_verschieben_01.html

Gruss

MrMurphy

 

[Gilles]

Gib der figcaption mal ein margin-top von -1.2em;
Ansonsten halt mal mit anderen Minus Werten rumprobieren bei margin-top :)

 

[MrMurphy]

Hallo,

danke, das funktioniert.

Gruss

MrMurphy

 

[Banana_Jones]

Hallo,

danke, das funktioniert.

Gruss

MrMurphy

Aber nur solange, wie der Text einzeilig bleibt.

Das ist eigentlich einer der Fälle, bei dem eine absolute Positionierung der <figcaption> Sinn macht... (natürlich bei gleichzeitiger relativer Pos. des <figure>)

 

[MrMurphy]

Hallo,

vielen Dank für dein Interesse. Mit dem Zeilenumbruch habe ich kein Problem. Bevor es dazu kommt lasse ich den Inhalt rechts vom Bild per Responsive Design unter das Bild rutschen, das dann entsprechend wieder mehr Breite zur Verfügung hat. Das habe ich in die Testdatei nicht eingebaut, weil es mit meinem Problem nichts zu tun hat.

Bevor es dann bei noch schmalerem Bildschirm erneut zum Umbruch kommt mache ich Schrift kleiner oder benutze eine "schmalere Schrift" oder verschiebe das figcaption-Element entsprechend weiter nach oben oder ersetze den langen Text durch einen kürzeren oder blende das figcaption-Element komplett aus oder ich lasse den Text unter das Bild rutschen, so das der Zeilenumbruch optisch nicht mehr stört oder ...

Das kommt dann auf den konreten Inhalt an, bei dem Beispiel handelt es sich ja nur um eine Testdatei.

Zur absoluten Positionierung greife ich nur im absoluten Notfall, wenn gar nichts anderes mehr geht. Damit tue ich der absoluten Positionierung zwar wahrscheinlich ähnlich Unrecht wie diejenigen, die alles absolut positionieren, halt nur auf der anderen Seite, aber das ist meine persönliche Vorgehensweise. Ich versuche beim HTML / CSS halt alles so flexibel wie möglich zu gestalten.

Edith:

Ich habe mal ein Beispiel mit einigen der Möglichkeiten erstellt. Das sind ja nur ein paar zusätzliche Zeilen CSS.

Bei schmalerem Bildschirm nimmt das Bild zunächst die volle Bildschirmbreite ein, dann wird die Schrift kleiner und zum Schluss wird der Text komplett ausgeblendet. Ein Vorteil dieser Vorgehensweise ist zudem, das auch bei einer Änderung des Zoomfaktors das Layout nicht zerschossen wird.

http://foreninfo.bplaced.net/seiten_probleme/2014_04_01_figcaption_verschieben_02.html

Gruss

MrMurphy