Solange Bildunterschriften nicht breiter als ein Bild sind, fällt diese Problem kaum auf. Doch sollte eine Bildunterschrift länger bzw. breiter als die zugehörige Grafik sein, kann es schnell zur fehlerhaften Darstellung des Layouts kommen.

Alt-Text

Bildunterschrift

Wird jetzt die Bildunterschrift länger, richtet sich die umschließende Div-Box an dem P-Element aus und die Box wird entsprechend breiter. Gewünscht ist allerdings, dass das Div die Grafik umschließt, die Bildunterschrift jedoch umbricht sobald sie breiter als die Grafik wird.

Untertitel ohne feste Breite

Untertitel ohne feste Breite

Das Problem lässt sich umgehen, in dem man der umschließenden Box die Breite der Grafik zuweist. Doch eine Grafik hat nicht immer die gleiche Breite.




Mit diesem kleinen JQuery-Script wird die Bildbreite ermittelt und der Div-Box per Style-Attribut zugewiesen.

Für das Einrichten der Funktion sind folgende Schritte notwendig:

1. JQuery in den -Bereich einbinden



2. Script einfügen :


Erwähnenswert ist bei dieser Variante, die Zeile 5, da dort zu der Bildbreite noch 6 Pixel addiert werden. Dies hat den Hintergrund, dass die Grafik per CSS ein Padding von 2px und eine Border von 1px hat. Also für jede Seite 3px zusätzlich, also 6px insgesamt. Dieser Wert ist natürlich dem individuellen Design anzupassen.

3. Sicherstellen, dass um die gewünschten Grafiken ein DIV mit der Klasse „grafikbox“ ist.

Untertitel mit fester Breite

Untertitel mit fester Breite

Um das Ganze einmal anhand eines Live-Beispiels zu sehen, der kann die Demo-Seite besuchen.