Web Style Sheets
CSS Tips & Tricks

Bild mit Text

HTML bietet keine Möglichkeit einem Bild einen Text zuzuordnen. Es war einmal geplant (siehe HTML3) dies zu realisieren, aber letztendlich fand der Vorschlag keinen Weg in HTML4. Hier nun ein Beispiel wie sich das Ganze dennoch realisieren lässst:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel Turm">
  <p>Ein verkleinertes Modell des Eiffel Turms in Parc Mini-Frankreich.
</div>

Im Style Sheet wird die Klasse "figure" verwendet um das Bild auf die gewünschte Weise zu manipulieren. Um z.B. die Bildbox rechtsbündig zu platzieren mit einer Breite des aussenliegenden Containers von 25 Prozent (ausgehend von der Gesamtbreite des aktuellen Anzeigebereiches) können wir dies hier versuchen:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Wichtig sind im Prinzip nur die ersten zwei Deklarationen (float und width). Der Rest dient nur zur Dekoration.

Das Bild in der Grösse anpassen

Das Problem hierbei ist dass das Bild innerhalb der Box zu gross ausfallen könnte. In unserem Fall besitzt das Bild eine Breite von 136 Pixel und das DIV Element beansprucht ein Viertel (25 Prozent) der verfügbaren Gesamtbreite des Text-Anzeigebereiches. Verkleinern wir nun das Browserfenster so wird irgendwann das Bild über die Umrandung des DIV Elementes hinaus gehen - probieren Sie es aus!

Wenn Sie die Breite aller Bilder Ihres Dokumentes im Vorfeld wissen - können Sie einem DIV Element eine Mindestbreite zuweisen:

DIV.figure {
  min-width: 150px;
}

Ein anderer Weg wäre das Bild selbst zu vergrössern/verkleinern. So wie im Beispiel rechts. Wie Sie sehen können (einfach den Browser in die Breite ziehen/stauchen) skalieren JPEG Bilder nicht sonderlich gut - die Qualität leidet. Anders wäre es wenn das Bild z.B. im vektorisiertem SVG Format vorliegen würde. Diese Art von Bildern lassen sich in hoher Qualität skalieren. Hier nun der entsprechende Code-Ausschnitt:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez in der Abendsonne
</div>

Und hier der Style Sheet:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Das einzig Neue hier ist die letzte Regel (width: 100%;). Sie skaliert das Bild auf die maximal verfügbare Breite des Elternelementes (DIV).

Den Text am oberen Rand ausrichten

Sie können natürlich auch den Beschreibungstext am oberen Rand des DIV Elementes platzieren. Sie müssen dem Browser dafür klar machen dass unsere Bild-Text-Kombination als Tabelle behandelt werden soll. Fügen Sie einfach die folgenden Zeilen Ihrem Style Sheet hinzu:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

Das '+' bedeutet dass diese Regel auf ein Folgeelement angewand werden soll - in diesem Fall soll sich das Ganze auf ein P nach einem P auswirken. Unser zweites P Element enthält den Text und wird nun am oberen Rand dargestellt.

(Diese Technik verursacht leider einige Probleme in älteren Browsern. Speziell in Verbindung mit Bildskalierungen wie in diesem Beispiel.)

Das Ganze in XHTML

Der aktuelle Entwurf für XHTML2 (Januar 2003) enthält ein CAPTION Element welches den hier aufgezeigten Weg überflüssig macht. Natürlich nur wenn er auch angenommen werden sollte. So sieht unser Beispiel dann in XHTML2 aus:

<object data="eiffel.jpg">
  <caption>Ein verkleinertes Modell des Eiffel Turms in Parc Mini-Frankreich.</caption>
</object>