Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/figures.html
Aktuelle - übersetzte - Version: http://www.ich-lerne-css.de/Style/Examples/007/figures.html
Übersetzer: A.Friedrich
Bookmark: AddThis Social Bookmark Button

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: Forum. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

Bild mit Text

Ein Bild in der Grösse verändern

Am oberen Bildschirmrand ausrichten

XHTML

Bild mit Text

Eiffel tower

Ein verkleinertes Modell des Eiffel Turms in Parc Mini-Frankreich.

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>

St. Tropez

Saint Tropez in der Abendsonne

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

Cap Ferrat

Am Mittelmeer in der Nähe von Cap Ferrat

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>

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM