Thumbnails gleichmäßig anordnen

[Lizzy]

Hallo liebes Forum,

ich bin schon eine Weile am Suchen, habe aber auch anderswo leider keine Lösung für mein Problem gefunden. Vielleicht habt ihr ja einen Tipp ...?

In einem betreuten Shop ordne ich auf den Produkt-Info-Seiten die Thumbs (und auch das Haupt-"info-image") mit Hilfe einer Tabelle gleichmäßig an. Hier seht ihr ein Beispiel:

http://www.kinderfahrradladen.de/kinderfahrraeder/12-14-zoll-fuer-3-4-jaehrige/puky-z2-kinderfahrrad-12-zoll::1609.html

Das erschien mir bislang deshalb als nötig, weil ich per CSS keine Lösung gefunden habe, die es möglich machte, Bilder unterschiedlicher Höher aber gleicher Breite gleichmäßig und geordnet mit einem beständig gleichgroßen Rahmen darzustellen.
In anderen Worten: Wenn ich drei Bilder habe, z.B. der Größen 200 x 100px, 150 x 100px und 100 x 100px, dann kann ich sie per CSS-Anweisung auf die gleimäßige Breite von 80px bringen mit den nun unterschiedliche Höhen von 40px, 60px bzw. 80px. Alle möchte ich jetzt in einem gleichmäßigem Rahmen von z.B. 100 x 90px nebeneinander darstellen. Natürlich entsprechend horizontal und vertikal zentriert innerhalb des Rahmens ...

Was meint ihr, ist das möglich mit CSS, wenn ja, wie? Oder sollte/muss ich am Einsatz der Tabelle festhalten?

Danke für Eure Empfehlungen und liebe Grüße,
Lizzy

[Tommi]

Hallo Lizzy,

wenn ich Dich richtig verstanden habe, möchtest Du alle Thumbnails mittig in einem immer gleich großen Rechteck anzeigen, oder? Tja, am einfachsten wäre, dem umschließenden a-Tag display:table-cell zuzuweisen. Aber das versteht wohl der IE nicht. Probier mal das hier:

display:block;  
width:[breite]px;  
line-height:[höhe]px;  
text-align:center;  
vertical-align:middle;

Aber soweit ich mich erinnere, brauchen ältere IEs da noch ein <span> daneben oder drum herum mit display:inline-block und height:100% oder so ähnlich.

Tommi

[bleicher]

Grüße,
man könnte etwas pervers werden, falls die ganze sache dynamisch erzeugt wird - und zwar indem man die bilder durch 1x1px transparente gifs ersetzt, und eignetliche bilder als no-repeat/center hintergrund dieser setzt.
MFG
bleicher

[Malcolm Beck´s]

hi,

http://www.kinderfahrradladen.de/kinderfahrraeder/12-14-zoll-fuer-3-4-jaehrige/puky-z2-kinderfahrrad-12-zoll::1609.html

Was meint ihr, ist das möglich mit CSS, wenn ja, wie? Oder sollte/muss ich am Einsatz der Tabelle festhalten?

Möglich ja, Perfekt Nein.

Vielleicht hilft es dir ja; war jedenfalls 'ne nette Übung, Danke für die Aufgabenstellung ;)

mfg

[Joachim]

Hi,

...weil ich per CSS keine Lösung gefunden habe, die es möglich machte, Bilder unterschiedlicher Höher aber gleicher Breite gleichmäßig und geordnet mit einem beständig gleichgroßen Rahmen darzustellen.

Ich gestehe, dass ich mich hier immer herummogele, indem ich bei meiner Galerie die Thumbgrösse serverseitig auswerte und entsprechende Margins ins Html schreibe...

Gruesse, Joachim