5202

ein Blog über technische Fragen zu Blogger

Mit HTML5 drei Bilder nebeneinander stellen

von
Ich hatte gestern ein nettes Gespräch mit einer Bloggerin, die das uralte Problem 'drei-Bilder-nebeneinander' plagt und der Tabellen zu kompliziert waren - habe ich mir überlegt, schreibe ich mal was, wie's einfach[er] mit HTML5 geht!

So schaut am Ende das Ergebnis aus:

Die Hölle
Das Paradies
Himmlisches Jerusalem

Picassa-Webalbum

Machen wir mal wieder ein richtiges Tut ... so mit Schritt für Schritt Anleitung :=).

Freunde, fangen wir damit an, dass wir unsere Bilder direkt in ein Picassa Webalbum hochladen. Habt ihr alle Bilder in dem Album, könnt ihr rechts oben die 'Rechte' dieses Albums bearbeite. 'Rechte' meint, wer darf dieses Album sehen? Ihr setzt die Rechte des Albums auf 'Eingeschränkt, alle mit dem Link', dass reicht aus.

Dann klickt ihr das erste Bild im Album an, klickt links außen auf 'Link zu diesem Foto'. Ihr setzt ein Häckchen bei 'Nur Bild (keinen Link)' und wählt die Größe des Bildes aus .... dann bekommt ihr bei Bild einbinden einen Link für Blogger.

Das hört sich kompliziert an, ist es aber nicht - wenn ihr das ein.-, zweimal gemacht habt, werdet ihr sehen, dass es so viel einfacher ist, als sich dem doofem Blogger-Bild-Uploader auszuliefern, der eh die Hälfte der Zeit kaputt ist ...:=(.

Der Link sieht so oder so ähnlich aus:
https://lh4.googleusercontent.com/-Z0UcYxoAmuw/UGcNiAfsHVI/AAAAAAAAC2Y/Xl7DDqsdfrA/s800/Hieronymus_Bosch%25252C_Hell_%252528Garden_of_Earthly_Delights_tryptich%25252C_right_panel%252529_-_detail_1_%252528devil%252529.png
Der einfachheit halber kürze ich ab jetzt die Links mit dem Google Url Shortener:
http://goo.gl/uai7r
Sehr viel übersichtlicher, oder?

HTML5

Okay, im optimalen Fall haben wir jetzt die Links zu den drei Bilder, die nebeneinander sollen ... bauen wir nun die HTML. Da wir modern und zukunftsgerichtet sind (und keine Lust auf Tabellen haben), machen wir das mit HTLM5.

Wir nehmen drei figure Tags:
<figure></figure>
<figure></figure>
<figure></figure>
In diese figure Tags kommen die img Tags mit den Links auf die Bilder:
<figure><img src="http://goo.gl/vXNDj" /></figure>
<figure><img src="http://goo.gl/HFWPM" /></figure>
<figure><img src="http://goo.gl/Zw4Ro" /></figure>
Wer Untertitel will, kann das optional mit dem figcaption Tag machen:
<figure><img src="http://goo.gl/vXNDj" /><figcaption>Die Hölle</figcaption></figure>
<figure><img src="http://goo.gl/HFWPM" /><figcaption>Das Paradies</figcaption></figure>
<figure><img src="http://goo.gl/Zw4Ro" /><figcaption>Himmlisches Jerusalem</figcaption></figure>
Als letztes legen wir alles zusammen in einen div Container:
<div>
<figure><img src="http://goo.gl/vXNDj" /><figcaption>Die Hölle</figcaption></figure>
<figure><img src="http://goo.gl/HFWPM" /><figcaption>Das Paradies</figcaption></figure>
<figure><img src="http://goo.gl/Zw4Ro" /><figcaption>Himmlisches Jerusalem</figcaption></figure>
</div>
Schaut a bisserl übersichtlicher aus, als mit Tabellen, oder? 'Live' sind das nun drei Bilder mit Untertitel untereinander:
Die Hölle
Das Paradies
Himmlisches Jerusalem

CSS

Alles in allem ziemlich unspektakulär, jetzt kommt die Pointe, nämlich CSS. Im ersten Schritt geben wir dem figure Tag einen Style:
figure {
display: table-cell;
padding: 0 4px;
text-align: center
}
Ooooops ... schon sind die drei Bilder nebeneinander:

Die Hölle
Das Paradies
Himmlisches Jerusalem


Und damit das Element insgesamt zentriert wird, geben wir dem div Container noch einen kleine Style Anweisung:
<div style="display: table; width: 100%;">
<!-- Tags -->
</div>
Und schon stehen die drei Bilder nicht nur in einer Reihe, sondern sind auch - bezogen auf das Textfeld - zentriert:

Die Hölle
Das Paradies
Himmlisches Jerusalem


Noch eine kleine Schönheitsoperation - das kleinste [mittlere] Bild soll horizontal zentriert zu den anderen drei Bildern stehen ... das geht mit vertical-align: middle:

Die Hölle
Das Paradies
Himmlisches Jerusalem

Zusammenfassung

Alles zusammen, als Inline-Style Anweisung geschrieben:
<div style="display: table; width: 100%;">
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="http://goo.gl/vXNDj" /><figcaption>Die Hölle</figcaption></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center; vertical-align: middle;"><img src="http://goo.gl/HFWPM" /><figcaption>Das Paradies</figcaption></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="http://goo.gl/Zw4Ro" /><figcaption>Himmlisches Jerusalem</figcaption></figure>
</div>

Hey cool, gibt's da auch Nachteile?

Weil's modern und zukunftsgerichtet ist, versteht das logischerweise die Produkte aus dem Hause Microsoft nicht, genauer gesagt erst ab IE7+. Macht aber nichts, die Besucher mit solchen Browser sehen eure Bilder trotzdem, nur halt alle untereinander und nicht nebeneinander, ich denke das ist zu verschmerzen :=).

Nachtrag: Gehen klickbaren Links?

Es wurde gefragt, ob das auch wie 'üblich' mit Links geht ... geht natürlich:



Hier mit Inline-Style Anweisung:
<div style="display: table; width: 100%;">
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><a href="http://goo.gl/uai7r"><img src="http://goo.gl/vXNDj" /></a></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center; vertical-align: middle;"><a href="http://goo.gl/GJOMZ"><img src="http://goo.gl/HFWPM" /></a></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><a href="http://goo.gl/6m0Yk"><img src="http://goo.gl/Zw4Ro" /></a></figure>
</div>
Beziehungsweise als ausgelagerte Styleanweisung:
<style>
#grid {
display: table;
width: 100%
}
figure {
display: table-cell;
padding: 0 4px;
margin: 0 auto;
text-align: center
}
</style>
<div id="grid">
<figure><a href="http://goo.gl/uai7r"><img src="http://goo.gl/vXNDj" /></a></figure>
<figure style="vertical-align: baseline"><a href="http://goo.gl/GJOMZ"><img src="http://goo.gl/HFWPM" /></a></figure>
<figure><a href="http://goo.gl/6m0Yk"><img src="http://goo.gl/Zw4Ro" /></a></figure>
</div>
Probiert das zuerst in einem Test-Blog oder Editor!

Anmerkungen, Fragen

Ihr wolltet mir schon immer mal sagen, was ihr von solchen Tuts haltet? Tut euch keine Zwang an, dafür sind die Kommentare da!