nicht angemeldet
Hallo zusammen,
für eine Fotogalerie sollen die Vorschaubilder zusammen mit ihren Untertiteln neben- und untereinander angezeigt werden. Das Layout soll jedoch keine statische Matrix sein, sondern sich den verschiedenen Fenstergrößen anpassen, d.h. es sollen immer soviele Bilder nebeneinander angezeigt werden, wie horizontaler Platz im Browserfenster zur Verfügung steht. Also so, wie <img>-Tags angezeigt würden, wenn man sie einfach durch Whitespaces voneinander trennen würde.
Für einzelne Bilder funktioniert das auch wunderbar, aber wenn auch noch Untertitel unter jedem Bild angezeigt werden sollen, reicht das nicht mehr aus, da je ein Bild und ein Untertitel eine zusammengehörige Einheit bilden sollen. Bild + Untertitel müssen also in einen Container, und die Container müssen - wie zuvor die <img>-Tags - nebeneinander dargestellt werden. Die naheliegendste Möglichkeit hierfür wäre wohl eine Tabelle, etwa in der Art:
<table cellspacing="4" cellpadding="0" border="0" style="display:inline;"><tr><td align="left"><img src="bild.jpg" width="192" height="144"><br>Bilduntertitel</td></tr></table>
Das funktioniert, aber leider nicht mit allen Browsern. Während die Desktop-Browser Opera, Firefox und Internet Explorer die Tabellen tatsächlich wie beabsichtigt nebeneinander darstellen, ordnen Webkit-basierte Mobilbrowser für Android die einzelnen Tabellen weiterhin untereinander an, d.h. die Angabe "display:inline;" hat hier offenbar keine Auswirkung.
Also vielleicht ein <div> oder <span> als Container verwenden? Z.B. so:
<div style="margin:6px; text-align:left; display:inline; float:left;><img src="bild.jpg" width="192" height="144"><br>Bilduntertitel</div>
Das funktioniert jetzt zwar auch mit Webkit-Browsern, aber die Bilder sind auf der Seite nicht horizontal zentriert, was wohl mit der Angabe "text-align:left;" zusammenhängt. Läßt man diese Angabe aber weg, sind die Bilduntertitel nicht mehr links ausgerichtet, sondern mittig unter jedem Bild. Des weiteren muß das Umfließen des Textes nachfolgender Elemente wieder beendet werden.
Hat noch jemand eine Idee, wie ich diese scheinbar einfache Sache hinbekomme?
Hier noch eine Seite zur Veranschaulichung der obigen Beispiele:
http://www.stefanbion.de/tmp/inline-table.htm
Gruß,
Stefan
Der Martin