Bilder, bei Fenstergröße Zeilenumbruch

[Herzschrittmacher]

Guten Abend liebe Community,
bin momentan etwas am verzweifeln und bekomm es einfach nicht auf die Reihe... vielleicht könnt ihr mir helfen!

Möchte acht Bilder (mit Untertext) nebeneinander zentriert haben. Ändert sich die Fenstergröße (wird kleiner) soll es zu einem Zeilenumbruch kommen damit die Bilder in 4 Bilder pro Reihe aufgeteilt sind. Wird das Fenster noch kleiner sollen zwei Bilder nebeneinander sein.
Also zb Fenstergröße 1600 Breit 1.Bild 2.Bild 3.Bild 4.Bild 5.Bild 6.Bild 7.Bild 8.Bild
Fenstergröße 800 Breit 1.Bild 2.Bild 3.Bild 4.Bild
5.Bild 6.Bild 7.Bild 8.Bild
Fenstergröße 200 Breit 1.Bild 2.Bild
3.Bild 4.Bild
5.Bild 6.Bild
7.Bild 8.Bild

Das hab ich bisher gebastelt... unter Firefox funktioniert es^^... Bei Safari ist allerdings schon wieder Schluss.. (Egal wie groß das Fenster ist ich habe immer nur zwei Bilder nebeneinander)

<table style="display:inline;border: 0;">
<tbody>
<tr>
<td style="vertical-align: middle; align: center; width: 146px; height: 166px;">
<a href="/bild1.html"><div align='center'><img src="{{media url="bild1.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>bild1</h4><br /><br /><br /></span></td>

<td style="vertical-align: middle; align: center; width: 146px; height: 166px;">
<a href="/bild2.html"><div align='center'><img src="{{media url="bild2.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>iBild2</h4><br /><br /><br /></span></td>
</tr>
</tbody>
</table>

<table style="display:inline;border: 0;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; width: 146px; height: 166px;">
<a href="/3.html"><div align='center'><img  src="{{media url="bild3.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>Bild3</h4><br /><br /><br /></span></td>

<td style="vertical-align: middle; text-align: center; width: 146px; height: 166px;">
<a href="/4.html"><div align='center'><img src="{{media url="bild4.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>bild 4</h4><br /><br /><br /></span></td>
</tr>
</tbody>
</table>

<table style="display:inline;border: 0;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; width: 146px; height: 166px;">
<a href="bild5.html"><div align='center'><img src="{{media url="bild5.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>bild5</h4><br /><br /><br /></span></td>

<td style="vertical-align: middle; text-align: center; width: 146px; height: 166px;">
<a href="/6.html"><div align='center'><img src="{{media url="bild6.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>Bild 6</h4><br /><br /><br /></span></td>
</tr>
</tbody>
</table>

<table style="display:inline;border: 0;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; width: 146px; height: 166px;">
<a href="/7.html"><div align='center'><img src="{{media url="BILD-7.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>BILD 7</h4><br /><br /><br /></span></td>

<td style="vertical-align: middle; text-align: center; width: 146px; height: 166px;">
<a href="/8.html"><div align='center'><img src="{{media url="BILD-8.png"}}"></div></a><br />
<span style="font-size: x-small;"><h4>BILD 8</h4><br /><br /><br /></span></td>
</tr>
</tbody>
</table>

Würde mich freuen wenn jemand eine bessere Lösung die unter allen gänigen Browsern läuft für mich hat! :-)

Grüße

 

[MrMurphy]

Hallo,

du mißbrauchst Tabellen zum Layouten. Das funktioniert nicht, da Tabellen dafür nicht gedacht sind.

Für Bilder mit Text sind die Elemente figure und figcaption vorgesehen.

Zur Anordnung der Bilder ist aktuell das Flexbox-Modell vorgesehen oder veraltet float mit clear.

Ich habe mal ein Beispiel mit dem Flexbox-Modell erstellt, die Werte können natürlich noch angepasst werden:

http://foreninfo.bplaced.net/seiten..._12_herzschrittmacher_02_bilder_anordnen.html

Gruss

MrMurphy

 

[Herzschrittmacher]

Hi MrMurphy,
danke für deine Antwort! :) Habe mir dein Beispiel mal angeschaut, jedoch sind hier alle acht Bilder untereinander (bisher nur im Safaribrowser angeschaut).
//Edit
In Firefox passt das, genau so hab ich mir das vorgestellt! Hast du vielleicht eine Idee die mit allen gängigen Browsern kompatibel ist? (Firefox, IE, Safari, Opera)

 

[MrMurphy]

Hallo,

Flexbox funktioniert auch mit Safari, dazu ist nur ein Prefix erforderlich. Dies kannst du dir auch automatisch erstellen lassen, z. B. auf

http://jsbin.com/gufoko/quiet

Mein Hinweis war nur als eine Lösungsmöglichkeit für dein Problem gedacht, nicht als fertige Lösung. Wenn du Flexbox nutzen willst solltest du dich darüber informieren. Nachfolgend als Beispiel mal eine Lösung mit den aktuell sinnvollem und automatisch eingefügten Prefixen, die sollte auch im Safari funktionieren:

http://foreninfo.bplaced.net/seiten..._12_herzschrittmacher_03_bilder_anordnen.html

Gruss

MrMurphy