Olaf: "Nachbilden" eines Framesets mit Layern ?!

Hallo zusammen,

ich komme bei folgender Problematik nicht weiter:

Man stelle sich ein Frameset (cols="*,620;*") vor. Die beiden äußeren Frames haben irgendeine Hintergrundfarbe, der mittlere Frame enthält den eigentlichen Content und hat die Hintergrundfarbe Weiß.

Auch, wenn der mittlere Frame nur ein paar Zeilen Text enthält, erstreckt er sich logischerweise mit der Hintergrundfarbe Weiß vom oberen bis zum unteren Fensterrand.

Nun möchte ich dies ohne Frameset mit einem zentral positionierten Layer (width:620) nachstellen. Auch wenn dieser Layer nur wenig Content enthält, soll er sich mit weißer Hintergrundfarbe vom oberen bis zum unteren Fensterrand erstrecken, Scrollbalken sollen nur dann erscheinen, wenn die Content-Menge dies erforderlich macht.

Ich habe nun schon diverse Varianten probiert (z.B. mit einem weißen background-image / width:620px / height:100%), konnte aber nicht das gewünschte Ergebnis erzielen.

Kann dies überhaupt funzen und wenn ja - wie ???

Gruß und Danke :o)

Olaf

  1. Hallo Olaf,

    hast du es schon mal so probiert:
    <div style="width: 620px; height: 100%; overflow: auto; background-color: #fff;">
    Inhalt...
    </div>

    Gruß Gunther

    1. Hallo Gunther,

      ja. Nur leider funzt dies z.B. beim NN 4.7X nicht :o(

      Gruß :o)

      Olaf

      1. Hallo Olaf,

        ja. Nur leider funzt dies z.B. beim NN 4.7X nicht :o(

        Was erwartest du? Wenn du mit CSS arbeitest kann das nur in Browsern richtig dargestellt werden, die CSS auch (zumindest einigermaßen) beherrschen, und da gehört der NS 4 eben nicht dazu.

        Gruß Gunther

        1. Moin!

          So wie du es vorgeschlagen hast, funzt es ausschließlich in Opera 6.x,
          wenn man netterweise noch ein body {height:100%;} hinzufügt, funzt es in
          Opera7 und im IE ... im Moz und in Netscapes funzt es nie, in keiner Version!

          Gruß

          Der Hans

          1. Moin!

            So wie du es vorgeschlagen hast, funzt es ausschließlich in Opera 6.x,
            wenn man netterweise noch ein body {height:100%;} hinzufügt, funzt es in
            Opera7 und im IE ... im Moz und in Netscapes funzt es nie, in keiner Version!

            Gruß

            Der Hans

            Moin, moin!

            Wenn das DIV-Element kein Kind-Element eines anderen Objektes ist, beziehen sich die 100% eh auf den gesamten body-Bereich womit sich dort eine Angabe erübrigt.

            Ich vermute mal, dass dein Problem erst durch die (zusätzliche) Positionierung des DIV-Containers entsteht.
            Getestet habe ich es im MSIE 6 & NS 7 (funzt einwandfrei).

            Poste mal bitte deinen Quelltext - Danke!

            Gruß Gunther

            1. Moin!

              Wenn das DIV-Element kein Kind-Element eines anderen Objektes ist, beziehen sich die 100% eh auf den gesamten body-Bereich womit sich dort eine Angabe erübrigt.

              Ich denke einmal, genau umgekehrt wird ein Schuh draus:
              Solange es keinen Inhalt gibt und der Layer klein ist, gibt es keinen Grund,
              einen Body bis zum unteren Fensterrand zu vermuten.

              Poste mal bitte deinen Quelltext - Danke!

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
              <html>
              <head>
               <title>DIV in Fensterhöhe?</title>
              </head>

              <body style="background-color:black;">

              <div style="width: 620px; height:100%; overflow:auto; background-color:#fff; margin:auto;">Inhalt...</div>

              </body>
              </html>

              Ist jetzt ohne Body-Höhe und mit margin:auto ... letzteres ändert übrigens nix!

              Gruß

              Der Hans

              1. Hallo Hans,

                das liegt an dem Link im Doctype. Ohne klappt's wunderbar... ;-)

                Gruß Gunther

                1. Moin!

                  das liegt an dem Link im Doctype. Ohne klappt's wunderbar... ;-)

                  Bei mir klappt's _ausschließlich_ mit Transitional + kein Link ...

                  ... und dann auch nur im Moz!
                  IE ignoriert dann margin:auto und
                  in Opera7 bleibt der DIV klein.

                  So richtig wir keine Lösung aus der Sache.

                  Falls Olaf noch da ist:
                  Ich glaube, ich habe vor kurzer Zeit gelesen, es ginge nur mit einer Tabelle.
                  Ob's stimmt ???

                  Gruß

                  Der Hans

                  1. Moin!

                    das liegt an dem Link im Doctype. Ohne klappt's wunderbar... ;-)

                    Bei mir klappt's _ausschließlich_ mit Transitional + kein Link ...

                    ... und dann auch nur im Moz!
                    IE ignoriert dann margin:auto und
                    in Opera7 bleibt der DIV klein.

                    Also ein letzter Versuch:

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                    <html>
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                    <title>DIV in Fensterhöhe</title>
                    </head>
                    <body style="height:100%;margin:0px">
                    <div style="width: 620px; height: 100%; overflow: auto; position: absolute; left: 50%; margin-top: 0px; margin-left: -310px; background-color: #aa0000;">
                    Inhalt...
                    </div>
                    </body>
                    </html>

                    Das ist laut W3C "This Page Is Valid HTML 4.01 Transitional!"
                    und es funzt im MSIE 6 und NS 7 (andere Browser habe ich nicht zum Testen).

                    Aber ich würde mal sagen, einen Browser, der das jetzt nicht richtig interpretiert, würde ich auch nicht benutzen... ;-)

                    Gruß Gunther

                    1. Moin!

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                      <title>DIV in Fensterhöhe</title>
                      </head>
                      <body style="height:100%;margin:0px">
                      <div style="width: 620px; height: 100%; overflow: auto; position: absolute; left: 50%; margin-top: 0px; margin-left: -310px; background-color: #aa0000;">
                      Inhalt...
                      </div>
                      </body>
                      </html>

                      Ich mag die Lösung nicht, weil ich dieses Doctype-Gefummel ätzend finde,
                      ABER:
                      Die Lösung funzt in IE6, Moz/Netscape7, Opera6+7 und kommt durch den Vali.
                      Mehr kann man eigentlich nicht erwarten.

                      Olaf, wenn du noch nicht schläfst, hast du eine Lösung!

                      Dir, Gunther, eine ruhige Nacht und Hut ab vor so viel Durchhaltevermögen
                      bei einem Problem, dass nicht das eigene ist.

                      Gruß

                      Der Hans

                      1. Moin!

                        Ich mag die Lösung nicht, weil ich dieses Doctype-Gefummel ätzend finde,
                        ABER:
                        Die Lösung funzt in IE6, Moz/Netscape7, Opera6+7 und kommt durch den Vali.
                        Mehr kann man eigentlich nicht erwarten.

                        Olaf, wenn du noch nicht schläfst, hast du eine Lösung!

                        und das, wo Olaf scheinbar eine für den NS 4.7 gesucht hat... ;-)

                        Dir, Gunther, eine ruhige Nacht und Hut ab vor so viel Durchhaltevermögen
                        bei einem Problem, dass nicht das eigene ist.

                        Danke! Das Gleiche gilt auch für dich, bzw. wünsche ich dir auch Hans.

                        Bis zum nächsten Problem...

                        Gruß Gunther

    2. Hallo Olaf,

      aufgrund des Einwandes von Hans hier noch ein Nachtrag mit Positionierung:

      <body style="margin: 0px;">
      <div style="width: 620px; height: 100%; overflow: auto; position: absolute; left: 50%; margin-top: 0px; margin-left: -310px; background-color: #aa0000;">
      Inhalt...
      </div>

      Diese Methode setzt allerdings immer einen CSS-fähigen Browser voraus!

      Gruß Gunther