CODEWITHSUNDEEP
htmlcss
user3779775
user3779775

Reputation: 115

How to place my footer?

I'm having a problem, i'm just a beginner and i would like to improve my CSS and HTML skills, so if you have some tips please post it here, so my problem is about my footer, it is not on the right place, (on bottom, center of the page) so someone help me please?

my html:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div id="header">
            <p id="nome">João Pedro</p>
            <a href="mailto:[email protected]"><p id="email">[email protected]</p></a>
            <p id="imagem"><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xfp1/t1.0-9/10250173_10203771744604525_8177123278861015451_n.jpg" style="width: 50px;
    height: 50px" /></p>
        </div>
        <div class="left">
            <p>Nome</p>
            <hr>
            <p>Email</p>
            <hr>
            <p>Contacto</p>
            <hr>
            <p>Sobre</p>
            <hr>
            <p>Mais</p>
            <hr>
            <p>Jogos</p>
            <hr>
            <p>Videos</p>
        </div>
        <div class="right">
            <p id=boss><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/s720x720/564356_10200810585497398_1364591551_n.jpg" style="height: 300px"/></p>
            <div id="texto"><h3>O que é o Jejum de Jesus? -Vocês perguntam.</h3>
            <p>O Jejum de Jesus é onde nós nos santificamos a Deus para receber o Espirito Santo.</p>
            <p>Durante 40 dias iremos nos desapegar das coisas mundanas tais como:</p>
            <ul>
                <li>Internet</li>
                <li>Musica</li>
                <li>Jogos</li>
            </ul>
        </div>
        <div id="footer"></div>
    </body>
</html>

my css: 

body {
    background-color: #e7e7e7;
}

div {
    border-radius: 5px;
}

#header {
    margin: auto;
    position: relative;
    height: 60px;
    width: 98%;
    background-color: #230f65;
    margin-bottom: 17px;
}

.left {
    float: left;
    margin-left: 14px;
    position: relative;
    background-color: #bdabf8;
    width: 10%;
    height: 400px;
    margin-bottom: 17px;
}

.right {
    float: right;
    margin-right: 14px;
    position: relative;
    background-color: #dfd7f7;
    width: 86%;
    height: 400px;
    margin-bottom: 17px;
    border: 1px solid black;    
}

.left {
    text-align: center;
    padding-top: 19px;
    margin-bottom: 17px;
}

#footer {
    position: fixed;
    bottom: 0;
    background-color: #230f65;
    width: 85%;
}

#nome {
    color: #ffffff;
    float: left;
    padding-left: 30px;
    padding-top: 5px;
    font-family: sans-serif, Verdana;
}

#email {
    float: right;
    padding-top: 3px;
    padding-right: 10px;
    font-family: sans-serif, Verdana;
    color: #ffffff;
}

a:hover {
    font-weight: bold;
}

p > img {
    border-radius: 100%;
}

#imagem {
    padding-top: 5px;
    padding-left: 140px;
}

#boss {
    padding-top: 33px;
    float: left;
    padding-left: 15px;
}

#texto {
    padding-left: 255px;
}

Upvotes: 0

Views: 74

Answers (1)

Lars Ebert-Harlaar
Lars Ebert-Harlaar

Reputation: 3537

You need to set a height for your footer, as it (yet) has not content and thus no height.

#footer {
    position: fixed;
    bottom: 0;
    background-color: #230f65;
    width: 85%;
    height: 100px;
}

If you want your footer to stick to the bottom, take a look at http://cssstickyfooter.com

Also, to center the footer, in this case use left: 7.5%;, which is have the remaining space on the sides of the footer. (100% - 85% equals 15%, half of it on the left, half on the right)

Upvotes: 1

Related Questions