• Home
  • Bilder
  • Verschiedene Bildformate mit div-Container

Verschiedene Bildformate mit div-Container

Problem

CSS Bilder - Verschiedene Bildformate miteinander kombinieren mit div-Container

Die drei in Abbildung gezeigten Einzelbilder sollen zu der Montage zusammengefügt werden. Hierbei soll für die Einzelbilder jeweils das bestmögliche Bildformat verwendet werden.

Lösung

Umgeben Sie die drei Bilder mit einem div-Container und platzieren Sie sie in der Reihenfolge ihrer Benutzung im HTML-Code der Seite, wie hier gezeigt:

<div id="montage">
<img id="kinder" src="/bilder/kinder.jpg" alt="Kinder" />
<img id="zeichnung" src="/bilder/zeichnung.gif" alt="Zeichnung" />
<img id="boot" src="/bilder/boot.png" alt="Boot" />
</div>

Danach können Sie den Container gestalten und die einzelnen Bilder anhand ihrer alt-Attribute auswählen, um zusätzliche Stile zu definieren:

div#montage {
position: relative;
width: 675px;
height: 326px;
border: 1px solid black;
}
img#kinder, img#zeichnung {
float: left;
}
img#kinder {
margin-top: 22px;
}
img#boot {
position: absolute;
left: 260px
}

Zur besseren Unterscheidung der verschiedenen Elemente haben wir den ID-Selektoren hier zusätzlich das entsprechende Element vorangestellt. Das ist zwar nicht unbedingt nötig, kann aber die Wartung des Stylesheets erleichtern.

Diskussion

Durch die Kombination verschiedener Grafikformate lassen sich einige interessante Effekte erzielen. Anstatt das Bild als Ganzes in Photoshop zu kombinieren, verwenden wir hier drei Einzelbilder, die für ihren Zweck jeweils am besten geeignet sind.

Daher schaffen wir zunächst per position: relative den nötigen Positionierungskontext für das Boot. Es folgen explizite Angaben zur Größe des div-Containers, die sich aus den Größen des linken und rechten Bilds (Kinder bzw. Zeichnung) ableiten lässt. Dies ist notwendig, weil wir die Bilder als Floats definieren wollen. Außerdem können wir die gesamte "Komposition" mit einem Rahmen umgeben, der den nötigen visuellen Zusammenhalt für die drei Bilder herstellt.

Die Breite (width) erhält man einfach durch Addition der beiden Bildbreiten, während der Wert für height etwas höher ausfällt, weil wir die linke Bildhälfte ein Stück nach unten verschieben müssen.

Info

Es gilt als gängige Praxis, Bilder (img-Elemente) mit einem alt-Attribut zu versehen, damit auch Menschen mit Sehproblemen wissen, was dargestellt wird, und eine Alternative zur Verfügung steht, falls die Bilder nicht geladen werden können.

Zunächst definieren wir die beiden großen Bilder als Floats. Hierdurch werden sie "nahtlos" nebeneinander angeordnet. Das funktioniert allerdings nur, solange der div-Container eine entsprechende Breite hat. Wenn Sie zusätzliche Rahmen, Innen- oder Außenabstände verwenden wollen, muss die Containerbreite gegebenenfalls angepasst werden.

Wir arbeiten hier mit der Möglichkeit, mehrere Selektoren, durch Kommata voneinander getrennt, zu gruppieren. Dadurch brauchen wir die Deklaration nur einmal anzugeben.

Info

Anstelle der ID-Selektoren hätten Sie auch Nachfahrenselektoren und Selektoren für benachbarte Geschwisterelemente verwenden können. Für Browser, die bereits die neuen CSS3-Selektoren verstehen, wären auch Dinge wie nth-child() möglich.

Weil die Bilder unterschiedlich hoch sind, muss der Abstand zur Oberkante für das Foto angepasst werden. Den Wert für margin-top bekommen wir, indem wir die Differenz der Höhen (19 Pixel) und den unteren Leerraum des rechten Bilds (ca. 3 Pixel) addieren. Dadurch entsteht der Eindruck, dass beide Bilder eine Einheit bilden.

Es folgen die Deklarationen, mit denen das Boot an die richtige Stelle gerückt wird. Es soll der Eindruck entstehen, als bewege es sich aus der Zeichnung heraus in das Foto hinein. Weil wir zu Beginn per position: relative den div-Container als Positionierungs-Kontext festgelegt haben, können wir das Boot nun mithilfe absoluter Positionierung frei darin platzieren.

Ohne weitere Angaben werden absolut positionierte Elemente in der linken oberen Ecke des nächsten umgebenden Blocks mit Positionierungs-Kontext (oder des Ansichtsbereichs) platziert. Da der Abstand nach oben bereits ausreicht, brauchen wir hier nichts zu ändern. Um das Boot horizontal an die richtige Stelle zu schieben, verwenden wir die Eigenschaft left. Sie gibt an, dass das Boot um 220 Pixel nach rechts verschoben werden soll. Das Ergebnis sehen Sie in Abbildung.

CSS Bilder - Verschiedene Bildformate miteinander kombinieren mit div-Container

Bildformate

Die drei vorherrschenden Bildformate für das Web sind JPEG, GIF und PNG. Während das JPEG-Format am besten für Fotos und fotorealistische Abbildungen geeignet ist (das linke Bild mit den Kindern), werden für Grafiken mit wenigen Farben und klaren, einfachen Linienführungen besser GIF-Dateien verwendet (die Zeichnung auf der rechten Seite). Das GIF-Format ermöglicht es außerdem, eine Farbe transparent darzustellen. Mit PNG-Dateien ist es möglich, einen sogenannten Alphakanal zu definieren, der neben den Farbwerten für jeden Bildpunkt außerdem festlegt, wie durchscheinend er ist. Dadurch lassen sich zum Beispiel fließende Farbverläufe mit Transparenzen und Schattenwürfe erzeugen, die unabhängig von einer möglichen Hintergrundfarbe funktionieren (z.B. der Schattenwurf für das Boot).