XHTMLforum - Gleichmäßige, browserübergreifende Thumbnail Anordnung

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Gleichmäßige, browserübergreifende Thumbnail Anordnung (http://xhtmlforum.de/showthread.php?t=59843)

Gleichmäßige, browserübergreifende Thumbnail Anordnung

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

Zitat:

Zitat von Lizzylein (Beitrag 455831)

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.

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

Zitat:

Zitat von Lizzylein (Beitrag 455831)

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.

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

Zitat:

Zitat von fricca (Beitrag 455858)

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* :oops:

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

Vergessen wir was war. :mrgreen:

Zitat:

Zitat von hubspe (Beitrag 455859)

Vergessen wir was war.

Ach naja, nicht alles. :mrgreen:
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.

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

Zitat:

Zitat von Lizzylein (Beitrag 455872)

Findest Du die Schriftgröße wirklich zu klein?

jep, ich auch.

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

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.