Gleichmäßige, browserübergreifende Thumbnail Anordnung

Lizzylein · #1 (**permalink**) 15.01.2010, 10:22

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:

Puky Crusader 20 Zoll | 3-Gang-Schaltung

Folgendes CSS steht dahinter:

Code:

    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:

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

IE7:

Code:

    .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:

    .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:

S'cool Einrad JUS - Alu

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

fricca · #2 (**permalink**) 15.01.2010, 10:40

Zitat:

Zitat von Lizzylein

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 ...

Gib table-layout:fixed bei .imageholder an.

Zitat:

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:

S'cool Einrad JUS - Alu

Begrenze ich mit height: 75px werden die Bilder entsprechend gestaucht ...!

Gestaucht? Wenn du nur die Höhe angibst, wird doch proportional verkleinert. Die Höhe erscheint mir hier sinnvoller.
Von deinem overflow:hidden sieht der IE6 nichts. In deinem regulären Stylesheet steht visible bei einem Selektor höherer Spezifität.

EvT · #3 (**permalink**) 15.01.2010, 12:16

Kleiner Tipp am Rande: Wenn man Bilder skaliert, leidet ihre Qualität. Um das auszugleichen, wenden inzwischen alle Browserhersteller einen Algorithmus zum Resampling gestretchter Bilder an. In IE steht diese Funktion ab IE 7 zur Verfügung. Wenn man sie verwenden will, kann sie über

Code:

img { -ms-interpolation-mode:bicubic; }

aktiviert werden.

Die Wirkung sieht man gut auf dem Vorher - Nachher-Bild in diesem Artikel. From the Department of Badly Chosen Defaults (Achte mal auf den Teller im Bildvordergrund).

Die CSS-Eigenschaft -ms-interpolation-mode auf MSDN: msInterpolationMode Property

hubspe · #4 (**permalink**) 15.01.2010, 14:51

Zitat:

Zitat von Lizzylein

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.

die Thumbreihe jeweils in eine Liste und li dann display:inline mitgeben wäre eine einfache Lösung für unterschiedlich hohe und breite Bilder.

Für den Rahmen könnte man den img's eine Klasse zuteilen.

fricca · #5 (**permalink**) 15.01.2010, 15:10

Hm. Klaus, hast du dir das gewünschte Ergebnis mal angeschaut? Ich weiß gerade nicht, wie deine Vorschläge dorthin führen sollen.

hubspe · #6 (**permalink**) 15.01.2010, 15:17

Zitat:

Zitat von fricca

Hm. Klaus, hast du dir das gewünschte Ergebnis mal angeschaut? Ich weiß gerade nicht, wie deine Vorschläge dorthin führen sollen.

umpf..., ähem.....*wgrwks*

Okay, die Bilder sind unterschiedlich und der Rahmen immer gleich, kapiert.

Vergessen wir was war.

fricca · #7 (**permalink**) 15.01.2010, 15:33

Zitat:

Zitat von hubspe

Vergessen wir was war.

Ach naja, nicht alles.

Deinen Markup-Vorschlag finde ich natürlich sinnvoll.
Wenn wir schon bei Alternativvorschlägen sind: Mein Ansatz wäre, die Bilder grundsätzlich mit einer festen Höhe anzeigen zu lassen. Dann muss nix vertikal zentriert werden und horizontal ist ja nun kein Problem.
Das schlimmste, was passieren kann, wäre, dass ein extrem querformatiges Bild nicht reinpasst. Da ist dann ein overflow:hidden keine Katastrophe.
Dürfte Hacking und Nerven sparen. Vielleicht.

edit: Und wenn ich schon bei Vorschlägen bin: Eine lesbare Schriftgröße wäre noch toll.

Lizzylein · #8 (**permalink**) 15.01.2010, 16:42

Hallo ihr drei,

vielen Dank für Eure Antworten!!!

Corina, Deine Hinweise haben es möglich gemacht, dass es im IE6 + IE8 nun so aussieht, wie ich es mir vorgestellt habe ... klasse!

Auch Dir, EvT, vielen Dank - im IE 7 ist die Thumb-Ansicht durch genannte Anweisung deutlich besser geworden!

Sicherlich gibt es sehr viel sauberere Lösungen für den Zweck bzw. die Zielstellung, wenn ich Dich richtig vertehe, Corina. Dennoch, ich bin soweit schon sehr zufrieden und glücklich.
Aber, um nochmal auf die Usability und Deinen Hinweis zurück zu kommen:
Findest Du die Schriftgröße wirklich zu klein?

Danke für Eure Hilfe,
Lizzy

hubspe · #9 (**permalink**) 15.01.2010, 17:09

Zitat:

Zitat von Lizzylein

Findest Du die Schriftgröße wirklich zu klein?

jep, ich auch.

Außerdem hat deine Site die 11px-Seuche.

EvT · #10 (**permalink**) 15.01.2010, 17:28

Apropos Schriftgrößen - wenn ich in Opera (10.2) die Schrift auch nur um einen Schritt vergrößere, wird das Vorschaubild (das mit der Lupe) doppelt angezeigt.

In Firefox 2 und 3 reagiert die Lupe recht träge und ruckelig.

In beiden Firefox-Versionen läuft der Text bei 2-maliger Schriftvergrößerung aus seinen Boxen heraus. Dieser Effekt macht sich besonders unangenehm in FF 2 bemerkbar.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme DIV Höhe, Anordnung	kran	CSS	4	07.11.2010 10:23