verhindern das sich Div-Container überlappen können ?

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

  • verhindern das sich Div-Container überlappen können ?

    Hallo,

    ich habe wieder ein Problem.

    Ich habe in einer Leiste 2 Div-Container. Das erste ist am oberen Rand (top:0px) und das zweite am unteren Rand (bottom:0px).
    Soweit so gut.....
    Jetzt verkleinere ich mein Browserfenster und der untere Container 'bewegt' sich am unteren Rand natürlich mit....
    Wenn sich die Containergrenzen nun kreuzen überlappt der obere den unteren....

    So, jetzt meine Frage:
    wie kann ich mein Div-Container am unteren Rand platzieren das er aber ab einer gewissen höhe des Browserfenster nicht mehr 'mitscrollt' ?

    Das sich die Container sobald sie sich kreuzen nicht weiter überlappen können oder irgendwtwas in dieser Art ?

  • #2
    code? online-beispiel? faux frames?

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

    Kommentar


    • #3
      Code:
      <div style="top:0px; left0px; height:150px; ......">
      .
      .
      </div>
      <div style="bottom:0px; left:0px; height:150px....">
      .
      .
      </div>

      So, wenn die gesamte Browserfensterhöhe auf 300px oder kleiner verändert wird so sind die beiden Div-Bereiche überlappend.
      Ich würde aber gerne wollen das sie schön untereinander bleiben und eben 'abgeschnitten' werden sobald sie nicht mehr ganz untereinander passen...eben wie wenn sie gleich untereinander positioniert gewesen wären.......

      Kommentar


      • #4
        1. position: absolute?
        2. min-height (ff und konsorten), height (ie)
        3. keine absoluten positionsangaben
        4. irgendwann ist eh feierabend mit der richtigen darstellung

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

        Kommentar


        • #5
          Hallo Kroppf,

          danke das du dich bemühst.

          Zu 1:
          position:absolute; habe ich zwar nicht hingeschrieben, was für mich aber als 'selbstverständlich' erschien...ich habe lediglich das hingeschrieben im Beispielcode welches mein Problem verdeutlicht.....

          Zu 2:
          Mit der Höhe habe ich auch keine Probleme.....alle beiden 'Div-Bereiche' bleiben konstant genau so groß (hoch) wie ich sie haben möchte.....
          Ich möchte nur die Position ab der Stelle fixiert haben ab der beide Container untereinander sind............(mir fällt grade ein, ein Tabel als 'Layout'-Gerüst würde dieses Problem lösen.....aber grade von Table als Gestaltung wollte ich mich abwenden)

          Zu 3:
          Nun, Top:0px, bottom:0px; müssen sein, höhe auch....ansonsten weis ich nicht was damit gemeint ist.....

          Zu 4:
          Das wäre sehr schade wo ich mir eigentlich von CSS letzendlich doch mehr versprochen habe nachdem ich das Forum hier früher mal gelesen hatte.....

          Meine allerserste Seite habe ich (kompliziert) mit Tables gestaltet, das war kompliziert und sehr unübersichtlich und starr......dann war CSS und DIV-Container die Lösung...jetzt bin ich ein wenig enttäuscht von all dem.....aber wahrschinelich auchweil ich es selber sicherlich noch gar nicht richtig kann......

          Darum frag ich aber hier


          P.S.

          bei meinem Beispielcode habe ich vergessen anzugeben das der body-tag die css-Eigenschaft height:100%; besitzt........vielleicht weis jetzt einer wie ich mein Problem lösen kann ?

          Kommentar


          • #6
            poste mal mehr code oder stell ein beispiel online. oder, wenn es ein wenig mehr ist 8aber nicht zuviel), häng es als zip-datei an.

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

            Kommentar


            • #7
              Code:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
              "http://www.w3.org/TR/html4/loose.dtd">
              <html>
                <head>
                  <link rel="stylesheet" type="text/css" href="browser.css">
                  <title>blablabla.....</title>
                </head>
                <body>
                  <div class="lefttop">
                    <!--Inhalt oberer Container (Navigationsleiste)-->
                  </div>
                  <div class="leftbottom">
                    <!--Inhalt unterer Container (sonstige Info)-->
                  </div>
                </body>

              hier jetzt der entsprechende Teil aus der CSS-Datei:

              Code:
              body	{ font-family:Verdana, Times, Sarif; font-size:12pt; color:#000000; height:100%; 
              margin:0px; padding:0px; }
              
              div.lefttop 	{ position:absolute; top:60px; left:8px; width:190px; height:299px; 
              overflow:auto; }
              
              div.leftbottom	{ position:absolute; bottom:0px; left:0px; width:198px; height:105px; 
              text-align:center; font-weight:bold; font-size:8pt; }
              Also, mein body hat 100% höhe (also die gesammte Browserhöhe).
              Ein Div-Container ist oben links positioniert mit left:0px, top:60px.
              Der zweite Div-Container ist unterhalb des ersten positioniert, also auch left:0px, aber ganz unten am Rand mit bottom:0px.

              Sieht so ganz ok aus und soll so auch sein.....wenn ich nun eine größere Auflösung einstelle und meine Seite sehr hoch wird, passt sich der untere Div-Container dennoch immer am untersten linken Rand an.

              Das Problem dabei ist aber: wenn ich das Fenster 'verkleinere' (verkleinerte Fenster <> maximierte Fenster) und die Höhe kleiner wird als die Gesamthöhe der beiden div-Container, so überlappt der obere Container den unteren. Das sieht mies aus.

              Das möchte ich:
              Wenn die Höhe es nicht mehr zulässt beide Container gleichzeitig untereinander anzuzeigen, so soll der untere Container eben abgeschnitten werden (was normalerweise der Fall wäre bei einer festen Positionierung) ANSTATT UNTER den oberen Container zu verschwinden.....

              Ich weis, ist wieder blöd beschrieben, aber was soll ich machen ?

              Der Quellcode erklärt das Problem jetzt aber, denke ich...

              Kommentar


              • #8
                da wirst du nicht viel machen können, außer vielleicht mit einem kruden js-hack. wenn jemand meint, sein fenster so klein ziehen zu müssen, pech gehabt.

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

                Kommentar


                • #9
                  Setze doch um beide div's ein weiteres div, dem du height:100%; und min-height:was_du_brauchst; gibst.
                  PHP-Code:
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                  "http://www.w3.org/TR/html4/loose.dtd"
                  >
                  <
                  html>
                    <
                  head>
                      <
                  link rel="stylesheet" type="text/css" href="browser.css">
                      <
                  style type="text/css">
                  body    font-family:VerdanaTimesSariffont-size:12ptcolor:#000000; height:100%; 
                  margin:0pxpadding:0px; }

                  div.lefttop     position:absolutetop:60pxleft:8pxwidth:190pxheight:299px
                  overflow:autoborder:1px solid blue; }

                  div.leftbottom    position:absolutebottom:0pxleft:0pxwidth:198pxheight:105px
                  text-align:centerfont-weight:boldfont-size:8ptborder:1px solid red; }
                  div.wrapper {position:absoluteborder:1px solid black;  height:100%; min-height:460pxwidth:100%;}
                  </
                  style>
                      <
                  title>blablabla.....</title>
                    </
                  head>
                    <
                  body>
                     <
                  div class="wrapper">
                      <
                  div class="lefttop">
                       
                  Inhalt oberer Container (Navigationsleiste)
                      </
                  div>
                      <
                  div class="leftbottom">Inhalt unterer Container (sonstige Info)</div>
                     </
                  div>
                    </
                  body
                  brauchst dann wohl noch einen Würgaround für IE wg. min-height; aber für FF siehst jut aus
                  "I don't want to belong to any club that would accept me as a member."

                  Groucho Marx

                  Kommentar


                  • #10
                    Original geschrieben von mcmurphy
                    brauchst dann wohl noch einen Würgaround für IE wg. min-height; aber für FF siehst jut aus
                    expression böte sich an, siehe linkbeispiele.

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

                    Kommentar

                    Lädt...
                    X