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

**Kropff** · 15.01.2007, 21:53

code? online-beispiel? faux frames?

gruß
peter

**Master0Blicker** · 15.01.2007, 22:18

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.......

**Kropff** · 15.01.2007, 22:24

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

**Master0Blicker** · 16.01.2007, 00:06

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 ?

**Kropff** · 16.01.2007, 10:18

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

**Master0Blicker** · 16.01.2007, 12:54

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...

**Kropff** · 16.01.2007, 13:27

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

**mcmurphy** · 16.01.2007, 13:44

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: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; border:1px solid blue; }



div.leftbottom    { position:absolute; bottom:0px; left:0px; width:198px; height:105px; 

text-align:center; font-weight:bold; font-size:8pt; border:1px solid red; }

div.wrapper {position:absolute; border:1px solid black;  height:100%; min-height:460px; width: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

**Kropff** · 16.01.2007, 14:28

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

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