Elya: Absolut pos. <div> und body margin zanken sich...

Hallo css-freaks,
ich hab mal versucht, ein tabellenarmes Layout zu schreiben... einige grafische Elemente sind absolut oben und links positioniert, z.T. auch übereinandergelagert, und jetzt soll der Inhalt zunächst über body margin-left positioniert werden. Dachte ich. Ich lasse den NN4 erst mal außen vor, für den schreibe ich nachher ein eigenes stylesheet. Aber sobald ich einen body-margin (unten die auskommentierten Zeilen) definiere, fliegen mir die absoluten Elemente um die Ohren, und zwar:

  • im IE 5.5 der #bg2 ist nicht mehr 100 % breit
  • In Opera schiebt sich der #bg1 nach unten.
  • NN6 stellt alles fein dar, wie er soll :) Mal was anderes!

Frage: sind absolute Positionierung und body margin grundsätzlich unvereinbar oder wer spinnt da?

Hier der css-Code:
body {  /*margin-left:180px;
        margin-top:150px;*/
        background-color: #f1f1f1;
        background-image: url(../img/bg/bg_innen.gif);
        background-position: 169px 124px;
        background-repeat: no-repeat
     }

/*header Bild1 */
#bg1 {
     position:absolute;
     left:0px;
     top:0px;
     width:667px;
     height:124px;
     z-index:2;
     }
/*Header Hintergrund repeat (hab noch ein weiteres hg-bild, deshalb diese Krücke)*/
#bg2 {
     position:absolute;
     left:0px;
     top:0px;
     width:100%;
     height:124px;
     z-index:1;
     }

Gruß aus Ehrenfeld,
Elya

  1. Hi, Elya

    Ich kann dein Problem nicht nachvollziehen, bei mir sieht alles gut aus. Kann man sich das mal online ansehen?

    LG Orlando

    1. Hi Orlando,
      da bin ich wieder;
      ich hab's mal online gestellt, ist aber wirklich nur ein erster Entwurf, die Dreamweaver-Scripte kommen noch raus ;-) ging erst mal nur ums Prinzip.

      http://www.visuelya.de/me/ hoffe das klappt jetzt mit dem Linksetzen...

      Vielleicht gibt's doch noch ein klassisches Frame-Layout, so war der Entwurf ursprünglich mal gedacht, sieht man wohl auch.

      Gruß Elya

      1. Hi, Elya

        http://www.visuelya.de/me/

        -> http://www.visuelya.net/me/

        Vielleicht gibt's doch noch ein klassisches Frame-Layout, so war der Entwurf ursprünglich mal gedacht, sieht man wohl auch.

        Vergiss Frames, das geht auch mit Stylesheets. Wenn dich margin und padding im Body stören, nimm es dort heraus und plaziere das DIV mit den Inhalten so, wie du willst.

        Ich möchte dir auch noch </?m=60246&t=10839> und die Antworten empfehlen ;-)

        LG Orlando

        1. Hi Orlando,
          ja danke, ich verfolge die Diskussion schon eine ganze Weile, deshalb ja auch der Vorsatz, es einmal anders zu machen ;-)

          Aber mit so unendlich vielen absolut positionierten <divs> ist's ja auch nicht wirklich elegant. Mal sehen, ich probier noch ein wenig rum.

          Gruß aus Köln, (derzeit voll von Manchester United Fans)

          Elya

  2. hi

    Hier der css-Code:
    body {  /*margin-left:180px;
            margin-top:150px;*/
            background-color: #f1f1f1;
            background-image: url(../img/bg/bg_innen.gif);
            background-position: 169px 124px;
            background-repeat: no-repeat
         }

    /*header Bild1 */
    #bg1 {
         position:absolute;
         left:0px;
         top:0px;
         width:667px;
         height:124px;
         z-index:2;
         }
    /*Header Hintergrund repeat (hab noch ein weiteres hg-bild, deshalb diese Krücke)*/
    #bg2 {
         position:absolute;
         left:0px;
         top:0px;
         width:100%;
         height:124px;
         z-index:1;
         }

    schön, wenn da immer gleich die Frame- und Tabellen-Prediger rauskriechen, wenn ein CSS-Layout nicht 100%ig funzt.

    Es ist klar, dass left:0;top:0; weiterhin die obere Fensterecke meint und nicht die vom <body>?
    sofern du kein html{background-color:} angibst, kannst du statt margin auch padding verwenden, was dann die gleiche Wirkung hat.

    Wober der MSIE5.x manchmal die Werte für width: kriegt, wissen eh die Götter - evtl. besänftigt ihn ja ein html{width:100%;} oder irgendsowas abstruses wieder...