![[CSS]Footer wird nicht ganz unten angezeigt](https://www.elitepvpers.com/forum/iconimages/web-development/css-footer-wird-nicht-ganz-unten-angezeigt_ltr.gif){kind=small}
ich habe folgendes Problem, undzwar wird mein Footer auf meiner Homepage nicht ganz unten angezeigt sonder über einem Element:
Hier ein Bild der Homepage:
Das "Hello" stellt den Footer dar.
Hier ist der HTML Code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <title>Ai - Subs</title> <meta name="description" content="ai-subs" /> <meta name="keywords" content="ai-subs" /> <meta name="language" content="de, eng" /> <link rel="stylesheet" href="style/style.css" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div id="main"> <div id="headerLogo"></div> <div id="headerMenu"> <ul> <li>Suche</li> <li>Login</li> <li>Registrieren</li> <li>Sare Video</li> <li>Anime - List</li> <li>Kontakt</li> <li class="current">Startseite</li> </ul> </div> <div id="header"></div> <div id="mainLeft"> Filter <div class="mainMenu"> <ul> <li class="current">Alle</li> <li>Deutsch</li> <li>Englisch</li> <li>Gesubbt</li> <li>Hochgeladen</li> <li>News</li> </ul> <div id="mainVideo"> <div id="videoEntry"> Hyouka <div class="border"> <div class="whiteBackground"></div> <img src="style/images/preview/hyouka.png" alt="hyouka"/> </div> Houkya Folge 20 </div> </div> </div> </div> <div id="mainRight"> Community <div class="mainMenu"> <ul> <li class="current">Chat</li> <li>Login</li> <li>Registrieren</li> </ul> <div id="chat"> <script type="text/javascript" id="sid0010000002623105234">(function() {function async_load(){s.id="cid0010000002623105234";s.src='http://st.chatango.com/js/gz/emb.js';s.style.cssText="width:325px;height:360px;";s.async=true;s.text='{"handle":"aisubs","styles":{"b":100,"c":"666666","d":"666666","g":"333333","j":"333333","k":"FFFFFF","l":"CCCCCC","m":"FFFFFF","s":1,"t":0,"aa":1}}';var ss = document.getElementsByTagName('script');for (var i=0, l=ss.length; i < l; i++){if (ss[i].id=='sid0010000002623105234'){ss[i].id +='_';ss[i].parentNode.insertBefore(s, ss[i]);break;}}}var s=document.createElement('script');if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);}else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})();</script> </div> </div> </div> </div> <div id="footer">Hello</div> <script> $("li").click(function () { $(".mainMenu li").removeClass("current"); $(this).toggleClass("current"); }); </script> </body> </html>
Und der CSS Code:
Code:
body {
background: #e3e3e3;
font-family: Arial;
font-size: 10pt;
margin: 5px 0;
padding: 0;
}
#main {
width: 960px;
margin: 0 auto 0 auto;
}
#header {
width: 960px;
height: 218px;
background: url(images/header.png);
float: left;
}
#headerLogo {
margin: 0 10px;
float: left;
background: url(images/logo.png);
width: 160px;
height: 45px;
background-color: none;
-webkit-transition-property: background-color;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 10ms;
-moz-transition-property: background-color;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 10ms;
-o-transition-property: background-color;
-o-transition-duration: 300ms;
-o-transition-timing-function: ease-in;
-o-transition-delay: 10ms;
transition-property: background-color;
transition-duration: 300ms;
transition-timing-function: ease-in;
transition-delay: 10ms;
}
#headerLogo:hover {
background-color: #e7e7e7;
}
#headerMenu {
float: right;
width: 750px;
height: 33px;
margin: 10px 0;
}
#headerMenu li {
background: url(images/menu.png) no-repeat;
background-position: top;
width: 87px;
height: 27px;
list-style: none;
text-align: center;
padding: 3px 0px;
color: #ccc;
margin: 0 0 0 5px;
float: right;
cursor: Pointer;
}
#headerMenu li:hover {
background-position: center;
color: #eee;
}
#headerMenu .current {
background-position: bottom;
color: #fff;
}
#headerMenu li:active, #headerMenu .current:hover {
background-position: bottom;
color: #fff;
}
#mainLeft, #mainRight {
color: #888;
width: 620px;
float: left;
margin: 10px 0;
}
#mainRight {
width: 325px;
float: right;
}
.mainMenu {
background: url(images/filter.png) repeat-x;
width: 100%;
height: 25px;
float: left;
}
#chat {
margin: 30px 0;
}
.mainMenu ul {
padding: 0;
margin: 0;
}
.mainMenu li {
list-style: none;
color: #636363;
text-transform: uppercase;
font-size: 8pt;
width: 94px;
text-align: center;
float: left;
height: 25px;
line-height: 17pt;
background-color: none;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 10ms;
-moz-transition-property: background-color, color;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 10ms;
-o-transition-property: background-color, color;
-o-transition-duration: 300ms;
-o-transition-timing-function: ease-in;
-o-transition-delay: 10ms;
transition-property: background-color, color;
transition-duration: 300ms;
transition-timing-function: ease-in;
transition-delay: 10ms;
}
.mainMenu li:hover, .mainMenu .current{
background-color: #57afff;
cursor: Pointer;
color: #ffffff;
}
#mainVideo {
width: 100%;
float: left;
margin: 20px 0;
text-shadow: #fff 0px 1px 0px;
}
#videoEntry {
width: 192px;
height: 156px;
float: left;
color: #999;
text-align: center;
}
#videoEntry:hover {
color: #57afff;
}
#videoEntry .border {
background: url(images/videoentry.png);
width: 188px;
height: 120px;
}
.whiteBackground {
width: 176px;
height: 108px;
background: white;
position: absolute;
margin: 6px 0 0 6px;
-webkit-transition-property: opacity;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 10ms;
-moz-transition-property: opacity;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 10ms;
-o-transition-property: opacity;
-o-transition-duration: 300ms;
-o-transition-timing-function: ease-in;
-o-transition-delay: 10ms;
transition-property: opacity;
transition-duration: 300ms;
transition-timing-function: ease-in;
transition-delay: 10ms;
opacity: 0;
filter: alpha(opacity = 0);
}
.whiteBackground:hover {
opacity: 0.3;
filter: alpha(opacity = 30);
}
/*#footer {
background: url(images/footer.png);
width: 100%;
height: 40px;
float: left;
margin: 50px 0;
text-align: center;
color: #fff;
line-height: 35px;
}*/
#footer {
clear:left;
margin-top:1em;
background:#efefef;
text-align:center;
float: left;
width: 100%;
}
Hoffe ihr könnt mir dabei helfen,
Grüße
SunshineGuy
