• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Footer unten platzieren

B

blacky94

Neues Mitglied
Hey,

ich bin ziemlich neu im Webdevelopment daher habe ich leider nicht sehr viel erfahrung darin.
Ich habe folgendes Problem udnzwar wird mein Footer leider nicht gant unten auf der Seite angezeigt, ich hoffe
ihr könnt mir dabei helfen.

Hier ist 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 {
    color: #888;
    width: 620px;
    float: left;
}

#mainRight {
    color: #888;
    width: 325px;
    float: left;
}

#mainMenu {
    background: url(images/filter.png) repeat-x;
    width: 100%;
    height: 25px;
    float: left;
}

#chat {
    margin: 30px 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: right;
    margin: 50px 0;
    text-align: center;
    color: #fff;
    line-height: 35px;
}

und hier noch der HTML Code
HTML: 
<!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>

http://ai-subs.de/new/

Bin für jede hilfreiche Antwort dankbar :)

Grüße
Blacky94
 
Zuletzt bearbeitet:
Hi,
danke für deine Antwort, ich habe die Fehler in der HTML Datei soweit entfernt und oben nochmals das neue HTML Dokument reinedetiert. Leider wird der Footer noch immer in der "mitte" angezeigt, welchen Thread meinst du mit
CSS-"Technik" "footer sticky alt"
Zum Vergrößern anklicken....

Grüße
Blacky94
 
Ich meine kein spezifisches Topic sondern einen Suchbegriff unter dem Du das findest was Du suchst, auch im Netz, nicht nur hier im Forum.
 
Was genau meinst du den mit dieser Technik bzw. was bewirkt sie? Wird der Footer dann immer unten am Rand des Browsers angezeigt oder nur unten auf der Seite?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben