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...
CSS-Positionierung und Browserkompatibilität
-
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...
ZitatPosition 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
-
Das können Dir die Leute sagen, die damit versuchen zu arbeiten.
-
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...
-
@ fafoo: passt, allerdings kann ich die lösung spontan nicht nachvollziehen
hier noch mal meine seite mit relativen positionierungen:
http://freenet-homepage.de/technarchy/ani…uebersicht.htmlwird überall richtig dargestellt... oder?
-
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.
-
Eine Grafik wäre natürlich noch besser, ja.
Aber Entitäten sind sowas wie ü für ü.
http://de.wikipedia.org/wiki/Sonderzeichen#HTML -
Aber Entitäten sind sowas wie ü für ü.
http://de.wikipedia.org/wiki/Sonderzeichen#HTML
das ⇐ was ich in meinem code verwende, um den pfeil darzustellen, müsste dann doch eine solche entität sein oder etwa nicht?mir ist auch aufgefallen, dass der pfeil im IE viel breiter dargestellt wird als in anderen browsern... weiß nicht woran das liegt...
-
Ach du hast das schon als entety drin... ja dann machs halt einfach als Grafik...
