Footer klappt nicht richtig.

1. offizieller Beitrag

    Hallo Rt, irgendwie wenn ich ein Footer mache ist der nicht ganz unten, woran liegt das?

    0.PNG

    HTML

    Spoiler anzeigen

    <html>

    <head>

    <title>Layout</title>

    <link href="/css/style.css" rel="stylesheet" />

    <link href="/css/me.css" rel="stylesheet" />

    </head>

    <body>

    <header>

    <div class="nav">

    <ul>

    <li><a href="https://habbocastle.de/"><i class="fa fa-home" aria-hidden="true"></i> Startseite</a>

    <ul>

    <li><a href="http://habbo.st">HabboST</a></li>

    </ul>

    </li>

    <li><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Aktuelles</a>

    <ul>

    <li><a href="/liveticker">Liveticker</a></li>

    <li><a href="/newsarchiv">Newsarchiv</a></li>

    </ul>

    </li>

    <li><a href="#"><i class="fa fa-users" aria-hidden="true"></i> Community</a>

    <ul>

    <li><a href="/team">Unser Team</a></li>

    <li><a href="/karriere">Karriere</a></li>

    <li><a href="/user">Mitglieder</a></li>

    </ul>

    </li>

    <li><a href="#"><i class="fa fa-gamepad" aria-hidden="true"></i> Fancenter</a>

    <ul>

    <li><a href="/avatargenerator">Habbo Imager</a></li>

    <li><a href="/altcodes">Alt Codes</a></li>

    <li><a href="/badgelist">Badgeliste</a></li>

    </ul>

    </li>

    <li style="background-color: #e01313;"><a href="#"><i class="fa fa-users" aria-hidden="true"></i>Housekeeping</a></li>

    </ul>

    </div>

    <div class="hotel"></div>

    <div class="kreis" style="background-image:url(https://www.habbo.de/habbo-imaging/…ction=3&&size=l)"></div>

    <div class="kreisr" style="background-color:#e00d0d45;"><div style="margin-top: 10px;position: relative;cursor: default;">Admin</div></div>

    </header>

    <div class="clear">

    <h1>Mein Profil</h1>

    <div class="mebox">

    <img src="https://images.habbo.st/habbo-imaging/…P@@@gesture=sml" style="-webkit-filter: drop-shadow(0 1px 0 #FFFFFF) drop-shadow(0 -1px 0 #FFFFFF) drop-shadow(1px 0 0 #FFFFFF) drop-shadow(-1px 0 0 #FFFFFF);margin-top: 15px;position: absolute;margin-left: 310px;z-index:2000;">

    <!---<div class="platte" style="margin-left: 40px;margin-top: 15px;position: absolute;background: url('/images/me/platte.png') no-repeat;background-position: 50% 50%;width: 119px;height: 195px;"></div>--->

    <div class="unten mittig">

    <div class="taler">

    <b>13 500</b> Taler

    </div>

    <div class="sterne">

    <b>0</b> Sterne

    </div>

    <div class="sterne">

    <b>5</b> Diamanten

    </div>

    <div class="online">

    <b>0</b> Stunden insgesamt online

    </div>

    </div>

    </div>

    <div class="newsbox" style="background:url(https://i.imgur.com/VwSfZ88.png);">

    <div class="unten2 mittig"><div class="newstext">Achtung! Neue Nachrichten: <b>Style der Woche #4</b></div></div>

    </div>

    <div class="box" style="margin-top: 15px;width: 616px;">

    <div class="tlt">Was steht im Hotel an?</div>

    <div class="stream" style="margin-top: 10px;float: left;width: 645px;height:421px;overflow-y: auto;overflow-x: hidden;">

    <div style="width: 314px;height: 1730px;border-right: 3px solid rgba(0, 0, 0, 0.4);">

    <div style="z-index: 9999999999;margin-bottom: 10px;float: left;width: 347px;">

    <div style="margin-right: 5px;margin-top: 14px;float: right;width: 50px;height: 50px;background: url('https://images.habbo.st/habbo-imaging/…P@@@gesture=sml') no-repeat;background-position: 50% 30%;background-color: #FFF;border-radius: 999999px;border: 2px solid rgba(0, 0, 0, 0.2);"></div>

    <div style="margin-left: 15px;font-weight: bold;color: rgba(0, 0, 0, 0.8);">Hazed.cs</div>

    <div style="border-style: solid; border-color: transparent transparent transparent rgba(0,0,0,0.2); border-width: 10px; float: right; margin-right: -4px; margin-top: 12px;"></div>

    <div style="margin-left: 10px;border-radius: 3px;width: 240px;padding: 10px;font-size: 13px;border: 1px solid rgba(0, 0, 0, 0.2);border-bottom: 2px solid rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.01);">News wurde nicht gefunden!</div>

    </div>

    <div style="float: left;margin-left: 293px;margin-bottom: 10px;width: 346px;">

    <div style="margin-left: -5px;margin-top: 14px;float: left;width: 50px;height: 50px;background: url('https://images.habbo.st/habbo-imaging/…P@@@gesture=sml') no-repeat;background-position: 50% 30%;background-color: #FFF;border-radius: 999999px;border: 2px solid rgba(0, 0, 0, 0.2);"></div>

    <div style="border-style: solid; border-color: transparent rgba(0,0,0,0.2) transparent transparent; border-width: 10px; float: left;margin-left: 5px; margin-top: 31px;"></div>

    <div style="float: left;margin-left: 10px;font-weight: bold;color: rgba(0, 0, 0, 0.8);">Maexel</div>

    <div style="float: right;border-radius: 3px;margin-right: 15px;width: 235px;padding: 10px;font-size: 13px;border: 1px solid rgba(0, 0, 0, 0.2);border-bottom: 2px solid rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.01);">News wurde nicht gefunden!</div>


    </div>

    <div style="z-index: 9999999999;margin-bottom: 10px;float: left;width: 347px;">

    <div style="margin-right: 5px;margin-top: 14px;float: right;width: 50px;height: 50px;background: url('https://images.habbo.st/habbo-imaging/…P@@@gesture=sml') no-repeat;background-position: 50% 30%;background-color: #FFF;border-radius: 999999px;border: 2px solid rgba(0, 0, 0, 0.2);"></div>

    <div style="margin-left: 15px;font-weight: bold;color: rgba(0, 0, 0, 0.8);">Maexel</div>

    <div style="border-style: solid; border-color: transparent transparent transparent rgba(0,0,0,0.2); border-width: 10px; float: right; margin-right: -4px; margin-top: 12px;"></div>

    <div style="margin-left: 10px;border-radius: 3px;width: 240px;padding: 10px;font-size: 13px;border: 1px solid rgba(0, 0, 0, 0.2);border-bottom: 2px solid rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.01);">News wurde nicht gefunden!</div>

    </div>

    <div style="z-index: 9999999999;margin-bottom: 10px;float: left;width: 347px;">

    <div style="margin-right: 5px;margin-top: 14px;float: right;width: 50px;height: 50px;background: url('https://images.habbo.st/habbo-imaging/…P@@@gesture=sml') no-repeat;background-position: 50% 30%;background-color: #FFF;border-radius: 999999px;border: 2px solid rgba(0, 0, 0, 0.2);"></div>

    <div style="margin-left: 15px;font-weight: bold;color: rgba(0, 0, 0, 0.8);">Maexel</div>

    <div style="border-style: solid; border-color: transparent transparent transparent rgba(0,0,0,0.2); border-width: 10px; float: right; margin-right: -4px; margin-top: 12px;"></div>

    <div style="margin-left: 10px;border-radius: 3px;width: 240px;padding: 10px;font-size: 13px;border: 1px solid rgba(0, 0, 0, 0.2);border-bottom: 2px solid rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.01);">News wurde nicht gefunden!</div>

    </div>

    </div>

    </div>

    </div>

    <div class="Kampagnenbox" style="margin-top: 15px;width: 400px;">

    <div class="tlt">Hotel Kampagnen</div>

    <div style="cursor: pointer;margin-bottom: 10px;width: 238px;padding-left: 170px;background: url('https://habbo.st/public/images/…x60_AUHotel.gif') no-repeat;height: 60px;">

    <div style="font-size: 15px;letter-spacing: 0.5px;">Willkommen im Habbo.st</div>

    <div style="font-size: 12px;color: rgba(0, 0, 0, 0.7);">Hey du, na bist du schon mit unseren Mitarbeitern vertraut?</div>

    </div>

    <div style="cursor: pointer;margin-bottom: 10px;width: 238px;padding-left: 170px;background: url('https://habbo.st/public/images/…x60_AUHotel.gif') no-repeat;height: 60px;">

    <div style="font-size: 15px;letter-spacing: 0.5px;">Willkommen im Habbo.st</div>

    <div style="font-size: 12px;color: rgba(0, 0, 0, 0.7);">Hey du, na bist du schon mit unseren Mitarbeitern vertraut?</div>

    </div>

    </div>

    <center>Design by PowerModer</center>

    </div>

    </body>

    </html>

    style.css

    Spoiler anzeigen

    @import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700');

    ul {list-style:none;position:relative;margin:0;padding:0;z-index: 65535;left:240px;}

    ul a {display:block;color: #fff;text-decoration:none;font-size:15px;line-height:55px;height:55px;padding:0 15px;transition-duration:0.7s;}

    ul li {position:relative;float:left;margin:0;padding:0}

    ul li a.noclick {cursor: default !important;}

    ul li:hover {background: #222;color: #fff !important;transition-duration:0.7s;}

    ul ul {display:none;position:absolute;top:100%;left:0;background:#333;padding:0;border-radius: 0 0 2px 2px;box-shadow: 0 2px 1px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.1);}

    ul ul li {float:none;width:150px;height:40px;}

    ul ul a {line-height:40px;color: white;}

    ul ul ul { top:0;left:100%}

    ul li:hover > ul {display:block}

    body {

    margin:0;

    background-color:#f4f4f4;

    font-family:'Muli', sans-serif;

    color:black;

    }

    header {

    width:100%;

    height:37%;

    overflow: hidden;

    background:url(/images/header_background_eve.png);

    }

    html {

    margin-bottom: 15px;

    }

    .kreis {

    width: 100px;

    height: 100px;

    border-radius: 50px;

    background: #1f1e1e no-repeat center -30px;

    margin-top: -55px;

    margin-left: 120px;

    position: absolute;

    }

    .hotel {

    position: relative;

    width: 70%;

    opacity: 0.8;

    background: url(/images/headerright_1.png) 100% 50% no-repeat;

    float: right;

    right: 40px;

    height: 175px;

    }

    .nav {

    height: 55px;

    background-color: #1f1e1e;

    transition-duration: 0.7s;

    }

    .kreisr {

    width: 100px;

    height: 100px;

    border-radius: 50px;

    margin-top: -55px;

    margin-left: 120px;

    opacity:0;

    position: absolute;

    }

    .kreisr:hover {

    opacity:1;

    font-weight: 500;

    transition: all 0.4s ease;

    color: #fff;

    text-align: center;

    }

    .box {

    padding: 10px;

    background: #fff;

    box-shadow: 0 0 4px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.15);

    width: 350;

    float: left;

    margin-right: 10px;

    overflow: hidden;

    }

    .clear {

    position:relative;

    margin-left:90px;

    margin-top:10px;

    }

    .tlt {

    width: 100%;

    padding-top: 5px;

    border-radius: 2px;

    height: 25px;

    position: relative;

    background-color: #4490b3;

    text-align: center;

    color: #FFFFFF;

    margin-bottom: 10px;

    box-shadow: 0 0 1px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.15);

    }

    .footer {

    width:100%;

    height:27px;

    background-color:red;

    }

    Me.css

    Spoiler anzeigen

    .mebox2 {

    padding: 10px;

    background: #fff;

    box-shadow: 0 0 4px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.15);

    width: 400px;

    float: left;

    margin-right: 10px;

    height: 170px;

    overflow: hidden;

    border-radius: 2px;

    }

    .mebox {

    width: 637px;

    float:left;

    height: 191px;

    margin-right:8px;

    background: url(/images/me/me-bg.png) 1% 0% no-repeat rgb(255, 255, 255);

    background-position: 1% 0%;

    box-shadow: 0 0 4px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.15);

    border-radius: 2px;

    }

    .Kampagnenbox {

    padding: 10px;

    background: #fff;

    box-shadow: 0 0 4px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.15);

    width: 350;

    float: left;

    margin-right: 10px;

    overflow: hidden;

    border-radius: 2px;

    }

    .newsbox {

    padding: 10px;

    background: #fff;

    box-shadow: 0 0 4px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.15);

    width: 400px;

    float: left;

    margin-right: 10px;

    height: 171px;

    overflow: hidden;

    border-radius: 2px;

    }

    .newsbox .unten2 {

    position: absolute;

    border-top: 1px solid rgba(0, 0, 0, 0.8);

    background: rgba(0, 0, 0, 0.7);

    width: 421px;

    height: 28px;

    margin-left: -10px;

    margin-top: 153px;

    border-radius: 0px 0px 3px 3px;

    }

    .newsbox .unten2 .newstext {

    color: #FFF;

    font-size: 12px;

    float: left;

    background: url(/images/me/10.gif);

    background-repeat: no-repeat;

    background-position: 0% 50%;

    height: 30px;

    line-height: 30px;

    padding-left: 20px;

    margin-left: 10px;

    }

    .mebox .unten {

    position: absolute;

    border-top: 1px solid rgba(0, 0, 0, 0.8);

    background: rgba(0, 0, 0, 0.7);

    width: 636px;

    height: 28px;

    margin-left: 0px;

    margin-top: 162px;

    border-radius: 0px 0px 3px 3px;

    }

    .mebox .unten .taler {

    color: #FFF;

    font-size: 12px;

    float: left;

    background: url(/images/me/6.png);

    background-repeat: no-repeat;

    background-position: 0% 50%;

    height: 30px;

    line-height: 30px;

    padding-left: 20px;

    margin-left: 10px;

    }

    .mebox .unten .sterne {

    color: #FFF;

    font-size: 12px;

    float: left;

    background: url(/images/me/8.png);

    background-repeat: no-repeat;

    background-position: 0% 50%;

    height: 30px;

    line-height: 30px;

    padding-left: 20px;

    margin-left: 20px;

    }

    .mebox .unten .online {

    color: #FFF;

    font-size: 12px;

    float: left;

    background: url(/images/me/9.png);

    background-repeat: no-repeat;

    background-position: 0% 50%;

    height: 30px;

    line-height: 30px;

    padding-left: 20px;

    margin-left: 20px;

    }

    Danke für eure Hilfe :P

    • Offizieller Beitrag

    am besten machst du eine Klasse für den footer.

    Code: Html
    <div class="footer">Footer</div>
    Code: Css
    .footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 30px 0;
}

    Habe es am Handy geschrieben und konnte es nicht testen, also wenn etwas nicht klappt sag bescheid.

    PS: Die Center-Funktion die du nutzt klappt schon lange nicht mehr.

    Zitat von SirSonay

    am besten machst du eine Klasse für den footer.

    Code: Html
    <div class="footer">Footer</div>
    Code: Css
    .footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 30px 0;
}

    Habe es am Handy geschrieben und konnte es nicht testen, also wenn etwas nicht klappt sag bescheid.

    PS: Die Center-Funktion die du nutzt klappt schon lange nicht mehr.

    00000.PNG Jetzt ist es so :/

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden