Gestaltung einer Bildbeschriftung

[Ortwin1st]

Hallo,

ich möchte in meinem HTML eine Bildbeschriftung per CSS einfügen. Das ganze dachte ich mir so:

img {
    cursor:pointer;
    cursor:hand;
    width:320px;
    height:240px;
    border:1px solid gray;
}

img + p {
    margin:0px;
    padding:1px;
    font-size:0.8em;
    font-style:italic;
    text-indent:4px;
    color:#404040;
}

Unter jedem img-Tag steht ein p-Tag, indem die Beschriftung zum Bild enthalten ist.

Geht auch alles wunderbar, außer im IE.

Wie kann man das Lösen, dass es auch auf dem IE läuft?

 

[Maik]

Hi,

da die Vorgängerversionen des IE7 den Selektor img + p für benachbarte Elemente nicht unterstützen, wirst du ihnen den Selektor für Nachfahrenelemente anbieten müssen, wie beispielsweise ein DIV, in dem alle Elemente eingebettet sind (div#box img und div#box p).

 

[Ortwin1st]

Das ist wieder mit Mehraufwand verbunden. Hätte gedacht, es gibt eine Lösung, bei der der HTML-Code so verwendet werden kann, wie er ist. Also:

<img src="">
<p>Description</p>

Eine sehr einfach Lösung, die aber wieder eine gewisse Abhängigkeit mit sich zieht, wäre dem p-Tag eine Klasse zuzuweisen, z.B.

<p class="imgDescription">

Oder man könnte ein h-Tag (z.B. h5) zweckentfremden... das wäre wohl noch die unabhängigste Lösung. Aber man müsste gucken, welche noch frei sind... wenn man schon ein halbes dutzend verwendet hat, kann das schon mal unübersichtlich werden.

Als erweiterte Aufgabenstellung wäre es noch interessant, den Text der Bildbeschreibung automatisch aus dem alt-Attribut bzw. title-Attribut des img-Tags zu verwenden oder umgekehrt. Das wird aber wohl ohne JS nicht möglich sein, vermute ich.

 

[Maik]

Wo ist denn da der Mehraufwand, wenn du die Elemente in ein DIV packst, und dieses mit einem Indifikator (ID- / Klassen-Name) auszeichnest?

In welchem übergeordneten Element sind denn die beiden Elemente derzeit überhaupt eingebunden?