Sprachen

Dies ist eine Übersetzung. Es ist möglich, daß sie Fehler enthält oder veraltet ist im Vergleich zur englischen Version. Übersetzer: Axel Friedrich (Fancy Factory)

Web Style Sheets CSS Tips & Tricks

Siehe auch die Übersicht aller Tips.

Auf dieser Seite:

Figure Elemente & Überschriften

Eiffel tower

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:

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

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;
}

St. Tropez

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>

Und das ist der Stylesheet:

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

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

Cap Ferrat

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:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

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:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Figures & Überschriften in HTML4

Eiffel tower

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:

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

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;
}

St. Tropez

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>

Und hier der Style Sheet:

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

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

Cap Ferrat

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:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, Style Activity Leiter
Copyright © 1994–2017 W3C®

Erstellt am 17. Januar 2001;
Zuletzt geupdatet Do 09 Nov 2017 04:41:00 UTC

Sprachen

Über die Übersetzungen