treziman: probleme mit div-bereichen

SELF-Forum

probleme mit div-bereichen

treziman
– Informationen zu den Bewertungsregeln

Hallo,

melde mich mal wieder mit einem Problem, bei dem inzwischen der Meinung bin, dass es so, wie ich es möchte, nicht geht. Schaut mal.

Es geht um die Bereiche f4, f6 und ggf. main, welche frames ersetzen sollen. Ich hatte es zuerst mit frames, wobei es sehr gut aussah, stiess dabei aber auf andere Probleme. Daher jetzt mal mit divs.
Also, der Bereich f4 soll sich, je nach Browserauflösung, nach unten ausdehnen. Der Bereich f6 soll, mit einer festen Grösse versehen, immer exakt darunter "kleben" und sichtbar bleiben. Dabei wäre es egal, ob die divs verschachtelt, untereinander oder sonstwie angeordnet sind. JEDE bisher probierte Kombination hat nicht geklappt. Zum Testen benutze ich die Auflösungen 1024 x 768 und 1280 x 1024. Alles nach links verschoben ist dabei richtig.
Hier mal mein Code an der Stelle, an der ich die Probiererei abgebrochen habe: Dateiname="test.php"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
<!-- html, body { margin:0; padding:0; height:100%; background-color:black; } -->
div { border:1px solid #888; }
#f1 { position:fixed; top:0px; left:0px; width:499px; height:79px; background-color:black; background-image:url(banner1.gif); background-repeat:no-repeat; }
#f2 { position:fixed; top:0px; left:500px; width:479px; height:79px; background-color:black; }
#f3 { position:fixed; top:80px; left:0px; width:149px; height:350px; background-color:black; background-image:url(bilder/test1.gif); overflow:hidden;}
#f5 { position:fixed; top:80px; left:829px; width:149px; height:100%; background-color:black; background-image:url(bilder/test2.gif); overflow-x:hidden; overflow-y:auto; min-height:350px; background-repeat:no-repeat; }

#f4 { position:fixed; top:80px; left:150px; width:679px; height:80%; background-color:black; background-image:url(bilder/test1.gif);  overflow-x:hidden; overflow-y:auto; min-height:430px; background-repeat:no-repeat; }

#f6 { position:absolute; bottom:80px; left:150px; width:680px; height:80px; background-color:black; }

#main { position:fixed; top:80px; left:150px; width:679px; height:60%; background-color:black; overflow:hidden; min-height:430px; }

</style>
</head><body>

<div id="f1">frame1</div>
<div id="f2">frame2</div>
<div id="f3">frame3</div>

<!--   <div id="main"> -->

<div id="f4">frame4
<?php
for ($x=0;$x<41;$x++) {
echo"TEST ".$x."<br>";
                      }
?>
</div>

<!--   </div> -->
<!--
<div id="f6">
<?php
//include("support/support.php");
?>
</div>
-->
<div id="f5">frame5</div>

</body></html>

Habe praktisch alles schon probiert. Ohne Kommentare, sämtliche height-Angaben usw.
Meine Frage nun, geht das überhaupt mit divs, wie ich mir das vorstelle? Lösungen mit Javascript kommen nicht in Frage!
Die Datei support.php enthält Links zum Impressum, AGB usw., angeordnet in Reihe von links nach rechts.

Dank und Gruss
Thorsten

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. probleme mit div-bereichen

    tolonath
    – Informationen zu den Bewertungsregeln

    Weiss nicht ob ich es richtig verstanden hab was du möchtest, aber versuche das ...

    #f4 { position:fixed; top:80px; left:150px; width:679px; bottom:80px; background-color:yellow; background-image:url(bilder/test1.gif);  overflow-x:hidden; overflow-y:auto; min-height:430px; background-repeat:no-repeat; }  
  
#f6 { position:absolute; bottom:0px; left:150px; width:680px; height:80px; background-color:green; }

    in #f4 height zu bottom verändert
    in #f6 bottom auf 0% gesetzt

    Gruß
    Tolonath

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit div-bereichen

      treziman
      – Informationen zu den Bewertungsregeln

      Hallo Tolonath,

      danke für Deine Antwort.

      Bottom 0% hatte ich noch nicht versucht, klappt aber auch nicht. Ich möchte nochmals genauer beschreiben, wie es aussehen soll.

      Der Bereich f4 ist der einzigste (ausser f5, aber da gibts das Problem nicht, weil darunter nichts kommt), der sich in der Höhe verändert. Je nach Menge des Inhalts und Auflösung des Browserfensters. Bei zuviel Inhalt wird gescrollt und auch nur in f4 erscheint ein Scrollbalken - klappt.
      f4 soll sich aber nicht ganz bis an den unteren Rand ausdehnen, weil ja noch der Bereich f6 mit den Links kommt. Dieser in seiner Form nicht veränderbare Bereich soll immer direkt unter f4 sein, egal wie hoch f4 ist. Quasi also mit dem Inhalt von f4 abschliessen - klappt nicht.
      Ich habe das beim Probieren fast geschafft, nur verschwinden die letzten Textzeilen von f4 dann hinter f6. Überschneiden dürfen sich die beiden nicht, man muss schon alles lesen können.
      Ich habe im Net gesehen, dass es geht. Leider konnte ich den Quellcode nicht sehen, es war eine php-Datei. Und in der Browserleiste stand etwas von "loadframe". Mit frames gehts ja auch.

      Gruss
      Thorsten

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme mit div-bereichen

        tolonath
        – Informationen zu den Bewertungsregeln

        Meinst du so? ö.ö

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html><head><title>position</title>  
<style type="text/css">  
body { margin:0; padding:0; height:100%; background-color:grey; }  
#f1 { position:absolute; width:499px; height:79px; background-color:red;}  
#f2 { position:absolute; width:479px; height:79px; left:499px; background-color:green; }  
#f3 { position:absolute; width:149px; height:350px; top:79px; background-color:blue; }  
#f45 { position:absolute; top:79px; left:149px; }  
#f4 { width:679px; min-height:430px; background-color:yellow; }  
#f5 { width:680px; height:80px; background-color:green; }  
#f6 { position:fixed; width:149px; bottom:0px; top:79px; left:828px; background-color:red; min-height:350px;}  
</style>  
</head>  
<body>  
<div id="f1">frame1</div>  
<div id="f2">frame2</div>  
<div id="f3">frame3</div>  
<div id="f45">  
  <div id="f4">frame4</div>  
  <div id="f5">frame5</div>  
</div>  
<div id="f6">frame6</div>  
</body>  
</html>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Probleme mit div-bereichen

          treziman
          – Informationen zu den Bewertungsregeln

          Fast,

          hier Dein geänderter Code:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
          <html><head><title>position</title>
          <style type="text/css">
          body { margin:0; padding:0; height:100%; background-color:grey; }
          #f1 { position:fixed; width:499px; height:79px; background-color:red;}
          #f2 { position:fixed; width:479px; height:79px; left:499px; background-color:green; }
          #f3 { position:fixed; width:149px; height:350px; top:79px; background-color:blue; }
          #f45 { position:absolute; top:79px; left:149px; }
          #f4 { width:679px; min-height:430px; background-color:yellow; }
          #f5 { width:680px; height:80px; background-color:green; }
          #f6 { position:fixed; width:149px; bottom:0px; top:79px; left:828px; background-color:red; min-height:350px;}
          </style>
          </head>
          <body>
          <div id="f1">frame1</div>
          <div id="f2">frame2</div>
          <div id="f3">frame3</div>
          <div id="f45">
            <div id="f4">frame4
          <?php
          for ($x=0;$x<45;$x++) {
          echo"TEST ".$x."<br>";
                               }
          ?>
          </div>
            <div id="f5">frame5</div>
          </div>
          <div id="f6">frame6</div>
          </body>
          </html>

          So sollte es aussehen, aber NUR f4 sollte einen Scrollbalken haben, und f6 steht fest, darf nicht mitscrollen, immer sichtbar am unteren Rand von f4, egal wie weit sich f4 nach unten ausdehnt. f1,f2,f3,f45 und f5 müssen position:fixed sein.

          Gruss
          Thorsten

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Probleme mit div-bereichen

            tolonath
            – Informationen zu den Bewertungsregeln

            Dann fixiere alles ausser f4.

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html><head><title>position</title>  
<style type="text/css">  
body { margin:0; padding:0; height:100%; background-color:grey; }  
#f1 { position:fixed; width:499px; height:79px; background-color:red;}  
#f2 { position:fixed; width:479px; height:79px; left:499px; background-color:green; }  
#f3 { position:fixed; width:149px; height:350px; top:79px; background-color:blue; }  
#f4 { position:absolute; width:679px; min-height:700px; top:79px; left:149px; background-color:yellow; }  
#f5 { position:fixed; width:680px; height:80px; bottom:0px; left:149px; background-color:green; }  
#f6 { position:fixed; width:149px; bottom:0px; top:79px; left:828px; background-color:red; min-height:350px;}  
</style>  
</head>  
<body>  
<div id="f4">frame4</div>  
<div id="f1">frame1</div>  
<div id="f2">frame2</div>  
<div id="f3">frame3</div>  
<div id="f5">frame5</div>  
<div id="f6">frame6</div>  
</body>  
</html>
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Probleme mit div-bereichen

              treziman
              – Informationen zu den Bewertungsregeln

              So meine ich es ja nicht. Lass einfach mal alles weg, ausser f4 und f6. Der User stellt eine Auflösung von 1280 x 1024 ein.

              ('x' = Browserfenster, '-' + '|' = div-Rahmen)

              Anzeige soll sein:
              xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
              x---------------------       x f4 hat min-height, damit f6 nicht zu weit
              x| f4; wenig text    |       x nach oben rutscht
              x|                   |       x
              x|                   |       x
              x---------------------       x
              x|      f6           |       x
              x---------------------       x
              x                            x
              x                            x
              xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

              Anzeige bei viel text in f4:
              xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
              x---------------------       x f4 hat nun soviel text nach unten, dass darin
              x| f4; viel text     |       x ein scrollbalken erscheint. f6 bleibt jedoch
              x| text              |       x JETZT am unteren Browserrand stehen, scrollt
              x| text              |       x nicht mit, ist quasi jetzt fixed. Nur f4
              x| text              |       x scrollt, aber nur bis zum oberen Rand von f6
              x| text              |       x
              x---------------------       x
              x       f6           |       x
              x---------------------       x
              xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

              <div id="f46"> (hat feste Position und variable Höhe)
                 <div id="f4">frame4</div> (hat variable Höhe aber feste Position)
                 <div id="f6">frame6</div> (hat feste Höhe und soll sich am Ende von f4 ausrichten; wenn f4 aber zu lang nach unten, stehenbleiben am unteren Browserrand)
              </div>

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Probleme mit div-bereichen

                tolonath
                – Informationen zu den Bewertungsregeln

                Wieso nicht gleich so? xD
                max-height und overflow:auto müssten jetzt daraus das machen was du brauchst ;)

                #f4 { width:679px; max-height:650px; min-height:430px; background-color:yellow; overflow:auto;}  
#f5 { width:680px; height:80px; background-color:green; }
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Probleme mit div-bereichen

                  treziman
                  – Informationen zu den Bewertungsregeln

                  Hallo tolonath,

                  das bringt auch nicht das gewünschte Ergebnis. Ich habe mich jetzt entschlossen, vorerst, damit ich weiterkomme, folgende Lösung zu nehmen:

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
                  <html><head><title>position</title>
                  <style type="text/css">
                  html, body { margin:0; padding:0; height:100%; background-color:black; }
                  div { border:1px solid #888; }
                  #f1 { position:fixed; top:0px; left:0px; width:499px; height:79px; background-color:black; background-image:url(banner1.gif); background-repeat:no-repeat; }
                  #f2 { position:fixed; top:0px; left:500px; width:479px; height:79px; background-color:black; }
                  #f3 { position:fixed; top:80px; left:0px; width:149px; height:350px; background-color:black; background-image:url(bilder/bg4.gif); overflow:hidden;}
                  #f5 { position:fixed; top:80px; left:829px; width:149px; background-color:black; background-image:url(bilder/bg4.gif); overflow-x:hidden; overflow-y:auto; min-height:350px; background-repeat:no-repeat; }

                  #f4 { position:fixed; top:80px; left:150px; width:679px; background-color:black; background-image:url(bilder/bg2.gif);  overflow-x:hidden; overflow-y:auto; min-height:350px; max-height:440px; background-repeat:no-repeat; }

                  #f6 { position:fixed; left:150px; width:680px; bottom:0px; background-color:black; }

                  </style>
                  </head><body>

                  <div id="f1">frame1</div>
                  <div id="f2">frame2</div>
                  <div id="f3">frame3</div>

                  <div id="f4">frame4
                  <?php
                  for ($x=0;$x<35;$x++) {
                  echo"TEST ".$x."<br>";
                                        }

                  ?>
                  </div>

                  <div id="f5">frame5</div>

                  <div id="f6">
                  <?php
                  include("support/support.php");
                  ?>
                  </div>
                  </body></html>

                  Dabei ist f6 erstmal ständig am unteren Rand des Browserfensters und f4 ist in der Länge begrenzt.

                  Es ist immer wieder traurig zu sehen, dass sich das Ergebnis eines scriptes anders verhält, als man selbst denkt. Für mich wäre z.B. das Ergebnis von

                  <div id="f46">
                     <div id="f4" ...position:fixed...>frame4</div>
                     <div id="f6" ...position:fixed; bottom:0px; ...>frame6</div>
                  </div>

                  so, dass sich f6 nun fest am unteren Rand von f46 befindet, egal wo dieser Rand auch ist, und nicht am unteren Rand des Browserfensters. Selbst dann nicht, wenn man sämtliche Regeln einhält, wie Elternelement, HTML und BODY.

                  tolonath, nochmals vielen Dank für Deine Mühe!

                  Gruss
                  Thorsten

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Probleme mit div-bereichen

                    treziman
                    – Informationen zu den Bewertungsregeln

                    Hallo,

                    melde mich nochmal mit einem neuen Problem. Ich habe jetzt zwei Dateien: index.php und test.php . Rufe ich die test.php direkt im Browser auf, wird alles korrekt angezeigt. Rufe ich aber zuerst die index.php auf, werden die div-Bereiche untereinander angezeigt. Weiss jemand warum? Ich habe schon mit übergeordneten divs (Elternelementen) experimentiert, bisher ohne Erfolg.
                    Hier mal die scripte:

                    index.php

                    <HTML>
                    <HEAD> <TITLE>testtitel</TITLE>
                    <META http-equiv='content-type' content='text/html; charset=iso-8859-1'>

                    </HEAD>
                    <BODY>

                    <?php
                    include('test.php');
                    ?>

                    </BODY></HTML>

                    test.php

                    <?php

                    ?>
                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                           "http://www.w3.org/TR/html4/loose.dtd">

                    <html><head><TITLE>testtitel</TITLE>
                    <style type="text/css">
                    body { background-color:black; }
                    #f1 { position:fixed; top:0px; left:0px; width:499px; height:79px; background-color:black; background-image:url(banner1.gif); background-repeat:no-repeat; }
                    #f2 { position:fixed; top:0px; left:500px; width:479px; height:79px; background-color:black; background-image:url(bilder/bg1.jpg); background-repeat:no-repeat; }
                    #f3 { position:fixed; top:80px; left:0px; width:149px; height:350px; background-color:black; background-image:url(bilder/bg4.gif); overflow:hidden; background-repeat:no-repeat; }
                    #f5 { position:fixed; top:80px; left:828px; width:149px; background-color:black; background-image:url(bilder/bg3.gif); overflow-x:hidden; overflow-y:auto; min-height:350px; background-repeat:no-repeat; }

                    #haupt { top:80px; left:150px; position:fixed; width:679px; overflow-x:hidden; overflow-y:scroll; min-height:400px; height:auto; }
                    #support { left:150px; width:679px; overflow:scroll; bottom:-80px; position:fixed; }
                    </style>
                    </head><body>

                    <div id='f1'>frame1</div>
                    <div id='f2'>frame2</div>
                    <div id='f3'>frame3</div>
                    <div id='f5'>frame5</div>

                    </body></html>

                    Gruss
                    Thorsten

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Probleme mit div-bereichen

                      Der Martin
                      – Informationen zu den Bewertungsregeln

                      Hi,

                      <HTML>
                      <HEAD> <TITLE>testtitel</TITLE>
                      <META http-equiv='content-type' content='text/html; charset=iso-8859-1'>

                      </HEAD>
                      <BODY>

                      <?php
                      include('test.php');
                      ?>

                      wenn du hier im body nochmal ein vollständiges HTML-Dokument einbindest, geht das natürlich schief - das daraus resultierende Dokument ist kein HTML mehr! Man kann dem Browser nicht übelnehmen, wenn er angesichts eines weiteren html-Elements mit allem Zubehör innerhalb von body Amok läuft ...

                      Nebenbei bemerkt: Es ist üblich, HTML-Tags und -Attribute konsequent klein zu schreiben (in XHTML ist das sogar Pflicht). Das macht den Code auch besser lesbar.

                      So long,
                       Martin

                      --
                      Das einzige Problem beim Nichtstun: Man weiß nie, wann man damit fertig ist.
                      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. Probleme mit div-bereichen

                        treziman
                        – Informationen zu den Bewertungsregeln

                        Hallo Martin,

                        ich habe genau das befürchtet. Ich brauche aber in der test.php ein html-Dokument mit allem drum und dran, weil dies sozusagen die Steuerseite wird. Mal sehen, wie ich das löse.
                        Dann müsste aber der Browser auch bei einem Inhalt von index.php:
                        <?php
                        include("test.php");
                        ?>
                        bereits ein html-Dokument "erkennen". Denn das klappt auch nicht.

                        Ja, normalerweise schreibe ich meinen code klein, habe aber jetzt in der Testphase verschiedene scripte einfach mal aus dem Net kopiert...und hier dann mal so gelassen.

                        Gruss
                        Thorsten

                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. Probleme mit div-bereichen

                          Der Martin
                          – Informationen zu den Bewertungsregeln

                          Hallo,

                          ich habe genau das befürchtet. Ich brauche aber in der test.php ein html-Dokument mit allem drum und dran, weil dies sozusagen die Steuerseite wird. Mal sehen, wie ich das löse.

                          dann solltest du dir erstmal über die Struktur klar werden.
                          Natürlich kannst du ein vollständiges HTML-Dokument includieren, aber dann darf das übergeordnete Script selbst nicht auch nochmal den Rahmen eines HTML-Dokuments drumherumzimmern.

                          Dann müsste aber der Browser auch bei einem Inhalt von index.php:
                          <?php
                          include("test.php");
                          ?>
                          bereits ein html-Dokument "erkennen". Denn das klappt auch nicht.

                          Liegt denn test.php im gleichen Verzeichnis wie das übergeordnete Script?
                          Geht es, wenn du PHP explizit anweist, im gleichen Verzeichnis zu suchen, also "./test.php"?

                          Ciao,
                           Martin

                          --
                          Hannes würfelt abends immer, ob er den Abend mit seiner Frau zuhause verbringt oder in die Kneipe geht. Wenn er eine 6 würfelt, geht er in die Kneipe.
                          Gestern musste er 37mal würfeln.
                          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln

                          1. Probleme mit div-bereichen

                            treziman
                            – Informationen zu den Bewertungsregeln

                            Hallo Martin,

                            Liegt denn test.php im gleichen Verzeichnis wie das übergeordnete Script?
                            Geht es, wenn du PHP explizit anweist, im gleichen Verzeichnis zu suchen, also "./test.php"?

                            Ja, so geht es. Jetzt geht es aber auch mit "test.php". Komisch. Ich habe festgestellt, dass man manchmal beim Testen den Browser komplett schliessen muss, um etwas zu ändern. F5 drücken reicht nicht immer. Vielleicht lags daran.

                            Das ist dann das 3. Mal, dass ich die Struktur ändern muss. Dumm ist nur, dass die test.php eine Zentralfunktion hat und praktisch von jeder anderen Seite angesteuert wird. Mittels Variable wird dann entschieden, was in welchem div-Bereich angezeigt wird. Dazu enthält die test.php (wird später anders heissen) die ganzen stylesheets für die divs. Und die kann man ja nur im head eines Dokuments unterbringen. Es sei denn, ich verlagere die stylesheets in jeden div-Bereich, a la:

                            echo"<div style='.....'>";
                            include ("datei.php");
                            echo"</div>";

                            Also die test.php ohne <html> -, <head> - und <body> - Bereich. So hatte ich es zuerst bei den frames, was auch klappte.
                            Oder kann man stylesheets, die sich in einer separaten Datei befinden, auch anders einbinden?

                            Gruss
                            Thorsten

                            Beitrag melden
                            –
                            Informationen zu den Bewertungsregeln