Bilder und Bildunterschriften mit figure und figcaption

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie verknüpft man Bilder mit Titel und Bildunterschriften?

30Jul2014

Bilder und Bildunterschriften in HTML5 mit figure und figcaption auszeichnen.


Einem Bild kann man auf einfache Weise einen Text zuordnen. Hierfür benötigt man nur ein paar Zeilen HTML (HyperText Markup Language) in dem das Bild und der Text in einem eigenen "div-Container" mit der Klasse ".bild" gepackt wird.
Durch die Vergabe einer Klasse wird der Container gezielt in einem CSS (Cascading Style Sheet) angesprochen.

<div class="bild">
    <p>
      <img src="bilder300/Strand_bei_Portsalon.jpg" width="300"
           height="200" alt="Menschenleerer Strand">
      Menschenleerer Strand bei Portsalon
      auf der Halbinsel Fanad in Irland
      <br>
      <span class="copy">Photo ©
        <a href="http://www.klamonfra.de/"
          title="Klamonfra - Bilder, Panoramen, Fotogalerie">
          Monika & Klaus Franz
        </a>
      </span>
    </p>
</div>

Nun folgen noch ein paar Zeilen CSS (Cascading Style Sheet) für das Design.
Mit "float:right" wird das Bild auf die rechte Seite positioniert und mit "max-width" wird die maximale Breite des Containers festgelegt. Dadurch wird der Text unter dem Bild umgebrochen und passt genau unter das Bild. Damit der Effekt besser zu sehen ist, erhält der Container noch einen schwarzen Rahmen.

Menschenleerer Strand Menschenleerer Strand bei Portsalon auf der Halbinsel Fanad in Irland
Photo © Monika & Klaus Franz

.bild {
    float: right;
    max-width: 310px;
    border: 1px solid #000;
    margin: 1em;
    padding: .5em 1.2em;
    text-align: center;
    font-size: .8em;
}





Aber mit HTML5 (HyperText Markup Language) ist es nun möglich, Bilder direkt mit einer Unterschrift auszuzeichnen. Anstelle des "div-Container" und dem "p-Element" aus dem vorherigen Beispiel, gibt es nun die beiden Elemente "figure" und "figcaption". Das "figure-Element" umschließt dabei die Inhalte und mit dem dazugehörigen "figcaption-Element" lässt sich eine Beschriftung für den Inhalt zufügen. Und mit CSS (Cascading Style Sheet) lässt sich die Darstellung sehr leicht verändern.

In HTML5 (HyperText Markup Language) sieht es nun wie folgt aus:

<figure>
    <img src="bilder300/Strand_bei_Portsalon.jpg" width="300"
         height="200" alt="Menschenleerer Strand">
    <figcaption>
      Menschenleerer Strand bei Portsalon
      auf der Halbinsel Fanad in Irland
      <br>
      <span class="copy">Photo ©
        <a href="http://www.klamonfra.de/"
          title="Klamonfra - Bilder, Panoramen, Fotogalerie">
          Monika & Klaus Franz
        </a>
      </span>
    </figcaption>
</figure>

Für das Aussehen sorgen dann wiederum ein paar Zeilen CSS (Cascading Style Sheet):

Menschenleerer Strand
Menschenleerer Strand bei Portsalon auf der Halbinsel Fanad in Irland
figure {
    float: right;
    max-width: 310px;
    border: 1px solid #000;
    margin: 1em;
    padding: 1.2em .8em .8em;
    text-align: center;
    font: .8em/1.6 Arial;
}

figcaption {
    padding: .5em;
}


Und jetzt wird es interessant, denn ich möchte drei Bilder mit unterschiedlichen Größen nebeneinander auf eine Seite platzieren, um damit in verschiedene Fotogalerien springen zu können. Dafür nehme ich drei "figure-Elemente" in denen die Bilder mit den zugehörigen Untertiteln, den "figcaption-Elementen", aufgeführt sind und lege alles in einen eigenen "div-Container" um die Bilder auf der Seite zu zentrieren.

<div class="bild3">
    <figure class="bilder">
        <a href="../fotogalerie-Reisen/Ibiza2011"
          title="Sprung zu den Reisebildern von Ibiza">
          <img src="bilder300/Ibiza_Gewitterhimmel2.jpg"
            width="250" height="167" alt="Gewitter">
        </a>
        <figcaption>
          Gewitter über Ibiza
        </figcaption>
    </figure>
    <figure class="bilder">
        <a href="../monatsbilder.php"
          title="Sprung zu den Bildern des Monats">
          <img src="bilder300/Cottage.jpg"
            width="100" height="67" alt="Kleines Cottage">
        </a>
        <figcaption>
          Kleines Cottage mit Reetdach auf der grünen Insel Irland
        </figcaption>
    </figure>
    <figure class="bilder">
        <a href="../fotogalerie-Tiere"
          title="Sprung zu den Tierbildern">
          <img src="bilder300/Gerfalke.jpg"
            width="200" height="133" alt="Gerfalke">
        </a>
        <figcaption>
          Gerfalke
        </figcaption>
    </figure>
</div>

Ohne Angaben im CSS (Cascading Style Sheet) würden die Bilder nun untereinander platziert. Ich möchte aber die Bilder auf der Seite zentriert darstellen, und gebe dafür im CSS (Cascading Style Sheet) die folgenden Zeilen ein:

.bild3 {
    display: table;
    width: 100%;
}

figure.bilder {
    float: none;
    border: none;
    display: table-cell;
    max-width: 260px;
    text-align: center;
    vertical-align: middle;
}

figure.bilder img {
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

Damit die drei Bilder nebeneinander auf der Seite erscheinen, gebe ich für das "figure-Element" die Angaben "display: table-cell" und "text-align: center" an, und um die Bilder auf der Seite zu zentrieren, gebe ich dem "div-Container" mit "display: table" und "width: 100%" die notwendigen Informationen mit. Mit "vertical-align: middle" sorge ich schließlich dafür, dass die Bilder auch in der Vertikalen zentriert zu den anderen Bildern stehen.

Gewitter
Gewitter über Ibiza
Kleines Cottage
Kleines Cottage mit Reetdach auf der grünen Insel Irland
Gerfalke
Gerfalke

Photos © Monika & Klaus Franz

So könnte man nun eine Fotogalerie oder ein Menue mit Bildern aufbauen!
Im nächsten Kapitel werde ich dann ein paar Effekte, also einen "hover-Effekt", beim Überfahren der Bilder mit dem Mauszeiger einfügen.

Zum Seitenanfang springen Λ