ich bin gerade dabei ein Template zu erstellen und habe dafür vom Designer die entsprechenden Grafiken bekommen. Mein Problem ist, dass das Content-Div sich teilweise über den Header legen muss, da dieser mit ca. 400px sehr hoch ist.
Ich bin jetzt mittlerweile meinen Ziel schon relativ nahe, allerdings verschiebe ich das Content-Div (bzw. das umschließende Div-Element (enthält auch noch ne Sidebar) mit position:relative; und top:-250px; in den Header hinein.
Das Problem dabei:
Ist der Inhalt des Contents "zu ende", folgen noch 250px Freifläche, weil ich das Div ja noch oben geschoben habe. Hat jemand eine Idee, wie man das umgehen kann?
Vielleicht hat ja jemand auch noch eine elegantere Lösung des Problems.
soll der HTML-Header nur für das Header-IMG 400px hoch sein?
Dann gehst Du die Geschichte ein bisschen falsch an. Fixe Positionierung bringt eben meist an anderen Stellen Probleme.
So würde ich an die Sache herangehen.
Der Body bekommt ein Background-IMG (im scribble) Content.gif. Evtl. noch mit der Grundfarbe des Designs.
Um Header, Sidebar und Content kommt ein wrap. Von mir aus mit exakter Breite und das dann zentriert. Dieser content-wrap erhält das Background-IMG (im scribble) Header.gif (no-repeat XXpx XXpx). Als Hintergrundfarbe wird hier die Contenthintergrundfarbe gewählt.
Jetzt kann der Header so hoch sein wie er will.
um Sidebar und Content nebeneinander zu psoitionieren, musst Du nur noch mit float und margin rumspielen.
Der Footer bekommt noch eine feste Farbe und das Ding müsste passen.
Durch die zusätzlichen Farbzuweisungen ist die Seite auch lesbar, auch wenn mal ein IMG auf dem Weg zum User verloren geht.
Guten Morgen und besten Dank erstmal für die Antwort!
Ich werde das mal versuchen umzusetzen... Eine Frage noch:
Kann der Content in der Höhe mit deiner Lösung dynamisch sein? Es kommt im Original dann nämlich mehr Text, als nur der Lückenfüller
allen, denen das gleiche Problem mit der Positionierung zu schaffen macht, kann ich nur sagen, dass es wie oben beschrieben funktioniert hat. Dynamische Anpassung der höhe war damit auch möglich.