Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: CSS-Positionierung und Browserkompatibilität

  1. #1
    Youngster
    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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...
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Youngster
    Themenstarter

    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    wie's aussieht hab ich die lösung des problems nun doch gefunden...
    hab's jetzt mal mit relativer positionierung versucht und so wurde es auf anhieb von allen getesteten browsern korrekt dargestellt.

    -> siehe http://www.fileden.com/files/2008/10...sitioniert.zip

  3. #3
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

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

  4. #4
    Azubi(ne)
    Registriert seit
    01.01.2009
    Beiträge
    62
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    Hi

    was genau meinst Du damit...

    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

  5. #5
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard AW: CSS-Positionierung und Browserkompatibilität

    Das können Dir die Leute sagen, die damit versuchen zu arbeiten.

  6. #6
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    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...
    Angehängte Dateien Angehängte Dateien
    Geändert von FaFoo (29.01.2009 um 15:22 Uhr)

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    @ fafoo: passt, allerdings kann ich die lösung spontan nicht nachvollziehen

    hier noch mal meine seite mit relativen positionierungen:
    http://freenet-homepage.de/technarch...ebersicht.html

    wird überall richtig dargestellt... oder?

  8. #8
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    Zitat Zitat von Speedy Beitrag anzeigen
    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.

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    24.05.2007
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    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?

  10. #10
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Positionierung und Browserkompatibilität

    Eine Grafik wäre natürlich noch besser, ja.
    Aber Entitäten sind sowas wie ü für ü.
    http://de.wikipedia.org/wiki/Sonderzeichen#HTML

Ähnliche Themen

  1. CSS Positionierung
    Von JackD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2008, 14:13
  2. CSS Positionierung
    Von daniel8888 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 07.12.2007, 14:22
  3. Positionierung
    Von happychillkroete im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2006, 18:56
  4. Browserkompatibilität
    Von im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.08.2005, 10:54
  5. css positionierung
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.01.2005, 20:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •