CSS: Bilder im Polaroid-Stil formatieren

Sobald wir Photos auf einer Webseite zeigen wollen, müssen wir sie ansprechend darstellen. Dazu haben wir mehrere Möglichkeiten. Wir beginnen zuerst mit einer Art Formatierung wie sie die CSS-Version 3 nutzt, dafür aber ohne Hintergrundgrafiken auskommt. Das Ziel dieses Tutorials ist eine einfache Galerie, in der die Bilder mit einem Rahmen und Titel versehen werden.

Natürlich beginnen wir in der CSS-Datei wieder mit einem Standardblock für die Basisformate. Gleichzeitig definieren wir die Breite der Galerie.

/*
Funktion: css-Datei fuer uebung15.html
Erstellt: 01-10-2009 12: 11: 00, Clemens Gull
*/
/* Basisformate */
body {
margin: 25px;
background-color: #C0C0C0;
font-family: "Comic Sans MS", Georgia,
"Times New Roman", Times, serif;
font-size: 1em;
color: #000099;
font-weight: normal;
}
/* Ueberschriften */
h1 {
width: 90%;
padding: 0px 20px 20px 20px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.75em;
color: #000066;
font-weight: normal;
font-style: italic;
}
/* Galerie */
div#gallery {
width: 500px;
}

Nun sehen wir bereits die Bilder und die Titel untereinander dargestellt. Denn der umgebende div-Tag legt die Breite mit maximal 500px fest.

Jetzt formatieren wir die Klasse polaroid, um der Galerie ein wenig Form zu geben. In dieser Formatierung ist eigentlich nichts Spezielles versteckt.

Wir nutzen nur das Wissen aus den vorherigen Kapiteln über die Positionierung, die Ränder und die Hintergrundfarben.

Die verwendete float-Eigenschaft benötigen wir, damit die Bilder mit der nächsten Formatierung elegant nebeneinander dargestellt werden.

/* Formatierung fuer die Bilder */
div.polaroid {
float: left;
background-color: #FFFFFF;
margin-left: 10px;
margin-bottom: 13px;
padding: 10px;
border: 1px solid #333333;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font-size: 0.8em;
font-style: italic;
text-align: center;
}

Als Letztes nutzen wir die Möglichkeit des Kontext-Selektors, um die Bilder zu definieren. Wenn wir hier die Eigenschaft width nutzen, können wir die Photos proportional kleiner rechnen.

Gleichzeitig definieren wir den img-Tag mit der Eigenschaft display als Block-Element.

Damit wirkt sich die Eigenschaft float aus der vorhergehenden Definition aus und wir haben die Galerie so dargestellt, wie wir es uns wünschen. Denn jetzt wird auch der Titel automatisch unter dem Bild dargestellt.

Die passende Ergänzung zu diesem Artikel: