zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Gleichmäßige, browserübergreifende Thumbnail Anordnung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.01.2010, 10:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2010
Beiträge: 2
Lizzylein befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.01.2010, 10:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Lizzylein Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.01.2010, 12:16
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 15.01.2010, 14:51
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Lizzylein Beitrag anzeigen
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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 15.01.2010, 15:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Hm. Klaus, hast du dir das gewünschte Ergebnis mal angeschaut? Ich weiß gerade nicht, wie deine Vorschläge dorthin führen sollen.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.01.2010, 15:17
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 15.01.2010, 15:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 15.01.2010, 16:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2010
Beiträge: 2
Lizzylein befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 15.01.2010, 17:09
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Lizzylein Beitrag anzeigen
Findest Du die Schriftgröße wirklich zu klein?
jep, ich auch.

Außerdem hat deine Site die 11px-Seuche.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.01.2010, 17:28
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:46 Uhr.