CSS-Positionierung und Browserkompatibilität

    hallo,

    hier mein problemkind, zip mit meiner html-seite und den zugehörigen css-dateien:
    http://www.fileden.com/files/2008/10...html-forum.zip

    es handelt sich um eine galerie: das hintergrundbild enthält filmstreifen, auf welchen die thumbnails positioniert werden sollen.
    zu erst hab ich die thumbnails mittels margin positioniert, so dass es im firefox passt.
    -> siehe animationen_uebersicht1.html, bzw. animationen_style1.css
    leider werden die abstände in anderen browsern anders interpretiert, so dass die thumbnails dort nicht mehr richtig auf dem filmstreifen sitzen. hab dann 'conditional comments' (iefixes1.css) für den internet explorer erstellt, leider gibt es so etwas scheinbar nicht für die restlichen gängigen browser (safari, opera).

    dann hab ich es mal mit absoluter positionierung probiert
    -> siehe animationen_uebersicht2.html, bzw. animationen_style2.css
    hier ist der unterschied zwischen der darstellung im firefox und opera minimal (hin und wieder 1-2 pixel abweichung, was noch verkraftbar ist...) und für den internet explorer ließ sich das dann wieder mittels iefixes2.css hinbiegen.
    dann musste ich jedoch feststellen, dass das layout mit dieser positionierungs-methode nur bei einer bestimmten bildschirmauflösung funktioniert (1024x768 ) :/

    hab leider kaum erfahrung mit css. hoffe jemand kann mir helfen...

    Zwei Anmerkungen am Rande....

    ZIP-Dateien werden in Foren nur sehr ungerne runter geladen. Die Gefahr von Schädlingen spielt hier wohl eine große Rolle. Lieber die betreffende Seite kurz hochladen und den Link hier posten.


    Position absolute sollte (erst recht) von Anfängern nicht benutzt werden, da die Ergebnisse in der Regel mehr Probleme aufwerfen als sie wirklich lösen.

    Hi

    was genau meinst Du damit...

    Zitat

    Position absolute sollte (erst recht) von Anfängern nicht benutzt werden, da die Ergebnisse in der Regel mehr Probleme aufwerfen als sie wirklich lösen.

    ...welche Probleme konkret?

    Gruss,

    visitor

    position:absolute ist ein ganz normales Styleattribut welches von allen modernen Browsern unterstützt wird und, sofern richtig angewand, auch die gewünschten Ergebnisse bringt.
    Warum sollte man es also nicht auch benutzen? Ich für meinen Teil hatte noch nie Probleme damit.

    In diesem Fall hier, würde ich das allerdings auch anders lösen.

    Schau dir mal die bla.html an...

    Zitat von Speedy


    wird überall richtig dargestellt... oder?

    Also im IE7 ist mir direkt aufgefallen, dass oben links der Pfeil nicht richtig angezeigt wird.
    Ich würde mal schauen ob ich für dieses Zeichen (⇐) nicht ein entety benutzen würde, anstatt das so direkt in den Quelltext zu kopieren.

    Ah, da haben wir es ja: ⇐

    Und damit du auch nachvollziehen kanns was ich gemacht habe:
    Also dem äußersten Div habe ich nur die Breite und Höhe des Hintergrunds gegeben und den Hintergrund selbst zugewiesen natürlich.

    Das nächste div ist nur so groß wie die Gesamtheit aller Thumbs inkl. der Abstände dazwischen.
    Dieses div habe ich durch paddings des ersten divs quasi in die Mitte geschoben. Also mit padding-top und padding-left. (wobei mir gerade einfällt, dass du die paddings noch von der Breite bzw Höhe des divs abziehen musst :>)

    Nun, im zweiten div kommen einfach die Thumbs mit jeweils einem umschließenden div welches immer die Klasse .thumb hat.

    Diese Klasse hat ein float:left, sodass die Thumb-divs nebeneinander sind, da sie sonst automatisch Zeilenumbrüche erzeugen würden und untereinander wären.
    Für die Abstände der Thumbs hat die Klasse .thumbs ebenfalls noch paddings.

    Durch die Feste Größe des umschließenden divs (das zweite :>) bricht der Textfluss nach dem fünften thumb um und die nächste "Zeile" beginnt.

    Ps.: Viele wege führen nach Rom, deine Variante funnktioniert ja auch gut. :)

    thx für die beschreibung... was mich noch interessieren würde: was meinst du mit entity für den pfeil? statt dem zeichen ein image einfügen?