nicht angemeldet
DIV Layout - Rahmen verschieben sich
Hallo zusammen,
Ich habe ein Problem mit einem CSS Layout. Und zwar hängt das ganze am content. Wenn dieser Inhalt bekommt wird er um den Inhalt größer. Und um genau die gleiche Größe wird foot_of_site nach unten verschoben.
Die Frage ist nun, wie kann ich ohne JavaScript diese Verhalten vermeiden?
<html>
<head>
<title>Layout</title>
<style type="text/css">
#whole_site {
position : absolute;
top : 0px;
left : 50%;
width : 800px;
margin-left : -400px;
background-color: #ff0000;}
#banner {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 140px;
border-left: 0px;
border-top: 0px;
border-right: 0px;
background-color: #00ff00;}
#content_of_site {
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
width: 800px;
background-color: #00ffff;}
#navigation{
position: relative;
top: 0px;
left: 0px;
width: 140px;
height: 300px;
background-color: #0000ff;}
#content{
position: relative;
top: -300px;
left: 145px;
width: 655px;
padding-bottom: 0px;
background-color: #ff00ff;}
#foot_of_site {
position: relative;
bottom: 0px;
left: 0px;
width: 800px;
height: 100px;
background-color: #ffff00;}
</style>
</head>
<body>
<div id="whole_site">
<div id="banner"></div>
<div id="content_of_site">
<div id="navigation"></div>
<div id="content">s<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>g</div>
</div>
<div id="foot_of_site">fbdbyxvc<br>lih</div>
</div>
</body>
</html>
-
Ich habe ein Problem mit einem CSS Layout. Und zwar hängt das ganze am content. Wenn dieser Inhalt bekommt wird er um den Inhalt größer. Und um genau die gleiche Größe wird foot_of_site nach unten verschoben.
Die Frage ist nun, wie kann ich ohne JavaScript diese Verhalten vermeiden?
indem du weitgestgehend auf position verzichtest und anstelle dessen besser die float-eigenschaft nutzt
auch zum zentrieren solltest du lieber margin, position: absolute ist dafür (in deiner verwendung) gänzlich ungeeignet
-
Ich habe ein Problem mit einem CSS Layout. Und zwar hängt das ganze am content. Wenn dieser Inhalt bekommt wird er um den Inhalt größer. Und um genau die gleiche Größe wird foot_of_site nach unten verschoben.
Die Frage ist nun, wie kann ich ohne JavaScript diese Verhalten vermeiden?
indem du weitgestgehend auf position verzichtest und anstelle dessen besser die float-eigenschaft nutztauch zum zentrieren solltest du lieber margin, position: absolute ist dafür (in deiner verwendung) gänzlich ungeeignet
Ich habs, danke, der Tip war gut. Nur die zentrierung habe ich weiter über Position:absolute, da ich nicht heraus bekommen habe wie das ohne gehen soll.
<html> <head> <title>Layout</title> <style type="text/css"> #whole_site { position : absolute; top : 0px; left : 50%; width : 800px; margin-left : -400px; background-color: #ff0000; padding-bottom: 100px;} #banner { width: 800px; height: 140px; border-left: 0px; border-top: 0px; border-right: 0px; background-color: #00ff00;} #content_of_site { width: 800px; background-color: #00ffff;} #navigation{ width: 140px; height: 300px; background-color: #0000ff;} #content{ float: right; width: 655px; background-color: #ff00ff;} #foot_of_site { position: absolute; bottom: 0px; width: 800px; height: 100px; background-color: #ffff00;} </style> </head> <body> <div id="whole_site"> <div id="banner"></div> <!--div id="content_of_site"--> <div id="content">s<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>gsgs<br>gs<br>gs<br>gs<br>gs<br>gs<br>gsgs<br></div> <div id="navigation">df</div> <!--/div--> <div id="foot_of_site">fbdbyxvc<br>lih</div> </div> </body> </html>-
Ich habs, danke, der Tip war gut. Nur die zentrierung habe ich weiter über Position:absolute, da ich nicht heraus bekommen habe wie das ohne gehen soll.
mit einem beideitigen automatischen aussenabstand
und einen entsprechenden doctype solltest du einfügen, sonst wird das im internet explorer nix mit der zentrierung
-
-
-
Hi,
Und um genau die gleiche Größe wird foot_of_site nach unten verschoben.
Ahem... was wäre denn das gewünschte Verhalten?
Um einen Footer so zu positionieren, dass er immer am unteren Browserfensterrand klebt, aber dennoch mitwächst, wenn der Inhalt grösser wird, musst Du diesen absolut(bottom:0) positionieren. Sein Elternelement muss unterhalb body liegen und min-height:100% bekommen (ie6 per conditionals height:100%). body muss auf height:100% gesetzt sein. Die Contentelemente müssen dann ein bottom-padding bekommen, um den Footer nicht zu überlagern. So sollte es klappen, falls ich nix vergessen habe...<html>
niemals ohne ein Doctype, dass Browser in den Standard-Modus versetzt, sonst musst Du mit Chaos rechnen.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
der gewünschte Effekt wäre, dass der Footer sich schon nach unten verschiebt wenn der Content größer wird, allerdings wird auch das Div größer in dem sich content und die navigation befinden. Siehe Grafik. Der Cyan Bereich sollte eigentlich nur dann wachsen, wenn der Magentabereich an dessen Ende stößt und nicht schon vorher.
Das die Seite hinterher größer wird und man scrollen muss ist gewünscht.
Hi,
Und um genau die gleiche Größe wird foot_of_site nach unten verschoben.
Ahem... was wäre denn das gewünschte Verhalten?
Um einen Footer so zu positionieren, dass er immer am unteren Browserfensterrand klebt, aber dennoch mitwächst, wenn der Inhalt grösser wird, musst Du diesen absolut(bottom:0) positionieren. Sein Elternelement muss unterhalb body liegen und min-height:100% bekommen (ie6 per conditionals height:100%). body muss auf height:100% gesetzt sein. Die Contentelemente müssen dann ein bottom-padding bekommen, um den Footer nicht zu überlagern. So sollte es klappen, falls ich nix vergessen habe...<html>
niemals ohne ein Doctype, dass Browser in den Standard-Modus versetzt, sonst musst Du mit Chaos rechnen.Gruesse, Joachim
-
der gewünschte Effekt wäre, dass der Footer sich schon nach unten verschiebt wenn der Content größer wird, allerdings wird auch das Div größer in dem sich content und die navigation befinden. Siehe Grafik. Der Cyan Bereich sollte eigentlich nur dann wachsen, wenn der Magentabereich an dessen Ende stößt und nicht schon vorher.
meinen post hast du gelesen?
was du suchst ist übrigens idr nicht praktikabel, eine am unteren viewport klebende fusszeile ist etwa wie eine fusszeile auf endlospapier
aber wenn du dennoch willst, viel spass
-
der gewünschte Effekt wäre, dass der Footer sich schon nach unten verschiebt wenn der Content größer wird, allerdings wird auch das Div größer in dem sich content und die navigation befinden. Siehe Grafik. Der Cyan Bereich sollte eigentlich nur dann wachsen, wenn der Magentabereich an dessen Ende stößt und nicht schon vorher.
meinen post hast du gelesen?
was du suchst ist übrigens idr nicht praktikabel, eine am unteren viewport klebende fusszeile ist etwa wie eine fusszeile auf endlospapier
aber wenn du dennoch willst, viel spass
Doch habe ich, und ich probiere das gleich einmal aus.
Der Link funktioniert übrigens nicht-
Doch habe ich, und ich probiere das gleich einmal aus.
Der Link funktioniert übrigens nichtdefiniere "funktioniert nicht" - ich kann nichts dergleichen feststellen
-
Doch habe ich, und ich probiere das gleich einmal aus.
Der Link funktioniert übrigens nichtdefiniere "funktioniert nicht" - ich kann nichts dergleichen feststellen
Zu dem Zeitpunkt als ich ihn anklickte war dort ein "Seite nicht gefunden".
-
-
-
-
Hi,
der gewünschte Effekt wäre, dass der Footer sich schon nach unten verschiebt wenn der Content größer wird, allerdings wird auch das Div größer in dem sich content und die navigation befinden.
Das hast du dir mit der relativen Positionierung so eingebrockt.
Die verschiebt ein Element gegenueber seiner Normalposition, und belaesst dabei den urspruenglichen Platzbedarf des Elements reserviert.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Suit hats ja in seinem Post auch schon erwähnt, dass ich am besten ganz darauf verzichte.
Zumindest verstehe ich jetzt warum der das verschiebt, gedacht habe ich mir das schon.
Mit einer absoluten Positionierung geht das auf jeden Fall gar nicht, denn dann liegt alles untereinander, ungeachtet der Verschachtelung.
Danke
Hi,
der gewünschte Effekt wäre, dass der Footer sich schon nach unten verschiebt wenn der Content größer wird, allerdings wird auch das Div größer in dem sich content und die navigation befinden.
Das hast du dir mit der relativen Positionierung so eingebrockt.
Die verschiebt ein Element gegenueber seiner Normalposition, und belaesst dabei den urspruenglichen Platzbedarf des Elements reserviert.MfG ChrisB
-
-
-
<html>
niemals ohne ein Doctype, dass Browser in den Standard-Modus versetzt, sonst musst Du mit Chaos rechnen.umgekehrt, ohne doctype gibts idr quirksmode
-
Hi,
niemals ohne ein Doctype, dass Browser in den Standard-Modus versetzt, sonst musst Du mit Chaos rechnen.
umgekehrt, ohne doctype gibts idr quirksmode
Eben, deshalb "niemals ohne".
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
niemals ohne ein Doctype, dass Browser in den Standard-Modus versetzt, sonst musst Du mit Chaos rechnen.
Eben, deshalb "niemals ohne"wobei der satz nicht so ganz deutsch ist - entweder man interpretiert das "dass" als "dass" und der satz ist äusserst bömisch oder man intepretiert "dass" als tippfehler und ersetzt es durch "welcher den" ;)
-
Hi,
wobei der satz nicht so ganz deutsch ist - entweder man interpretiert das "dass" als "dass" und der satz ist äusserst bömisch oder man intepretiert "dass" als tippfehler und ersetzt es durch "welcher den" ;)
es ist unglaublich, dass so ein "s", das dort nicht stehen sollte, bei Dir derartige Hirnströme in Gang setzt.
Ich hoffe, wenigstens bei diesem Satz habe die "s" gepasst ;-)
Gruesse, Joachim
--
Am Ende wird alles gut.-
Ich hoffe, wenigstens bei diesem Satz habe die "s" gepasst ;-)
_s_uit hofft das doch :p
-
-
-
-
-
