Bild mit einem transparenten Bereich auf dem Bild beschreiben

[Ganane]

Hallo Selfler!

Ich möchte vielen Bildern (mit einer festen Größe) auf meiner Website einen unteren Balken (halbtransparent über dem Bild) hinzufügen, auf dem Informationen wie z.B. die Auflösung und die Dateigröße stehen.

Ich hab mal ein Bild erstellt, was zeigt, wie das ganze nachher aussehen soll (hier ein bisschen übertrieben groß):

Momentan löse ich das, indem ich das Bild in ein <div> packe und zusätzlich ein <div>, was die Beschreibung enthält, in dieses <div> packe. Das sieht dann also so aus:

  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  

Das CSS sieht dann ungefähr so aus:

  
.container  
{  
   position: relative;  
   border: 1px solid black;  
   width: 400px;  
}  
  
.container img  
{  
   width: 400px;  
}  
  
.container .beschreibung  
{  
   position: absolute;  
   /* opacity für alle browser: 0.7 */  
   width: 400px;  
   bottom: 0px;  
}  

Allerdings wäre es imho besser (semantischer), wenn ich nur das Bild und den Beschreibungstext habe, nicht noch einen zusätzlichen Container außenrum. Bei vielen Bildern also statt

  
<!-- Bild 1 -->  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  
  
<!-- Bild 2 -->  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  
  
<!-- Bild 3 -->  
<div class="container">  
   <img src="http://www.example.org/image.jpg" alt="">  
   <div class="beschreibung">Beschreibungstext...</div>  
</div>  
  
<!-- Bild ... -->  

lieber soetwas:

  
<!-- Bild 1 -->  
<img src="http://www.example.org/image.jpg" alt="">  
<div class="beschreibung">Beschreibungstext...</div>  
  
<!-- Bild 2 -->  
<img src="http://www.example.org/image.jpg" alt="">  
<div class="beschreibung">Beschreibungstext...</div>  
  
<!-- Bild 3 -->  
<img src="http://www.example.org/image.jpg" alt="">  
<div class="beschreibung">Beschreibungstext...</div>  
  
<!-- Bild ... -->  

Wie kann ich das hinbekommen, sodass der Balken immer pixelgenau auf der Unterseite des Bildes ist (wie in den verlinkten Bild) und ich dann eine Art mehrzeile Gallerie daraus machen kann? Die Bilder haben immer eine feste Größe von 400px (oder auch weniger oder mehr, aber alle sind immer gleich groß).
Hat jemand eine Idee, wie ich da herangehen könnte oder geht das gar nicht?

Gruß,
Ganane

[suit]

Allerdings wäre es imho besser (semantischer), wenn ich nur das Bild und den Beschreibungstext habe, nicht noch einen zusätzlichen Container außenrum.

von der semantik her ist es egal ob du

  
<img src="" alt="" /><p>text</p>  

oder

  
<div>  
 <img src="" alt="" /><p>text</p>  
</div>  

oder aber

  
<div><div><div><div><div><div>  
 <img src="" alt="" /><div><p><span>text</span></p></div>  
</div></div></div></div></div></div>  

oder sonst irgendwas machst - semantisch haben div und span keine aussage ;)

[Ganane]

Allerdings wäre es imho besser (semantischer), wenn ich nur das Bild und den Beschreibungstext habe, nicht noch einen zusätzlichen Container außenrum.

von der semantik her ist es egal ob du

<img src="" alt="" /><p>text</p>

>   
> oder  
>   
>   
> ~~~html
  

> <div>  
>  <img src="" alt="" /><p>text</p>  
> </div>  
> 

oder aber

<div><div><div><div><div><div>
<img src="" alt="" /><div><p><span>text</span></p></div>
</div></div></div></div></div></div>

>   
> oder sonst irgendwas machst - semantisch haben div und span keine aussage ;)  
  
Naja, dann ist semantisch vielleicht das falsche Wort. Ich möchte den Quelltext gerne so haben, wie ich denke. Und ich denke nicht "Ah, ein Bild in einem Container, danach ein Text in einem Container" sondern "Ah, ein Bild und danach eine Beschreibung".  
Das ist klarer, einfacher und sparsamer ;)  

[Willi]

Hallo シ

Allerdings wäre es imho besser (semantischer), wenn ich nur das Bild und den Beschreibungstext habe, nicht noch einen zusätzlichen Container außenrum.
von der semantik her ist es egal ob du

<img src="" alt="" /><p>text</p>

> > oder  
> > ~~~html
  

> > <div>  
> >  <img src="" alt="" /><p>text</p>  
> > </div>  
> > 

oder aber

<div><div><div><div><div><div>
<img src="" alt="" /><div><p><span>text</span></p></div>
</div></div></div></div></div></div>

> > oder sonst irgendwas machst - semantisch haben div und span keine aussage ;)  

Trotzdem ist es nicht "egal".  

>   
> Naja, dann ist semantisch vielleicht das falsche Wort. Ich möchte den Quelltext gerne so haben, wie ich denke. Und ich denke nicht "Ah, ein Bild in einem Container, danach ein Text in einem Container" sondern "Ah, ein Bild und danach eine Beschreibung".  

Sozusagen eine Beschreibung (Definition) und ein Bild, welches eben beschrieben (definiert) werden soll.  
  
Definition und Definitionsausdruck - übersetzen wir das mal ins Englische kommt "definition" und "definition term" raus.  
Kürzen wir das mal ab: dt und d(d).  
Oha, es gibt ja auch <http://de.selfhtml.org/html/text/listen.htm#definition@title=HTML-Elemente, die so heißen> :-O  
  
\*Das\* wäre semantisch ;-)  
  

> Das ist klarer, einfacher und sparsamer ;)  

Und semantischer ;)  
  
—Gabriel[﹫](mailto:[e-mail])

-- 
[ie:{ fl:| br:> va:) ls:< fo:| rl:( n4:( ss:| de:> js:| ch:? sh:( mo:} zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%7C+br%3A%3E+va%3A%29+ls%3A%3C+fo%3A%7C+rl%3A%28+n4%3A%28+ss%3A%7C+de%3A%3E+js%3A%7C+ch%3A%3F+sh%3A%28+mo%3A%7D+zu%3A%7D)

[Steel]

Hi!

Kürzen wir das mal ab: dt und d(d).

*Das* wäre semantisch ;-)

Oh! Stimmt! Der Strohhalm an meinem Kakao hatte zuerst auch ne eigene Verpackung, bis ich ihn dann in die Verpackung meines Kakaos gesteckt habe, um ihn mit meinem Kakao zusammenzubringen... Is ja sogar noch viel komplizierter, als nen einfacher Container mit zwei Elementen! :(

[Ganane]

Definition und Definitionsausdruck - übersetzen wir das mal ins Englische kommt "definition" und "definition term" raus.
Kürzen wir das mal ab: dt und d(d).
Oha, es gibt ja auch <http://de.selfhtml.org/html/text/listen.htm#definition@title=HTML-Elemente, die so heißen> :-O

*Das* wäre semantisch ;-)

Das ist klarer, einfacher und sparsamer ;)
Und semantischer ;)

Aber da steht "Definitionslisten sind für Glossare gedacht." geschrieben. Heißt es nur, dass sie dafür gemacht wurden und man sie für alle anderen Arten (auch bei Bildern) benutzen sollte oder aber, dass es wirklich nur für Glossare ist?

Ansonsten sieht das sehr gut aus und ich werde es umsetzen. Trotzdem bleibt immernoch die Frage der Positionierung, die ändert sich ja deswegen nicht.

[ChrisB]

Hi,

Trotzdem bleibt immernoch die Frage der Positionierung, die ändert sich ja deswegen nicht.

Die wird sogar noch etwas schwieriger, weil dir ein Container fehlt, an dem du die Beschreibung absolute ausrichten kannst - wie letzte Tage schon mal jemand hier bemerkte, hat man es in HTML 4.01 leider versaeumt, in der Definitionsliste noch ein Element zu definieren oder zu erlauben, mit dem sich Definition und zugehoeriger Definitionsausdruck gruppieren lassen.

Wenn du allerdings (ziemlich) sicherstellen kannst, dass deine Beschreibung immer einzeilig bleiben wird - dann kannst du sie statt ueber Positionierung auch einfach mit einem negativen margin nach oben hieven.

MfG ChrisB

[Ganane]

Hi,

Trotzdem bleibt immernoch die Frage der Positionierung, die ändert sich ja deswegen nicht.

Die wird sogar noch etwas schwieriger, weil dir ein Container fehlt, an dem du die Beschreibung absolute ausrichten kannst - wie letzte Tage schon mal jemand hier bemerkte, hat man es in HTML 4.01 leider versaeumt, in der Definitionsliste noch ein Element zu definieren oder zu erlauben, mit dem sich Definition und zugehoeriger Definitionsausdruck gruppieren lassen.

Wenn du allerdings (ziemlich) sicherstellen kannst, dass deine Beschreibung immer einzeilig bleiben wird - dann kannst du sie statt ueber Positionierung auch einfach mit einem negativen margin nach oben hieven.

Das ist leider nicht möglich. Der Balken mit der Schrift muss vergrößerbar sein. Wenn man strg und + drückt, vergrößert sich die Schrift. Der Balken muss sich mitvergrößern. Ich muss den Balken als mit em-Werten verschieben. Dabei passiert es dann aber, dass durch Rundungsprobleme der Balken manchmal einen Pixel zu hoch oder zu tief ist.
Tja, da ist guter Rat teuer.

[ChrisB]

Hi,

Der Balken mit der Schrift muss vergrößerbar sein. Wenn man strg und + drückt, vergrößert sich die Schrift. Der Balken muss sich mitvergrößern. Ich muss den Balken als mit em-Werten verschieben. Dabei passiert es dann aber, dass durch Rundungsprobleme der Balken manchmal einen Pixel zu hoch oder zu tief ist.

Auch bei nicht-"krummen" em-Werten?

MfG ChrisB

[Ganane]

Hi,

Der Balken mit der Schrift muss vergrößerbar sein. Wenn man strg und + drückt, vergrößert sich die Schrift. Der Balken muss sich mitvergrößern. Ich muss den Balken als mit em-Werten verschieben. Dabei passiert es dann aber, dass durch Rundungsprobleme der Balken manchmal einen Pixel zu hoch oder zu tief ist.

Auch bei nicht-"krummen" em-Werten?

Leider nicht. Selbst mit "2.458em" gibt es immer wieder Fälle, bei denen es Pixelungenauigkeiten gibt. Das kann man zwar minimieren, aber nicht gänzlich auslöschen.

[Steel]

Hi!

Vielleicht denkst Du falsch? *Stirn runzel* Ich denke bei

<div>
 <img>
 <p></p>
</div>

'Oh, ein Container mit Bild und Text'. Genau das was man dann auch sieht. Fuer Dein Vorhaben ist das die Methode, die ich (wie wohl die meisten) dir empfehlen wuerde. Imho siehst Du ein Problem wo keines ist.

Ich hab hier grad nen Kakao. Da denke ich auch nicht 'Oh! Ein Kakao in einer Verpackung und ein Strohhalm, der in einer Kakaoverpackung steckt!' Das ganze ist fuer mich einfach nur ein Kakao. - Ich weiss, es ist unglaublich! Aber so bin ich. ;)

Damit das mit dem Kakao und dem Strohalm wie geplant funktioniert ist nen Karton drum. (Der Karton ist hier natuerlich beliebig auswechselbar mit anderen Containern, wie Glaesern, Tassen,...)

[Harlequin]

Yerf!

Hat jemand eine Idee, wie ich da herangehen könnte oder geht das gar nicht?

Ich würde ja fast sagen, dass du in deinem Beispiel ein Liste mit Bildern hast ;-)

<ul>
  <li>
    <img src="..." alt="..." />
    <p>Text</p>
  </li>
  <li>
    <img src="..." alt="..." />
    <p>Text</p>
  </li>
</ul>

Gruß,

Harlequin