Eure Meinung zu Bildbeschriftungen

[SAM]

Guten Morgen allerseits :)

Mich interessiert Eure Meinung, wie Ihr die Art der Bildbeschriftungen handhabt?

Ausser mit Hilfe von Tabellen scheint es keine Möglichkeit zu geben, Bilder und Bildunterschrift Layouttechnisch zusammen zu halten?

Besten Dank für Euren Input.
Grüsse.
Sam

[Felix Riesterer]

Liebe(r) SAM,

Ausser mit Hilfe von Tabellen scheint es keine Möglichkeit zu geben, Bilder und Bildunterschrift Layouttechnisch zusammen zu halten?

<p class="bild-box"><img .... /><span class="bild-beschriftung">Beschriftungstext</span></p>

Und dann mit CSS eben zu einer (floatenden) Box machen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Bud]

Hi.

<p class="bild-box"><img .... /><span class="bild-beschriftung">Beschriftungstext</span></p>

Und dann mit CSS eben zu einer (floatenden) Box machen.

Es geht auch mit nur einer Klasse,trotzdem sind alle Elemente per CSS formatierbar:

<div class="bild_text"><img ... /><p>Bildunterschrift</p></div>

vg Bud

[Felix Riesterer]

Lieber Bud,

Es geht auch mit nur einer Klasse,trotzdem sind alle Elemente per CSS formatierbar:

<div class="bild_text"><img ... /><p>Bildunterschrift</p></div>

so gesehen verzichte ich auf mein span-Element vollständig und bin noch kürzer (und immer noch semantischer!) als bei Deinem Vorschlag: ;-P

<p class="bild-box"><img ... />Bildunterschrift</p>

/* CSS ungetestet! */  
p.bild-box {  
    float: left;  
    width: 100px;  
    text-align: center;  
    margin: 10px;  
    padding: 0;  
}  
p.bild-box img {  
    display: block;  
    margin: 0 auto;  
    padding: 0 0 10px 0;  
}

Das mit dem "clear" für die nachfolgenden Elemente müsste ich jetzt wieder nachlesen, denn da gab es eine geschickte Lösung ohne zusätzlichem ge-clear-tem Element... Aber vielleicht ist das hier ja völlig unerheblich, da keine weiteren Inhalte in der Bildunterschrift stehen!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Bud]

Hi Felix,

<p class="bild-box"><img ... />Bildunterschrift</p>

Auf den Gedanken wäre ich nie gekommen, ein <p> zum Platzieren eines Bildes zu verwenden, selbst wenn ein Textteil mit dabei ist. Ich habe nun deinen Vorschlag auf Herz und Nieren getestet. Erstens um dir als Lehrer einen (Denk-)Fehler nachzuweisen und Zweitens, falls es funktioniert, selbst einzusetzen, weil das Verwendenkönnen einer P-Klasse das Schreiben mit Textile doch sehr erleichtert.

Fazit: Es funktioniert einwandfrei. .oO Mist

vg Bud ;-)

[Marian]

Hallo Felix,

Das mit dem "clear" für die nachfolgenden Elemente müsste ich jetzt wieder nachlesen, denn da gab es eine geschickte Lösung ohne zusätzlichem ge-clear-tem Element... Aber vielleicht ist das hier ja völlig unerheblich, da keine weiteren Inhalte in der Bildunterschrift stehen!

Sollte mit :after gehen (ebenfalls ungetestet)

Viele Grüße aus Freiburg,
Marian