nicht angemeldet
CSS und DIVs
Hallo folks,
ich habe folgendes:
<div id="main" style="border:1px solid #FF0000;color:#000000;margin-left:63px;width:962px;background-color:white">
<div id="header" style="position:relative;top:0px;height:245px;"></div>
<div id="middle" style="position:relative;top:-39px;height:253px;"></div>
<div id="footer" style="position:relative;top:-39px;height:26px;"></div>
</div>
Ich wollte dass der middle-DIV etwa 39px auf dem header-DIV kommt. Es funktioniert ja. Ich musste dann den footer-DIV auch hoch machen, damit er direkt hinter den middle-DIV ist.
Das Problem ist aber, dass der Main-DIV 39px nach unten zu hoch ist. Wie erreiche ich, dass der main-div genau die höhe von allen DIV hat und dabei dass mit dem -39px versteht?
-
Ich wollte dass der middle-DIV etwa 39px auf dem header-DIV kommt. Es funktioniert ja. Ich musste dann den footer-DIV auch hoch machen, damit er direkt hinter den middle-DIV ist.
Das Problem ist aber, dass der Main-DIV 39px nach unten zu hoch ist. Wie erreiche ich, dass der main-div genau die höhe von allen DIV hat und dabei dass mit dem -39px versteht?Gar nicht.
Warum brauchst du die relative Verschiebung? Oder anders gesagt: Wieso willst du 39px des Headers hinter anderen Boxen verstecken?mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
der middle-div soll 39px nach unten auf den header-div, weil ich im header-div ein Bild habe und die Inhalten von middle-div sollen auf das Bild.
-
der middle-div soll 39px nach unten auf den header-div, weil ich im header-div ein Bild habe und die Inhalten von middle-div sollen auf das Bild.
Falscher Ansatz.
Stelle diese Inhalte in ein absolut positioniertes Div über das Bild.
Oder trenne jenen Bildteil vom Bild ab, welchen du lediglich als CSS-Background für den Text brauchst.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Na ja so falsch war es nicht. Das Problem habe ich gelöst indem ich für den footer-div, top:0px eingegeben habe. Also so:
<div id="main" style="border:1px solid #FF0000;color:#000000;margin-left:63px;width:962px;background-color:white">
<div id="header" style="position:relative;top:0px;height:245px;"></div>
<div id="middle" style="position:relative;top:-39px;height:253px;"></div>
<div id="footer" style="position:relative;top:0px;height:26px;"></div></div>
aber vielen Dank. ^^
Droom-
Und noch besser, anstatt top:-39px (was die echte Höhe behält) margin-top:-39px (hiermit wird die Höhe neu berechnet) ;-)
Sieht also nun so aus:<div id="main" style="border:1px solid #FF0000;color:#000000;margin-left:63px;width:962px;background-color:white">
<div id="header" style="position:relative;top:0px;margin-top:-39px;height:245px;"></div>
<div id="middle" style="position:relative;top:0px;height:253px;"></div>
<div id="footer" style="position:relative;top:0px;height:26px;"></div></div>
-
-
-
-