Footer wird nicht angezeigt

[Seelinaxxx]

Hallo!
Ich bin im Moment dabei, mir eine Website aufzumachen. Ich hab bisher mal einen groben einfachen HTML und CSS Code. Nur komm ich seit Stunden nicht weiter und ich finde meinen Fehler einfach nicht. Ich hänge jeweils die Codes und ein Screenshot an. Und zwar, wird bei mir der Footer nicht angezeigt. Ich hätte gerne unten im Fußbereich einfach so einen grauen Footer wo ich dann Datenschutz etc. reinschreibe. Kann mir wer helfen warum das nicht angezeigt wird??? :(


HTML Code:


<div id="container">
<h1 id="kopfbereich"><a href="/">Testwebsite</a></h1>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<div id="hauptnavi">
<ul>
<li><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
<li><a href="#">Navigation 3</a></li>
<li><a href="#">Navigation 4</a></li>
</ul>
</div><!/#hauptnavi>
<div id="mittelbereich">
<div id="inhalt">
<h2>Überschrift Titel</h2>
<p>Das hier ist der <strong>Inhaltsbereich</strong>.</p>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
<h3>Überschrift Text</h3>
<p><a href="#">Link</a> text
text text text text text text text text text text text text text text
text text text text text text text text text text text text text text </p>
</div><!/#inhalt>
<div id="sidebar">
<h2>Überschrift Sidebar</h2>
<p>Das hier ist die <strong>Sidebar</strong>.</p>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
</div><!/#sidebar>
<div class="clearer"></div>
</div><!/#mittelbereich>
<div id="footer">
<h2>Überschrift Footer</h2>
<p>Das hier ist der <strong>Fußbereich</strong>.</p>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
</div><!/#footer
</div><!-- /#container>



CSS Code:


body {
background: #dae5f0 url(body.gif) repeat-x;
color: #474B52;
margin: 0; padding: 0;
font: 100%/1.5 'lucida grande', verdana, sans-serif;
text-align: center;
}
#container {
margin: 0 auto; text-align: left;
width: 890px;
padding: 1px; border: 1px solid #474B52;
background: #fff;
position: relative;
}
h1#kopfbereich {
margin: 0; padding: 0; border-bottom: 1px solid #2a2a2c;
background: #2a2a2c ;
color: #2a2a2c;
}
h1#kopfbereich a {
display: block; width: 650px; height: 270px;
background: url(logo-header.gif) no-repeat;
text-indent: -9999px;
}
#hauptnavi {
font: bold 15px georgia, serif;
letter-spacing: 2px;
background: #BBCC3B url(hauptnavi-klein.gif) repeat-x; color: #fff;
}
#hauptnavi ul {
padding: 0 25px; margin: 0;
list-style: none;
height: 38px; line-height: 38px;
background: url(hauptnavi-bg.gif) no-repeat;
}
#hauptnavi li {
float: left;
}
#hauptnavi li a {
color: #fff;
text-decoration: none;
margin-right: 17px;
}
#hauptnavi li a:hover, #hauptnavi .aktiv {
text-decoration: underline;
}

#mittelbereich {
padding: 25px;
font-size: 12px;
clear: left;
background: #fff;
}
#mittelbereich h2 {
margin: 0;
font: 20px georgia, serif;
letter-spacing: 1px;
color: #6583a6; border-bottom: 1px dotted #6583a6;
}
#mittelbereich p, #mittelbereich ul, #mittelbereich ol, #mittelebereich dl, #mittelbereich form
{
margin-top: 7px; margin-bottom: 17px;
}
#mittelbereich a {
color: #72811F; text-decoration: none;
}
#mittelbereich a:hover {
color: #333; text-decoration: underline;
}
#mittelbereich .clearer {
clear: both;
}
#inhalt {
float: left; width: 530px;
}
#inhalt h3 {
font: 18px georgia, serif; margin-bottom: -4px;
}
#inhalt h4 {
font: bold 13px verdana, arial, sans-serif; margin-bottom: -3px;
}
#inhalt h5 {
font: bold 12px verdana, arial, sans-serif; margin-bottom: -3px;
}

#sidebar {
float: right; width: 250px;
}
#sidebar ul {
list-style: none; padding-left: 0; margin-left: 0;
}
#sidebar li {
margin-bottom: 1px; padding: 2px 0 2px 12px; border-bottom: 1px solid #eed;
background: url(listen-icon.gif) no-repeat left 9px;
#footer {
background: #41454b url(footer.gif) repeat-x bottom center;
color: #fff;
padding: 25px 25px 10px 25px;
font-size: 11px;
}

#footer {
background: #363a3d url(footer.gif) repeat-x bottom center;
color: #fff;
padding: 25px 25px 10px 25px;
font-size: 11px;
}
#footer h2 {
margin-top: 0;
font: bold 16px 'times new roman', times, serif;
text-transform: uppercase;
border-bottom: 1px dotted #bbb;
}
#footer ul, #footer ol {
list-style: none; margin-left: 0; padding-left: 0;
}

 

[broxx]

Hallo!
Was meinst du damit dass der Footer nicht angezeigt wird? Wnn ich es richtig sehe wird dein Footer-Inhalt dargestellt.
LG, Reinhard

 

[Seelinaxxx]

Hm ja der Text im html schon, aber ich hätte gerne dass der Footer grau wäre und dadrin eben der Text stehen soll.

 

[broxx]

Ok, verstehe.
Im Stylesheet ist der Block
#sidebar li {
nicht mit } geschlossen. Das dürfte die Ursache sein.

 

[Seelinaxxx]

Vielen Dank! Hab es eben ausgebessert Aber leider hat sich bezüglich des footers nichts getan. Hast du eine Idee, bzw wie würdest du es machen wenn du einen grauen footer haben wollen würdest? Ich hab leider keine Idee woran es liegt

 

[broxx]

Bei mir wird noch dem Ausbessern dieses Fehlers der Footer mit grauen Hintergrund angezeigt. Siehe Screenshot.
Achte darauf dass dein Stylesheet wirklich keine Syntaxfehler enthält, dann sollte es passen.