✔ Footer rückt nicht ans Ende der Seite

Status
Nicht offen für weitere Antworten.
T

tedstryker

Grünschnabel
Hallo,
ich habe eine Seite mit divs erzeugt. Der Footer sollte mit "position: relative; bottom: 0%;" an das Ende der Seite rücken, verharrt aber immer unter dem nächst-tieferen Element. Anzuschauen unter http://www.test.reserve-hoentrop.de.

HTML ANFANG___________________________

<body>

<div id="container">
<div id="header" title="Reserve H&ouml;ntrop">
<img src="pics/header3.jpg" alt="" width="100%"/>
</div>
<div id="mainnav">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color: #124830;">
<tr>
<td width="10%" style="color:#124830; background-color:#FFFFD7;"><a href="index.html" style="color:#124830; border-left: 0;">Home</a></td>
<td width="10%"><a href="index.html">Team</a></td>
<td width="10%"><a href="index.html">History</a></td>
<td width="10%"><a href="index.html">Gallery</a></td>
<td width="10%"><a href="index.html">Forum</a></td>
<td width="10%"><a href="index.html">Disclaimer</a></td>
<td width="10%"><a href="index.html">Links</a></td>
<td width="10%"><a href="members.html">Members</a></td>
<td width="10%" ><a href="index.html">Kontakt</a></td>
</tr>
</table>
</div>
<div id="menu">
Willkommen auf der Homepage der Volleyball-Mannschaft der Reserve H&ouml;ntrop.<p>
Hier finden Sie Informationen und News rund um das Team, Bochum sowie Volleyball allgemein.
</div>
<div id="content">
testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext...
</div>
<div id="footer">
Copyright &copy; Reserve H&ouml;ntrop 2008
</div>
</div>

</body>

HTML ENDE___________________

CSS ANFANG_________________

body
{
margin: 0;
padding: 0;
border: none;
font: 12pt Arial;
text-align: center;
background-color: #D6D6D6;
}

#container
{
width: 50em;
height: 35em;
margin: 0.4em auto;
background-color: #FFFFD7;
border: 0.05em solid #0C3223;
}

#header
{
width: 100%; height: 6.88em;
background-color: #124830;
margin-bottom: 0.1em;
}

#mainnav
{
width: 100%;
margin-bottom: 1.5em;
}

#mainnav a, #mainnav a:visited
{
display: block;
color:#E8CF8D;
text-decoration:none;
font-size: 85%;
padding: 0;
margin: 0;
border-left: solid 0.1em #FFFFD7;
line-height:1.4em;
text-align:center;
font-weight: bold;
}

#mainnav a:active, #mainnav a:hover
{
background-color: #FFFFD7;
color: #124830;
text-decoration: none;
}

#menu
{
height: 55%;
width: 20%;
float: right;
border-left: 1px solid #E8CF8D;
padding-left: 1em;
padding-right: 0.2em;
overflow: auto;
overflow-x: hidden;
background-color: #dddddd;
text-align: left;
font-size: 85%
}

#content
{
height: 55%;
width: 70%;
margin-left: 2em;
padding-top: 1em;
padding-right: 0.5em;
padding-bottom: 0.5em;
overflow: auto;
overflow-x: hidden;
border-bottom: 1px solid #E8CF8D;
text-align: left;
background-color: #2b3344;
}

#footer
{
clear:both;
position: relative;
bottom: 0%;
height: 1.5em;
color: #E8CF8D;
background-color: #124830;
text-align: right;
padding: 0.4em 0.5em;
font-size: 75%;
}

CSS ENDE___________________

Auch ein Festlegen der Boxengrößen in em oder setzen aller Boxen auf "position:relative;" löste das Problem nicht. Hat jemand vielleicht eine Lösung bzw. sieht meinen Fehler (dieses Problem betreffend.. =D)?

Vielen Dank für Eure Bemühungen

tedstryker
 
Wow, das war schnell. Super, danke, hat funktioniert.
Jetzt bekomme ich den Footer nur nicht auf die richtige Länge. Setze ich "width: 100%;" bekommt er, anscheinend aufgrund der eingestellten padding-Werte, "Überlänge". Hast Du auch da eine Idee?
 
Selbstverständlich ;)

Code: 
#footer {
clear:both;
position:absolute;
bottom:0;
left:0;
width:100%;
color:#E8CF8D;
background-color:#124830;
text-align:right;
font-size:75%;
}

#footer p {
margin:0;
padding:0.4em 0.5em;
height:1.5em;
}
Code: 
<div id="footer">
     <p>Copyright &copy; Reserve H&ouml;ntrop 2008</p>
</div>
 
Ah, zu gut... Vielen Dank noch einmal! Als CSS-Rookie ist man trotz Suchfunktion in Foren manchmal echt aufgeschmissen...
Wenn der Code auch bedenklich sein mag, so sieht er jetzt doch sowohl in Mozilla als auch im IE aus wie gewollt.

Danke für die schnelle und freundliche Hilfe.

//edit

Mit bedenklich meine ich meinen restlichen Code....
 
Falls du es noch nicht bemerkt haben solltest: ich habe kurz zuvor meinen CSS-Code editiert und die Höhenangabe an das p-Element übergeben. ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück