Seite 1 von 1

CSS: relative Positionierung von DIVs

Verfasst: 01.12.2008, 23:36
von 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

Verfasst:
von
Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:
  • einzigartige Texte
  • suchmaschinenoptimierte Inhalte
  • eine sinnvolle Content-Strategie
  • Beratung und Umsetzung
Jetzt anfragen: 0511 / 300325-0

Verfasst: 02.12.2008, 07:52
von 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

Verfasst: 02.12.2008, 08:35
von 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

Verfasst:
von

Verfasst: 02.12.2008, 08:43
von t-rex
selbstverständlich :-)

Verfasst: 03.12.2008, 11:02
von 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!
:D

Verfasst: 03.12.2008, 11:16
von t-rex
Freut mich geholfen zu haben :-)

und viel Erfolg mit Deinem Projekt!