Bildbeschriftung als Overlay bei gefloatetem Bild

[Trüffelkrieger]

Hallo,

ich möchte folgedes realisieren: Wenn ein Artikelbild mit Beschriftung gewählt ist, wird die Beschriftung als Overlay über dem Bild dargestellt (an der unteren Kante ausgerichtet). Das Artikelbild wird links gefloatet, der Text des Artikels fließt rechts herum. Nun ist es ja eigentlich ganz einfach, dass man den Bild-Container relativ positioniert, die Beschriftung absolut und dann ausrichtet.

Die Bilder haben aber unterschiedliche Größen. Ich kann dem Container also nicht floaten und ihm eine Breite zuweisen.

Hier mal mein Versuch: http://jsfiddle.net/8vrWJ/

Vielen Dank schonmal!

 

[Tronjer]

Verstehe ich jetzt nicht so ganz. Zum einen kannst du dem scr-Attribut des Bildes Werte für width und height zuweisen, dann passt sich der umgebende Container an, um zum anderen gibt es auch display: inline-block.

 

[Trüffelkrieger]

Sorry, dann stehe ich wohl auf dem Schlauch ... Habe das jetzt versucht mit deinen Tipps umzusetzten, weiß aber nicht genau was du meinst. Das ich dem img-Tag eine Breite + Höhe zuweisen kann, ist bekannt – aber was hilft mir das in diesem Fall? Und bei meinem Versuch mit display-block steht der Text des Artikels entweder unter dem Bild oder viel zu weit rechts neben dem Bild ...
Könntest du das an dem Beispiel vielleicht einmal machen?

 

[Tronjer]

Vielleicht verstehe ich deine Frage ja nicht richtig, aber für mich sieht das einfach aus.
http://jsfiddle.net/fAYFs/

 

[Trüffelkrieger]

Das p-Tag soll aber keine Breite haben (also keine feste). Es soll unter dem Bild dann die ganze Breite einnehmen. Und die Artikelbilder sind wie gesagt immer unterschiedlich breit, weshalb der übrige Platz rechts davon ja auch immer variiert.
Und das mit der Bildbeschriftung soll dann von der Art her so aussehen: http://clickbump.com/caption/2/

 

[Tronjer]

Das p-Tag soll aber keine Breite haben (also keine feste). Es soll unter dem Bild dann die ganze Breite einnehmen.

Ich dachte, der Text sollte rechts neben dem Bild stehen?

Aber mache es doch im Zweifelsfall mit jQuery. Wenn das Bild HTML-Attribute für width und height besitzt, lassen sich damit dynamische Styles für die umgebenden Tags basteln. Außerdem kann man figcaption dann auch per negativem margin-top an die richtige Stelle rücken und muss nicht auf position: absolute zurückgreifen.

 

[Trüffelkrieger]

Der Text des Absatzes soll das Bild umfließen, also erst rechts daneben und dann auch darunter sein.
Aber danke für deine Hilfe, dann werde ich es wohl mit jQuery machen müssen.

 

[Trüffelkrieger]

Habe eine Lösung gefunden:

<figure class="post-thumb-container">
  <img class="attachment-post-thumbnail wp-post-image" alt="Dies ist die Beschriftung des Bildes" src="http://placehold.it/350x150"/>
<figcaption>Dies ist die Beschriftung des Bildes</figcaption>
</figure>
<p>Hier ein kleiner Text. Es geht aber um die Beschriftung des Beitragsbildes.</p>

[CSS]figure.post-thumb-container{
display:block;
float:left;
margin:0;
position:relative;
max-width:40%;
margin: 0em 1.625em 0em 0;
}
figure .attachment-post-thumbnail {
display:block;
float:none;
height:auto;
margin:0;
max-width:100%;
}
.post-thumb-container figcaption{
background:rgba(0,0,0,.75);
bottom:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:#fff;
font-size:.8em;
line-height:1.4em;
left:0;
padding:.5em 1em;
position:absolute;
width:100%;
}[/CSS]