CSS - absolute / relative DIV Positionierung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS - absolute / relative DIV Positionierung

    Hallo,
    ich habe ein simples Design welches ich komplett mit DIVs umgesetzt habe. Es funktioniert auch wunderbar in jedem Browser, außer im IE6. Da aber IE6 Support gewünscht ist und ich keine Idee mehr habe wie ich es im IE 6 zum laufe bekomme frage ich hier mal nach.

    Mein Design sieht wie folgt aus:


    Div 1 ist relativ ausgerichtet, Div 2,3 und 4 haben noch einen großen Hauptcontainer drum, der ebenfalls realtiv ausgerichtet ist und Div Nummer 5 ist auch relativ.

    Div 2,3 und 4 sind auch relativ ausgerichtet und haben einen float (left), so dass sie nebeneinander sind. Hier kurz zur Veranschaulichung die CSS-Definitionen für die mittleren Beriche:

    PHP-Code:
    .content {
        
    positionrelative;
        
    width824px;
    }

    .
    contentLeft {
        
    positionrelative;
        
    width162px;
        
    floatleft;
        
    padding0px 16px;
    }

    .
    contentCenter {
        
    positionrelative;
        
    width451px;
        
    floatleft;
        
    padding0px 12px 0px 12px;
    }

    .
    contentRight {
        
    positionrelative;
        
    width140px;
        
    floatleft;
        
    padding-right7px;

    Mein Problem ist nun, das der IE 6 den rechten div (4) einfach immer unten den ganz linken zieht (2), da er vermutlich anders mit dem margin/padding/border umgeht als die anderen Browser. Hat jemand eine Idee wie ich diesen "Umbruch" verhindern kann?

    Ich hatte schon überlegt die DIVs 2,3 und 4 absolut innerhalb des mittleren Container DIVs zu positionieren, aber dann hätte ich das Problem das meine absoluten DIVs den 5. DIV nicht weiter nach unten schieben würde, wenn der Inhalt zu lang wird

    Meine derzeitige Variante ist, dass der Container um DIV 2,3 und 4 einfach ein wenig breiter ist 834px statt 824px, aber dann ragt natürlich die Hintergrundfarbe an der rechten seite zu weit raus :/

    Hat jemand eine Idee wie ich das Problem lösen kann?

    Viele Grüße,
    EdMolf

  • #2
    schmeiss erst mal den ganzen position-kram raus, der ist überflüssig wie ein kropf. arbeite stattddessen mit margin. und dann verrate uns mal, welche doctype du verwendest hast.

    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      http://www.perun.net/2004/07/04/fehl...-im-boxmodell/
      Simploo CMS - das einfache Webseiten-Bearbeitungsprogramm

      Kommentar


      • #4
        Hallo,
        welchen Wert hat die Position des DIVs, wenn ich die Positionsangabe in der CSS-Datei aus lasse?

        Ich verwende folgenden DOCTYPE:

        PHP-Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
        Danke für den Link, schaue ich mir gleich mal an.


        Edit
        -----

        Ich habe die Position nun komplett rausgenommen und die Abstände per Margin definiert. Leider hat sich an der Ansicht im IE 6 nichts geändert . Der rechte DIV rutscht nach wie vor unter den linken.

        Der Link hat mir leider auch nicht geholfen, da mein Problem trotz doctype immer noch im IE 6 auftritt.
        Zuletzt geändert von EdMolf; 16.04.2009, 10:28.

        Kommentar


        • #5
          der_mittlere_div {
          width: 600xp;
          }
          * html der_mittlere_div {
          width: 550px;
          }

          oder so...

          Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

          bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
          Wie man Fragen richtig stellt

          Kommentar


          • #6
            tippe mal wieder auf die üblichen drei Pixel, die im ie6 zuviel gesetzt werden. spiel mal mit display: inline und height: 1px herum. oft wirkt das auch.

            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar

            Lädt...
            X