nicht angemeldet
"clear" cleart nicht
hi,
ich hätte gern für meine Homepage so ein nettes mehrspaltiges Layout mit Footer wie auf http://de.selfhtml.org/css/layouts/mehrspaltige.htm vorgestellt. Für den Footer wird dabei "clear:both" verwendet. Nun steht mein Footer allerdings irgendwo oben und nicht ganz unten, wie er sollte.
Hab ich irgendwas übersehen/falsch gemacht? Dabke für Eure Hilfe im Vorhinein!
Matthias
der Code:
<p style="position:absolute; left:0px; top:0px; width:200px; height=500px; border:3px solid #FFCC99;">links oben</div>
<p style="position:absolute; left:200px; top:0px; width=100px; height:600px; border:3px solid #999999;">Inhalt</div>
<p style="clear: both; height:30px; border:3px solid #f00;">footer</p>
-
<p style="position:absolute; left:0px; top:0px; width:200px; height=500px; border:3px solid #FFCC99;">links oben</div>
<p style="position:absolute; left:200px; top:0px; width=100px; height:600px; border:3px solid #999999;">Inhalt</div>
Da ist ja nichts "gefloatet", warum sollte "clear" was bewirken??
-
ok, danke Euch beiden erst mal! Hab den Code nun so verändert, dass ich 1) position:relative und 2) float verwende. Sieht im IE super aus, jetzt hab ich aber ein neues Problem mit Netscape: Wenn im Inhalts-Feld sehr viel Text steht (also über die Länge der Navigationsleiste hinausgehend), floatet er mir den Text um die Navigationsleiste herum - sieht nicht so toll aus. Hat jemand eine Idee, wie ich ihm das abstell?
lg, Matthías
der neue Code:
<div style="position:relative; left:0px; top:10px; width:200px; height:500px; border:3px solid #FFCC99; float:left; margin:0px";>links oben</div>
<div style="position:relative; left:0px; top:10px; height:600px; border:3px solid #999999; margin:0px;">Inhalt</div><div style="position:relative; clear: both; height:30px; border:3px solid #f00; margin:50px 0px">footer</div>
-
Hallo,
der neue Code:
<div style="position:relative; left:0px; top:10px; width:200px; height:500px; border:3px solid #FFCC99; float:left; margin:0px";>links oben</div>
<div style="position:relative; left:0px; top:10px; height:600px; border:3px solid #999999; margin:0px;">Inhalt</div><div style="position:relative; clear: both; height:30px; border:3px solid #f00; margin:50px 0px">footer</div>
Bitte entferne erstmal position:relative und die unsinnigen Höhen und Breitenangaben. Wie kommst du darauf, dass der Inhalt jetzt 600px hoch ist? Dann lässt du die beiten oberen <div>s floaten. Sonst bringt clear nämlich garnichts. Und dann machst du den margin-left vom Inhalt so groß, dass der Inhalt neben der Navigation bleibt.
Jonathan
-
Und dann machst du den margin-left vom Inhalt so groß, dass der Inhalt neben der Navigation bleibt.
Wozu denn das?
-
hi,
Und dann machst du den margin-left vom Inhalt so groß, dass der Inhalt neben der Navigation bleibt.
Wozu denn das?
Weil das das "Problem" behebt, nach dessen Lösung Matthias gerade eben gefragt hatte.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Und dann machst du den margin-left vom Inhalt so groß, dass der Inhalt neben der Navigation bleibt.
Wozu denn das?
Weil das das "Problem" behebt, nach dessen Lösung Matthias gerade eben gefragt hatte.
gruß,
wahsagaAlso so:
<div style="height:600px; border:3px solid #999999; margin-left:200px;">Inhalt</div>Bewirkt nur das sich das Inhalts-Div um 200px vom linken Div entfernt. Oder habe ich da was missverstanden?
-
hi,
<div style="height:600px; border:3px solid #999999; margin-left:200px;">Inhalt</div>
Bewirkt nur das sich das Inhalts-Div um 200px vom linken Div entfernt. Oder habe ich da was missverstanden?
Letzteres.
Es bewirkt, dass das mit display:block dargestellte Div einen Abstand von 200px vom linken Rand des Inhaltsbereiches seines Vorfahrenelementes einhält.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
machmal ist weniger (Code) mehr ;-)
ich denk, ich kriegs jetzt hin - danke für Eure Hilfe!lgm
hi,
<div style="height:600px; border:3px solid #999999; margin-left:200px;">Inhalt</div>
Bewirkt nur das sich das Inhalts-Div um 200px vom linken Div entfernt. Oder habe ich da was missverstanden?
Letzteres.
Es bewirkt, dass das mit display:block dargestellte Div einen Abstand von 200px vom linken Rand des Inhaltsbereiches seines Vorfahrenelementes einhält.
gruß,
wahsaga
-
-
-
-
Hallo,
Wozu denn das?
OK, es hängt davon ab, was gefloatet werden soll. Wenn der Inhalt nicht gefloatet ist, behebt das das angesprochene Problem, wenn der Inhalt auch gefloatet ist führt es tatsächlich nur zu nem Abstand zwischen den beiden Floats.
Jonathan
-
-
-
-
-
der Code:
<p style="position:absolute; left:0px; top:0px; width:200px; height=500px; border:3px solid #FFCC99;">links oben</div>
<p style="position:absolute; left:200px; top:0px; width=100px; height:600px; border:3px solid #999999;">Inhalt</div>
<p style="clear: both; height:30px; border:3px solid #f00;">footer</p>
Hi
Wenn Du absolute positionierst nimmst Du die beiden ersten Absätze aus dem Fluß. Der letzte Absatz rutscht damit automatisch nach oben und ein clear hat keine Bedeutung...
NDY