Top-Abstand relativ

[Print]

Hallo,

ich möchte mit CSS meine Navigation aufbauen.

Momentan sieht es so aus:

html Seite (interessanter Teil):

<div class="leftnavigation"></div>  
  
  
<div class="headernavigation"></div>  
<div class="maincontent">  
Hier kommt der Text<br /><br /><br /<br /<br />a  
</div>  
  
<div class="bottom"></div>

Der CSS-Code sieht folgendermaßen aus:

div.leftnavigation  
  {  
  background-image:url(images/navigation/left.jpg);  
  height:1036px;  
  width:234px;  
  float:left  
  }  
  
  
div.headernavigation  
  {  
  background-image:url(images/navigation/head.jpg);  
  height:495px;  
  width:666px;  
  left:234px;  
  position:absolute;  
  
  }  
  
  
div.maincontent  
  {  
  top:495px;  
  left:234px;  
  position:absolute;  
  width:666px;  
  background-image:url(images/navigation/mainbg.jpg);  
  background-repeat:repeat-y;  
  }  
  
  
div.bottom  
  {  
  left:234px;  
  position:absolute;  
  width:666px;  
  height:343px;  
  background-image:url(images/navigation/bottom.jpg);  
  } 

Das Problem ist: ich schaff es nicht, dem Bottom-Element einen zum maincontent-Element relativen Wert zuzuweisen.
Das bedeutet, dass es sich einfach an der festgelegten Stelle (im Bsp ganz oben) über das maincontent-Element drüberlegt
Wenn ich "top" in px oder % angeb, bezieht sich das immer auf die komplette Seite und nicht auf den Abstand zu div.maincontent.

Wie kann ich es machen, dass es immer exakt untendran auftaucht, egal wie lange div.maincontent ist?

Greets Print

[Kai345]

[latex]Mae  govannen![/latex]

Das Problem ist: ich schaff es nicht, dem Bottom-Element einen zum maincontent-Element relativen Wert zuzuweisen.
Das bedeutet, dass es sich einfach an der festgelegten Stelle (im Bsp ganz oben) über das maincontent-Element drüberlegt
Wenn ich "top" in px oder % angeb, bezieht sich das immer auf die komplette Seite und nicht auf den Abstand zu div.maincontent.

Wie kann ich es machen, dass es immer exakt untendran auftaucht, egal wie lange div.maincontent ist?

Warum legst du auch die Position mit top gemessen am oberen Ende des Elements fest? Mach es einfach von unten.

Cü,

Kai

[suit]

Warum legst du auch die Position mit top gemessen am oberen Ende des Elements fest? Mach es einfach von unten.

oder verzichte besser ganz auf das unsinnige herumpositionieren mit absoluter positionierung - damit machst du dir das leben nur unnötig schwer

im übrigen orintiert sich die position bei position: absolute; am übergeordneten vorfahrenelement mit einer positionsangabe abweichend von static (relativ zu dessen bezugspunkten (top, right, bottom oder left)

[gelu]

Mach es einfach von unten.

Das dürfte der Normalfall sein ;-)

scnr,
gelu

[Print]

Etwas spät die Antwort, ich hoffe ich bekomme trotzdem noch eine Nachricht:

Warum legst du auch die Position mit top gemessen am oberen Ende des Elements fest? Mach es einfach von unten.

Wenn ich folgendes eingebe

div.bottom  
  {  
  bottom:0px;  
  left:234px;  
  position:absolute;  
  width:666px;  
  height:343px;  
  background-image:url(images/navigation/bottom.jpg);  
  } 

landet der Teil direkt unter div.headernavigation und nicht div.maincontent, obwohl maincontent in der html-datei danach kommt.
Ich nehme an ich mache was falsch, aber was genau?^^

oder verzichte besser ganz auf das unsinnige herumpositionieren mit absoluter positionierung - damit machst du dir das leben nur unnötig schwer

Da komm ich auch nicht so richtig weiter. Gibt es dazu ein besseres Tutorial als die Funktionsreferenz? Bin über Google nicht fundig geworden.