Verkleinertes Modell des Eiffel Turms im Park
Mini-France
HTML5 führte ein neues Element mit eigenen Überschriften ein
(Figure). (Für eine Konvention das Ganze in HTML4 umzusetzen siehe unten.)
<figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Eiffel tower">
<figcaption>Verkleinertes Modell
des Eiffel Turms im Park
Mini-France</figcaption></figure>
Um zum Beispiel das Figure Element rechtsbündig den umgebenden
Absatz umfließen zu lassen, limiert auf 30% der maximalen
Elementbreite, können diese Regeln verwendet werden:
Nur die ersten zwei Deklarationen (float und width) sind
wichtig, der Rest dient nur der Dekoration.
Ein Bild in der Größe anpassen
Das Problem hier ist dass das Bild zu breit sein könnte. Ist das
der Fall wird die Breite immer auf 136 px beschränkt sowie das
Figure Element auf 30% des umgebenden Textes. Das bedeutet, dass
wenn Sie das Fenster kleiner ziehen, das Bild das Figure Element
überdecken wird. Probieren Sie es aus!
Wenn Sie die Breite aller Bilder der Seite kennen können Sie
eine Minimum Breite zum Figure Element hinzufügen, so wie hier:
figure {
min-width: 150px;
}
Saint Tropez und das Fort in der Abendsonne
Ein anderer Weg ist es das Bild selbst zu skalieren. Das haben
wir mit dem Bild zur Rechten getan. Wie Sie vielleicht bemerken
skalieren JPEG Bilder nicht sonderlich gut. Aber wenn das Bild ein
Diagramm oder Graph im SVG Format
ist, klappt die Skalierung bestens. Das ist das Mark-Up welches
verwendet wurde:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<figcaption>Saint Tropez und das
Fort in der Abendsonne</figcaption>
</figure>
Der einzige Zusatz ist die letzte Regel: er beschränkt die
Breite des Bildes auf den Innenbereich des Figure Elements (der
Bereich innerhalb der Begrenzung und des Padding).
Überschrift immer ganz oben
Die mediterrane See nahe Kap Ferrat
HTML erlaubt es das figcaption Element entweder an erster oder
letzter Stelle innerhalb eines Figure Elements, und das ganz ohne
CSS. Das führt dazu dass die Überschrift entweder ganz oben oder
ganz unten erscheint.
Aber unabhängig vom Mark-Up, auch mit CSS kann dafür gesorgt
werden dass die Überschrift oberhalb oder unterhalb des Bildes
erscheint, Das wird erreicht indem dem Browser gesagt wird dass das
Figure Element als Tabelle formatiert werden soll, mit dem Bild als
der Tabelle einziger Zelle und der Tabelles Überschrift. Nutzen Sie
dafür einfach diesen Stylesheet aus den vorherigen Abschnitten:
Der hier verwendete Style beinhaltet eine graue Umrandung um das
Figure Element. Leider müssen wir die Umrandung etwas anders
definieren wenn wir das Tabellenlayout mit der Überschrift
verwenden, weil die Überschrift außerhalb der Tabelle platziert
wird. Wie umgehen dies indem wir einen Teil der Umrandung auf die
Überschrift selbst anwenden:
Verkleinertes Modell des Eiffel Turms im Park Mini-France
HTML4 bietet, anderes als HTML5, kein Element wie das Figure
Element mit Überschrift. Es war zwar geplant (siehe HTML3), hatte es aber
nicht mehr in HTML4 geschafft. Hier ist ein Weg um ein Figure
Element zu simulieren:
<div class=figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Eiffel tower">
<p>Verkleinertes Modell
des Eiffel Turms im
Park Mini-France
</div>
Dann, im Stylesheet, verwenden wir die Klasse "figure" zur
Formatierung. Um zum Beispiel den Bereich rechtsbündig zu
platzieren, limitiert auf 30% der Breite des umgebenden Elements,
können wir dies tun:
Wie schon zuvor spielen nur die ersten zwei Deklarationen (float
und width) eine Rolle. Der Rest dient der Dekoration.
Das Bild in HTML4 skalieren
Um zu verhindern das breite Bilder den Figure Bereich
überlappen, können wir, wenn wir die Breite aller Bilder der Seite
kennen, eine Minimum-Breite zum DIV hinzufügen. So wie hier:
div.figure {
min-width: 150px;
}
Saint Tropez und sein Fort in der Abendsonne
Um das Bild hingegen bis zur Breite des Figure Bereichs zu
skalieren (wie rechts zu sehen), können Sie ein CLASS Attribut und
eine CSS Regel hinzufügen, ganz ähnlich dem HTML5 Beispiel weiter
oben. Hier das Mark-Up das wir verwendet haben:
<div class=figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<p>Saint Tropez und sein
Fort in der Abendsonne
</div>
Der einzige Zusatz ist die letzte Regel: es skaliert das Bild
auf die Innenbreite des DIV (der Innenbereich und sein Padding).
Die Überschrift ganz oben platzieren mit HTML4
Die mediterrane See nahe Kap Ferrat
Um die Überschriften oben zu platzieren verwenden wir diese
Regeln für den Stylesheet aus den vorherigen Abschnitten:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
Das '+' bewirkt dass das P einem anderen P folgt. Das bedeutet
in diesem Fall, dass das zweite P dem Figure Bereich entspricht,
und zwar dem mit der Überschrift.
(Diese Technik kann einige Fehler provozieren in Browsern vor
2003, speziell in Kombination mit skalierten Bildern so wie wir es
hier getan haben.)
Wie zuvor wir die verwendete graue Umrandung um den Figure
Bereich mit dieser Technik nur das Bild selbst umranden. Um diese
um das Bild und die Überschrift zu platzieren kann diese
Regel verwendet werden:
