php-resource




Archiv verlassen und diese Seite im Standarddesign anzeigen :
verhindern das sich Div-Container überlappen können ?


 
Master0Blicker
15-01-2007, 22:50 
 
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 ?

 
Kropff
15-01-2007, 22:53 
 
code? online-beispiel? faux frames? (http://barrierefrei.e-workers.de/workshops/fixed/index.html)

gruß
peter

 
Master0Blicker
15-01-2007, 23:18 
 
<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, 23: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, 01: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, 11: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, 13:54 
 
<!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:


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, 14: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, 14:44 
 
Setze doch um beide div's ein weiteres div, dem du height:100%; und min-height:was_du_brauchst; gibst.

<!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, 15: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 (http://jendryschik.de/wsdev/css/fixed/) böte sich an, siehe linkbeispiele.

gruß
peter


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:56 Uhr.