nicht angemeldet
Hallo Leute!
Ich hab hier ein kleines CSS Problem. Es geht darum den Footer am unteren Ende des Borwserfensters auszurichten und gleichzeitig dem Container für den Content zu erlauben den Footer bei bedarf weiter nach unten zu drücken.
Platziere ich den Footer einfach am Ende des Content-Containers, welcher mit "height:100%;" versehen ist, so bleibt unterhalb des Footers ein Freiraum. Wenn der Content-Container sich in seiner Höhe einfach über die Gesamte Seite ausbreiten würde, wäre mein Problem gelöst.
Platziere ich den Footer per "position:aboslute; left:0; bottom:0;" so schiebt Sich der Text-Container, welcher innerhalb des Content-Containers definiert ist, einfach unter dem Footer durch.
Definiere ich den Footer mit "position:absolute; left:0; top:100%;" so erscheint er irgendwo ganz tief unten im Nirvana des Scroll-Balkens. Das positive an der Sache allerdings ist, dass sich der Content-Containter dann bis ganz runter zum footer zieht :-)
Ein Bisschen Code falls ich zu undeutlich war:
[code=html]
<div id="mid_content">
<div id="top_right">
<div id="header">
<div id="navigation">
<ul>
<li id="start"><a href='http://www.licht-impulse.de/index.php?site=home'></a></li>
<li id="stil5"><a href='http://www.licht-impulse.de/index.php?site=stil5'></a></li>
<li id="produkte"><a href='http://www.licht-impulse.de/index.php?site=produkte'></a></li>
</ul>
</div>
</div>
</div>
<div id='text'>
Text im Content-Container
</div>
<div id='info_text'>
Infobox mit Text ebenfalls im Content-Container
</div>
</div>
<div id="bottom_right">
<div id="footer">
<ul>
<li><a href="">AGBs</a></li>
<li><a href="">Impressum</a></li>
<li><a href="mailto:">Kontakt</a></li>
</ul>
</div>
</div>
[/code]
Bisschen CSS dazu (Variante wo unterhalb des Footers Platz ist bzw. der #mid_content height:100%; nicht versteht):
[code=css]
#mid_content {
width:100%;
height:100%;
padding-bottom:140px;
background:url(./gfx/mid_content.jpg) top left repeat-y;
}
#text {
position:relative;
top:50px; left:115px;
width:540px;
padding:5px 5px 50px 5px;
color:white;
background-color:#5d5f5e;
}
#info_text {
position:absolute;
/*top:130px; left:727px;*/
top:130px; left:727px;
width:252px;
padding:5px;
color:white;
}
#bottom_right {
position:relative;
margin-left:0%;
width:100%;
height:34px;
background:url(./gfx/bottom_right.jpg) bottom right repeat-x;
}
#footer {
height:34px;
background:url(./gfx/footer.jpg) bottom left no-repeat;
overflow:hidden;
}
[/code]
So... ich hoffe es ist nur eine kleine Unachtsamkeit von mir und dass mir wer helfen kann der da durchblickt.
Vielen Dank im Voraus schon mal für eure Antworten!! :-)
MfG Asto.