Anordnung Thumbnails

[Lizzyweb]

Hallo liebes Forum,

ich habe ein kleines Problem hinsichtlich einer sauberen , browserübergreifenden Anordnung von Thumbnails auf einer Produktinfo-Seite in unserem Shop - tabellenfrei, versteht sich. Über Eure Hinweise und Hilfe würde ich mich sehr freuen.

Es geht darum, im Format unterschiedliche Thumbs (Höhe, Breite) gleichmäßig in einem Container anzuordnen - jeweils 3 in einer Reihe mit einem immer gleichgroßen Rahmen zur besseren Übersicht.

Wenn ihr Euch den folgenden Link im Firefox anschaut, bekommt ihr einen Eindruck, wie das ganze optimalerweise ausschauen soll:
http://www.kinderfahrradladen.de/kinderfahrraeder/20-zoll-fuer-6-8-jaehrige/puky-crusader-20-3-alu::1631.html

Folgendes CSS steht dahinter:

Code: Alles auswählen

div.MagicToolboxSelectorsContainer {
   overflow:hidden;
   width:325px;
   margin-top:6px;
}
.MagicToolboxSelectorsContainer {
   white-space:normal;
}

.imageholder {
    position:relative;
    display:table;
    height: 80px;
    width: 102px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #cdcdcd;
    float:left;
    margin:0 4px 4px 0;
}
.inner {
    width:100%;
    display:table-cell;
    vertical-align:middle;
    position:relative;
    text-align:center;
}

.inner img {
   max-width: 80px;
   max-height: 75px;
   display: inline;
   vertical-align: middle;
}
.inner a img {
   border: none;
}

Nun wäre es natürlich vermessen, anzunehmen, dass das Ganze auch durchgängig in den IEs klappen würde- und tatsächlich, die drei noch relevanten Versionen von IE6 - IE8 interpretieren doch teilweise sehr unterschiedlich - was mich zu folgenden Zusatzanweisungen veranlasste, die auch online sind:

IE6:

Code: Alles auswählen

.imageholder {
   overflow:hidden;
}
.imageholder,.inner {
   display:block;
}
.inner {
   top:50%;
   left:0;
}
.inner img {
   top:-50%;
   position:relative;
   display:block;
   width: 80px;
}

IE7:

Code: Alles auswählen

.imageholder {
   overflow:hidden;
}
.imageholder,.inner {
   display:block;
}
.inner {
   top:50%;
   left:0;
}
.inner img {
   top:-50%;
   position:relative;
   display:block;
   max-height: 75px;
}

und IE8:

Code: Alles auswählen

.inner img {
   max-width:80px;
   max-height: 75px;
}

Die Ergebnisse sind akzeptabel, aber noch nicht wirklich befriedigend:

1. Öffnet ihr den obigen Link mit dem IE 8, so werden - für mich nicht verständlich - einige Thumbs bzw. deren Rahmen breiter dargestellt als die angewiesenen 102 px, was dazu führt, dass manchmal nur 2 Thumbs in einer Reihe auftauchen ...

2. Beim IE 7 scheint alles o.k. zu sein.

3. Beim IE 6 werden die Thumbs stets mit width: 80 px angezeigt und bei Hochformatbildern entsprechend in die Höhe gesetzt. Das seht ihr hier:
http://www.kinderfahrradladen.de/bewegung-spiel/einraeder-spassfahrzeuge/scool-einrad-jus-alu::2028.html
Begrenze ich mit height: 75px werden die Bilder entsprechend gestaucht ...! Ausserdem ist hier die vergrößerte Bildansicht (oberhalb der Thumbs) gemäß des Formats des ersten Thumbnails "beschnitten", so dass nur Teile eines Bildes betrachtet werden können - aber das ist eine andere Schraube, an der gedreht werden muss ...!

Fällt Euch dazu was ein? Wie gesagt, ich bin für jeden Hinweis dankbar (denn, ich bin nicht wirklich ein CSS-Profi ...)

Liebe Grüße
Lizzy

[sejuma]

Die älteren iE-Versionen verstehen table-cell nicht und deshalb klappt dann auch vertical-align nicht.

Ich würde es - ohne jegliche Spezialangaben für den IE - mit einer Listengalerie lösen wie hier beschrieben: http://www.ohne-css.gehts-gar.net/0020.php
Wenn du li noch eine line-height gibst, welche der Höhe der Kästchen entspricht, sollten die Thumbs auch vertikal zentriert sein.

Lösche vorsichtshalber auch mal noch die Leerzeilen vor dem Doctype raus. Möglicherweise fällt dadurch der IE in den Quirksmode.

[Lizzyweb]

Hallo sejuma,

Danke für Deine Antwort!

Die Leerzeilen habe ich gelöscht - die Ergebnisse in den jeweiligen IE-Versionen bleiben leider die selben.

Deine vorgeschlagene Listengalerie sieht verlockend einfach aus, scheint aber für meine Zielstellung nicht wirklich geeignet zu sein, wenn ich das richtig überblicke ...
Schließlich haben eine Vielzahl der darzustellenden Thumbs unterschiedliche Größen(-verhältnisse) und sollen damit skaliert und zentriert in immer gleich großen Kästchen abgebildet werden. Eine variierende Größen-Anweisung für das img kann das System nicht ausgeben.

Vielleicht sehe ich aber auch den Wald vor lauter Bäumen nicht mehr ... und Du kannst mir das noch anders erklären?

Grüße,
Lizzy

[sejuma]

Das müsste auch gehen.
Versuch's mal so (ungetestet):

Code: Alles auswählen

#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
width: 158px;
height: 158px;
line-height: 156px;
}

#galerie img
{
width: 150px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}

Die width- und height-Angaben bei li entsprechen der generellen Größe der Grafiken zuzüglich padding/border. Durch line-height erfolgt die vertikale Zentrierung.

Bei img nimm einen Breitenwert, auf den skaliert werden soll.

Ggf.- die Pixelwerte dann noch individuell anpassen.

[Lizzyweb]

Ich versuch' das mal ... vielen Dank!

Grüße,
Lizzy