AnalphaBestie: absolut positioniertes div mit width: 100%?

Guten abend,

Ich schlage mich schon eine kleine weile lang mit einem problem rum.

Ich baue gerade ein recht einfaches css ayout zusammen bis jetzt klappt auch alles ganz gut.

Eimal gibt es ein kopf-div, was ganz oben ausgerichtet ist.
dann ein navigations div was links liegt und in der mitte soll der inhalt rein. nun möchte ich das inhalts-div von links 150 px ausrichten. allerdings, und hier kommt mein problem, soll es von rechts 10 pixel ausgerichtet sein. ich bekomme das einfach nicht hin.
zumindest nicht so das es in opera mozilla und IE klappt.

ich hab mal das beispiel hochgeladen.
es soll eigentlich genau so aussehen: http://www.ackro.de/test1/
wenn nun nicht genug inhalt da ist sieht es so aus: http://www.ackro.de/test1/?page=login&nav=&secnav=

desweiteren wäre es net wenn ihr mal nen blick auf die css datei werfen könntet: http://www.ackro.de/test1/css/screen.css

irgendwie habe ich das gefühl das man das noch optimieren könnte...

MFG AnalphaBestie

  1. Ei guude wie?

    Ich habe Deine Links mal in Opera 7 und Mozilla 1.2.1 getestet und konnte keine Unterschiede zwischen der "normalen" und der "verunstalteten" Version erkennen.
    Du sagtest, dass das Inhalts-Div nicht breit genug ist, wenn Du zuwenig Content hast? Nun, da eine 4-zeilige PHP-Fehlermeldung Deine "verunstaltete" Seite ziert, liess sich das auch nicht überprüfen. Aber das Problem hat sich doch schon von selbst gelöst, wenn Du mehr als eine Zeile Text pro Seite unterbringst, und das hast Du doch wohl vor, oder?

    LG ausm Hesseland
    Lemmy

    http://www.olison.com

    --
    Realität ist die Illusion, die durch ein zu geringes Maß an Alkohol entsteht...
    1. Ei guude wie?

      Ich habe Deine Links mal in Opera 7 und Mozilla 1.2.1 getestet und konnte keine Unterschiede zwischen der "normalen" und der "verunstalteten" Version erkennen.
      Du sagtest, dass das Inhalts-Div nicht breit genug ist, wenn Du zuwenig Content hast? Nun, da eine 4-zeilige PHP-Fehlermeldung Deine "verunstaltete" Seite ziert, liess sich das auch nicht überprüfen. Aber das Problem hat sich doch schon von selbst gelöst, wenn Du mehr als eine Zeile Text pro Seite unterbringst, und das hast Du doch wohl vor, oder?

      also bei mir ( IE 6 ) reicht die 4-zeilige PHP-fehlermeldung aus um das div nicht bis an den rechten rand zu "strecken" und genau dabei liegt auch das problem...

      naja ich hab mal die fehlermeldung weggemacht ( local funzt das ) und normalen text geschrieben...
      http://www.ackro.de/test1/?page=login&nav=&secnav=
      mozilla macht es richtig, opera 6 und IE 6 machen es falsch.
      ich will halt nen content-div was _immer_ den ganzen freien platzt mit dem rahmen ausfüllt!

      LG ausm Hesseland
      Lemmy

      Mfg Analpha

      1. Ei guude nochemo,

        mozilla macht es richtig, opera 6 und IE 6 machen es falsch.

        Opera 7 macht's auch hier richtig, hab aber gerade gesehen, dass der IE es wie immer versemmelt...

        ich will halt nen content-div was _immer_ den ganzen freien platzt mit dem rahmen ausfüllt!

        Da dürfte es schwierig werden, wenn Du keinen bzw. zu wenig Content hast... Manche Browser interpretieren Dein
        ...
        left: 150px;
        right: 10px;
        ...
        halt folgendermaßen: Beginne mit dem Element mit ID=content 150px von links, und lass es nicht größer werden als bis 10px vom rechten Rand entfernt. Wenn es kleiner ist, ist diese Bedingung erfüllt und damit für manche Browser die Aufgabe erledigt. Wenn Du garnix in das <div> reinschreibst, wird's vermutlich noch nicht einmal angezeigt...
        Eine unelegante Lösung wäre, eine Zeile lang lauter  s zu schreiben, aber wie bereits gesagt, wirst Du wohl _immer_ mehr als eine Zeile Text haben, sodass es niemanden auffallen wird.

        LG ausm Hesseland
        Lemmy

        http://www.olison.com

        --
        Realität ist die Illusion, die durch ein zu geringes Maß an Alkohol entsteht...
        1. Ei guude nochemo,

          mozilla macht es richtig, opera 6 und IE 6 machen es falsch.
          Opera 7 macht's auch hier richtig, hab aber gerade gesehen, dass der IE es wie immer versemmelt...

          ... Schön oder ?

          Naja opera 6 machts wie gesagt auch nicht richtig, und mit dem bin ich zb. noch unterwegs.

          ich will halt nen content-div was _immer_ den ganzen freien platzt mit dem rahmen ausfüllt!
          Da dürfte es schwierig werden, wenn Du keinen bzw. zu wenig Content hast... Manche Browser interpretieren Dein
          ...
          left: 150px;
          right: 10px;
          ...
          halt folgendermaßen: Beginne mit dem Element mit ID=content 150px von links, und lass es nicht größer werden als bis 10px vom rechten Rand entfernt. Wenn es kleiner ist, ist diese Bedingung erfüllt und damit für manche Browser die Aufgabe erledigt. Wenn Du garnix in das <div> reinschreibst, wird's vermutlich noch nicht einmal angezeigt...

          kling logisch, aber deswegen gefällt mir das nicht :(.
          naja ich werd mal versuchen mit irgend nem unsichtbaren element rumzuhantieren. wenn ich  's benutze könnten es auch mehrere zeilen werden je nachdem wie gross das fenster ist, also ist das eigentlich nicht akzeptabel.

          naja mal sehen, danke dir auf jeden fall

          LG ausm Hesseland
          Lemmy

          Mfg Analpha

      2. Hallo AnalphaBestie,

        Du schreibst in deinem Stylesheet:

        #content {
           position: absolute;
           top: 100px;
           left: 150px;
           right: 10px;
           border: 1px solid #CD853F;
        }

        Mit left:..  _und_  right:.. is der MSIE natürlich mal wieder überfordert.

        aber mit dieser alternative funktionierts in IE Opera und Moz.

        #content {
           margin-top:100px;
           margin-right:10px;
           margin-left:150px;
           border:1px solid #CD853F;
        }

        was sich noch optimieren lässt zu
        #content {
           margin:100px 10px 0px 150px;
           border:1px solid #CD853F;
        }

        Grüße aus Nürnberg,
        HarryS

        1. Hallo AnalphaBestie,
          aber mit dieser alternative funktionierts in IE Opera und Moz.

          #content {
             margin-top:100px;
             margin-right:10px;
             margin-left:150px;
             border:1px solid #CD853F;
          }

          was sich noch optimieren lässt zu
          #content {
             margin:100px 10px 0px 150px;
             border:1px solid #CD853F;
          }

          Tag,
          das funktioniert eigentlich sehr gut, allerdings habe ich am ende des dokuments nen ewig langen leeren platz. das ist mehr als unschön. kennste da noch ne lösung ?
          Ich finde es sollte keine scrollbar dasein wenn es nichts zu scrollen gibt.

          Grüße aus Nürnberg,
          HarryS

          Mfg AnalphaBestie

          1. Hallo AnalphaBestie,

            ... allerdings habe ich am ende des dokuments nen ewig langen leeren platz. das ist mehr als unschön. kennste da noch ne lösung ?

            body { margin-top: 0px; margin-bottom: 50%;...
            Wirf mal ersatzlos das ..margin-bottom: 50%;.. raus. Dann sollte es ok sein.

            Ich finde es sollte keine scrollbar dasein wenn es nichts zu scrollen gibt.

            In Moz u. Opera, ist er jetzt weg aber der IE zeigt noch seinen Geisterbalken :(

            Grüße aus Nürnberg,
            HarryS

            1. Tag,

              naja ich hab mich dann doch für die andere variante entschieden. mag unsauberer sein aber da nun mal die mehrheit mit dem IE unterwegs ist, ist die leere mehr als nervig.

              Danke auf jeden fall für eure mühe :)

              Analpha

  2. Moin, Analphabestie!

    Ohne es ausprobiert zu haben:  (*g*)

    body {[...] padding-right:10px; }

    #content { width:100%; margin-left: 200px?; }

    Und das Menu dann _darauf_ legen ... links halt!

    Wenn der IE paddingmäßig mal wieder spinnt, ihm ne eigene kleine
    CSS verpassen ... war ja in letzter Zeit oft genug Thema hier!

    Gruß

    Der Hans