Bildergalerie mit horizontaler und vertikaler Zentrierung

[WiMu]

Hallöle.

Ist mir unendlich peinlich, die Frage ... und ja, ich kenne die Abschnitte zur Zentrierung bei selfhtml; hilft mir aber nicht wirklich weiter.

Folgendes:

Ich hätte gerne eine Galerie mit Vorschau-Bildern, wobei die Galerie selbst horizontal und die Bilder (Hoch- und Querformat) sowohl horizontal, als auch vertikal zentriert sein sollen. Eigentlich kein Problem, aber da je nach Bildschirmgröße unterschiedlich viele Bilder in einer Reihe angezeigt werden sollen, fällt eine Tabelle schon mal flach. Also dann pro Bild ein div und die komplette Galerie ebenfalls als div, ungefähr so:

  
<div id="gallery" align="center">  
	<div class="thumb">  
		<a href="images/großesbild.jpg">  
			<img src="images/kleinesbild.jpg" align="middle" height="jenachdem" width="jenachdem" />  
		</a>  
	</div>  
<!-- usw. -->  
</div>  

Das zugehörige stylesheet (Auszug) sieht z.Zt. so aus:

  
.thumb {  
	height:100px;  
	width:100px;  
	display:inline-block;  
	margin:2px;  
}  

Das Blöde ist nun, dass zwar die Vorschaubilder selbst mittig in der Zeile Positioniert sind, nicht aber die sie umgebenden divs. Zur Verdeutlichung mal mit rotem Hintergrund pro div.thumb:

Wenn ich nun den inline-block rauswerfe und durch inline ersetze, werden natürlich keine Größenangaben interpretiert, und wenn ich die div.thumbs stattdessen floaten lasse, ist zwar alles schön in einer Reihe, aber mir geht meine komplette Zenrierung flöten. Das einzige, was mir einfiele, wäre zu jedem Bild ein passendes margin anzugeben ... das finde ich aber total bescheuert ...

Wie gesagt, ich schähme mich tierisch, aber könnt ihr mir trotzdem helfen?

Grüße,

WiMu

[Joachim]

Hi,

Wie gesagt, ich schähme mich tierisch, aber könnt ihr mir trotzdem helfen?

Schämen musst Du Dich nur für das Nichtbenutzen der Archivsuche, denn das Thema ist nicht trivial und wird durchaus kontrovers diskutiert. Ich gestehe, ich mogle mich derzeit noch darum herum, da ich meine Galerie eh mit PHP erzeuge und die passenden paddings einsetzen kann...

Gruesse, Joachim

[WiMu]

Moin,

Schämen musst Du Dich nur für das Nichtbenutzen der Archivsuche, denn das Thema ist nicht trivial und wird durchaus kontrovers diskutiert.

Die habe ich durchaus benutzt, und auch länger gegoogelt ... aber genau das, was ich suche eben nicht gefunden

Ich gestehe, ich mogle mich derzeit noch darum herum, da ich meine Galerie eh mit PHP erzeuge und die passenden paddings einsetzen kann...

Ich erzeuge meine Gelerie ebenfalls mit PHP und könnte auch problemlos passende paddings oder margins einsetzen, aber das finde ich - wie schon geschrieben - irgendwie doof, schon alleine, da ich dann inline-stylesheets benutzen müsste und dies den Quelltext erheblich aufblähen würde.

Als Notlösung habe ich nun um jedes einzelne Voschau-Bild eine quadratische Tabelle gepackt, die jeweils floatet:

  
<table class="thumb" cellspacing="0" cellpadding="0">  
	<tr valign="middle">  
		<td align="center">  
			<a href="images/groß.jpg">  
				<img src="images/klein.jpg" />  
			</a>  
		</td>  
	</tr>  
</table>  
<!-- usw. -->  

Auch nicht das gelbe vom Ei. Nun ist zwar alles schön angeordnet, aber die Gelerie als ganzes lässt sich wegen des floats nicht auf der Seite zentrieren (oder ich müsste wieder eine feste Breite angeben und per margin:auto ... was ich ja nicht wollte). Eigentlich müsste auch alles funktionieren, wenn ich stattdessen die Tabellen als inline-block darstellen lasse, aber dann kriege ich dumme Abstände zwischen den einzelnen Tabellen, die von browser zu browser variieren (v.a. der Opera zickt ... und IE<8 kann das gar nicht); doof, da ein javascript das Ganze auf mehrere Seiten verteilen soll und ich dazu wissen muss, wieviel Platz x Vorschaubilder einnehmen.

Naja, trotzdem erstmal danke ... ich schau' mir das mit den a-tags mal an; aber wahrscheinlich pfeif' ich lieber auf die Symmetrie (ist auch so hübsch genug)

Grüße,

WiMu

[apsel]

Om nah hoo pez nyeetz, WiMu!

[code lang=html]
<div id="gallery" align="center">
<div class="thumb">
<a href="images/großesbild.jpg">
<img src="images/kleinesbild.jpg" align="middle" height="jenachdem" width="jenachdem" />
</a>
</div>
<!-- usw. -->
</div>

Ich weiß nicht, ob es wirklich zielführend ist, aber die div.thumb können getrost weggelassen werden und stattdessen können die Links die Formatierung bekommen. Dies sind von Hause aus inline-Elemente, für die gibt es vertical-align.

Matthias