Bild mit Titel und Beschreibung versehen

[Flunder]

Hallo,

ich habe folgendes Ziel: Die verwendeten Bilder mit einem Titel und einer Beschreibung zu versehen, d.h. das img-Tag soll durch einen Text davor (Titel) und danach (Beschreibung) ergänzt werden. Wie kann ich das in HTML beschreiben, daß der Titel immer mittig über dem Bild erscheint (und die Beschreibung darunter)?

Prinzipiell ist es mir ja klar, aber wie verhindere ich zum Beispiel das die Beschreibung neben das Bild gesetzt wird, wenn das Bild mit style="float: left;" gesetzt wird.

[ChrisB]

Hi,

Prinzipiell ist es mir ja klar, aber wie verhindere ich zum Beispiel das die Beschreibung neben das Bild gesetzt wird, wenn das Bild mit style="float: left;" gesetzt wird.

Wenn du nachfolgende Inhalte nicht neben dem Bild haben willst - dann floate es doch einfach nicht.

MfG ChrisB

[Flunder]

Prinzipiell ist es mir ja klar, aber wie verhindere ich zum Beispiel das die Beschreibung neben das Bild gesetzt wird, wenn das Bild mit style="float: left;" gesetzt wird.

Wenn du nachfolgende Inhalte nicht neben dem Bild haben willst - dann floate es doch einfach nicht.

Naja, der Rest soll ja schon weiterhin gefloatet werden, aber zwischenzeitlich kam ich darauf, das ich das float ja auch ins div ziehen kann, dann scheint es so zu klappen wie ich es möchte.

[Cheatah]

Hi,

ich habe folgendes Ziel: Die verwendeten Bilder mit einem Titel und einer Beschreibung zu versehen, d.h. das img-Tag soll durch einen Text davor (Titel) und danach (Beschreibung) ergänzt werden. Wie kann ich das in HTML beschreiben,

für den Titel bietet sich ein <hX>-Element an, für die Beschreibung vermutlich <p>.

daß der Titel immer mittig über dem Bild erscheint (und die Beschreibung darunter)?

Das ist Darstellung und hat folglich mit HTML nichts zu tun.

Prinzipiell ist es mir ja klar, aber wie verhindere ich zum Beispiel das die Beschreibung neben das Bild gesetzt wird, wenn das Bild mit style="float: left;" gesetzt wird.

Das zur Gruppierung zusammengehörender Elemente dienliche Element ist <div>.

Cheatah

[Flunder]

Prinzipiell ist es mir ja klar, aber wie verhindere ich zum Beispiel das die Beschreibung neben das Bild gesetzt wird, wenn das Bild mit style="float: left;" gesetzt wird.

Das zur Gruppierung zusammengehörender Elemente dienliche Element ist <div>.

Damit hatte ich es probiert, die Unterschrift wurde jedoch weiterhin daneben gesetzt. Was zu helfen scheint (hatte ich aber eben erst herausgefunden), ist das float-Attribut aus dem Image-Tag herauszuziehen und es ins Div zu setzen.

Dennoch Danke

[Flunder]

Ich habe nun folgende Lösung erarbeitet:

<div class="margins">  
  <div class="titel">Titel-Text</div>  
  <div class="titel">  
    <img width="300" height="225" src="image.jpg" title="Titel-Text" class="rahmen"/>  
  </div>  
</div>

Die Klasse "margins" definiert einen Abstand, die Klasse "titel" zentriert, die Klasse "rahmen" zeichnet einen Rahmen ums Bild.

Auf diese Art und Weise klappt das eigentlich ganz gut, der Titel wird zentriert über das Bild geschrieben, aber die umgebende Ausrichtung (zum Beispiel standard bzw. links) wird nicht berücksichtigt. Der gesamte Block wird mittig auf der Seite oder in einer Tabelle wiedergegeben. Wie kann ich nun erreichen, daß der Block an sich links bündig oder zentriert ausgegeben wird, davon abhängig was drumherum definiert ist? Das drumherum ist mir an dieser Stelle im plugin leider nicht bekannt. Und das soll dann natürlich noch zumindest für FF3 und IE7/6 funktionieren...

Meine bisherigen Ansätze funktionieren soweit nur im IE7 (IE6 nicht getestet), aber nicht im FF3:

• Tabelle verwendet
• Breite des divs vorgegeben

BTW: Falls für das Bild ein float-Attribut definiert ist, ziehe ich das ins äußerste div und der Block verhält sich so wie das Bild vorher alleine.

Also, wie geschrieben, dies ist der Punkt an dem ich hänge:
Wie kann ich nun erreichen, daß der Block an sich links bündig oder zentriert ausgegeben wird, davon abhängig was drumherum definiert ist?