CSS: relative Positionierung von DIVs

[chrizz]

Ahoi allerseits,

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.

Der derzeitige Stand und ein Scribble, wie es eigentlich aussehen soll, findet ihr hier:
IST-Stand:
https://temp.aquarelle-acrylbilder.de/template.html

Soll (Scribble)
https://temp.aquarelle-acrylbilder.de/scribble.jpg

für Ratschläge, Tipps usw. schonmal ein herzliches Dankeschön!
Chrizz

[t-rex]

Hi,

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.

Sonnige Grüsse
HaPe

[chrizz]

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

schönen Tag!
Chrizz

[t-rex]

selbstverständlich

[chrizz]

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.

danke nochmal für die hilfe!

[t-rex]

Freut mich geholfen zu haben

und viel Erfolg mit Deinem Projekt!