Probleme: Div Positionierung - Layer soll sich in Footer schieben

Lanariel · 20.02.2011

Hallo

Beim werkeln an meiner Homepage bin ich mal wieder auf ein Problem gestoßen und zwar möchte ich einen div Layer mit dem Inhalt der Seite in den Footer überlappen lassen.

Jetzt kriege ich das Ganze aber mit der Positionierung nicht hin. Wenn ich die Top Position ändere ragt der Layer dann zwar in den Footer hinein und überlappt diesen wie gewünscht, jedoch hab ich dann oben den großen Abstand, den ich unten losgeworden bin.

Ist es nicht irgendwie möglich von oben UND unten eine feste Position anzugeben, aber so dass sich der Contentbereich trotzdem noch beliebig in die Länge ziehen lässt, falls der Seiteninhalt mehr Raum benötigt?

Das Layout habe hier mal hochgeladen. Den Footer kann ich ja schlecht kürzen, da ich am Rand noch dieses Blumenmuster habe.

Oder gibt es noch andere Lösungsmöglichkeiten?

Layout:

Quelltext:

<html lang="en">
<head>

<title>naydeene</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #000;
background-color: #5f5e5e;
}

#container
{
margin: 0em auto;
width: 1174px;
text-align: left;
background-color: 5f5e5e;
border: 0px solid black;
background-image: url(content2.gif);
background-repeat: no-repeat;
}

#header { background-image: url(header.gif);
background-repeat: no-repeat;
background-position: 0 0;
position: relative;
height: 261px;

}

#contents
{
margin-left: 151px;
margin-right: 151px;
width: 886px;
padding: 0;
background-color: ffffff;
position:relative;
top:0px;
z-index: 0;
clip: rect(auto,auto,-200,auto);
}

#text
{
margin-left: 20px;
width: 840px;
top:20px;
background-color: red;
position:relative;
z-index: 0;
clip: rect(auto,auto,-200,auto);
overflow: hidden;
}

#footer
{
clear: both;
height: 411px;
background-image: url(footer.gif);
bottom:0px;

}
</style>
</head>
<body>

<div id="container">

<div id="header" title="sitename"></div>

<div id="contents">
<div class="text" id="text"> Raum fürssdf<br>
<br>
vvv<<br>
<br>
fff<<br>
<br>
dsdf><br>
<br>
asfd<br>
<br>
sdf<br>
<br>
sadf<br>
<br>
sfg<br>
<br>
sdf<br>
<br>
lkjk<br>
<br>
edgr<br>
<br>
lj<br>
<br>
hkjhk</div>
<br>
<br>
</div>
<div id="footer"></div>

</div>
</body>
</html>

Würde mich freuen, wenn mir jemand von euch helfen oder einen Tipp geben kann, bin für jede Hilfe sehr dankbar.

Liebe Grüße
Lana

Doitsu · 20.02.2011

AW: Probleme: Div Positionierung - Layer soll sich in Footer schieben

Bau um deinen Content-Div noch ein div, diesen gibst du den Hintergrund mit background-position: bottom; mit. Aber nur soweit, bis der Footer dann halt anfaengt.

Lanariel · 20.02.2011

Danke, hat im Grunde auch funktioniert, nur verschiebt mir Firefox den Background um 1 Pixel nach links und IE um ca. 5 Pixel nach rechts.

Gibt es einen Weg das anzugleichen, damit es in beiden Browsern gleich gut aussieht?

Hier der neue Quellcode

<html lang="en">
<head>

<title>naydeene</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #000;
background-color: #5f5e5e;
}

#container
{
margin: 0em auto;
width: 1174px;
text-align: left;
background-color: 5f5e5e;
border: 0px solid black;
background-image: url(content2.gif);
background-repeat: no-repeat;
}

#header { background-image: url(header.gif);
background-repeat: no-repeat;
background-position: 0 0;
position: relative;
height: 261px;

}

#rahmen
{
margin-left: 0px;
width: 1174px;
background-image : url(content02.gif);
background-position : bottom;
background-repeat : no-repeat;
position:relative;

}

#contents
{
margin-left: 151px;
margin-right: 151px;
width: 886px;
padding: 0;
background-color: ffffff;
position:relative;
}

#text
{
margin-left: 20px;
width: 840px;
top:20px;
background-color: red;
position:relative;
}

#footer
{
clear: both;
height: 148px;
background-image: url(footer2.gif);
}
</style>
</head>
<body>

<div id="container">

<div id="header" title="sitename"></div>

<div class="rahmen" id="rahmen">

<div id="contents">
<div class="text" id="text"> Raum fürssdf<br>
<br>
vvv<<br>
<br>
fff<<br>
<br>
dsdf><br>
<br>
asfd<br>
<br>
sdf<br>
<br>
sadf<br>
<br>
sfg<br>
<br>
sdf<br>
<br>
lkjk<br>
<br>
edgr
lj<br>
<br>
jkhjkh<br>
<br>
khkjh<br>
<br>
jhk<br>
<br>
hkh<br>
KJH<br>
JH<br>
<br>
jh<br>
jh<br>
<br>
hkjhk</div>
<br>
<br>
</div>
</div>
<div id="footer"></div>

</div>
</body>
</html>

So hat sich jetzt erst mal erledigt. Ich habe einen Hack eingebaut für den IE und zwei verschiedene Backgrounds benutzt und nun funzt es

Vielen Dank für die Tipps, alleine wär ich gar nicht auf die Idee gekommen.