Meu rodapé está ficando no topo da página!

Vasconcel0s · Fevereiro 23, 2016

Pessoal,

bom dia!

Estou com um problema, estou fazendo um projeto da faculdade, e o rodapé está ficando no topo da página, gostaria de saber se alguém pode me ajudar.

O código é este:

<!DOCTYPE html>

<head>

<title>Farmácia Vasconcelos</title>

</head>

<body>

<nav>

</div>

</nav>

<nav>

<a href="farmacia.php"><li>A Farmácia </li></a>

<a href="funcionario.php"><li> Funcionário </li></a>

<a href="faleconosco.php"><li> Fale Conosco </li></a>

</ul>

</nav>

<p>Estamos localizados na rua das lindas, número 91<br/>

Caetés I, Abreu e lima - PE / CEP: 53530-470<br/>

Telefone:(81)98888-0000/99977-5544</p>

</footer>

</body>

</html>

@charset "utf-8";

body{

background-image: url(../imagens/fundo.gif);

background-repeat: repeat-x;

font: sans-serif;

margin: 0;

padding: 0;

}

/*Topo*/

figure#logo{

position: absolute;

top: -16px;

left: 80px;

}

nav div#botoes-menu{

position: absolute;

top: 95px;

left: 280px;

}

nav ul#menu{

position: absolute;

font-size: 18pt;

top: 120px;

left: 250px;

font-family: arial;

}

nav ul#menu li{

list-style: none;

float:left;

padding: 20px;

}

nav ul#menu a{

text-decoration:none;

color: #a0a0a0;

font-weight: bold;

border: 0px solid #000000;

}

nav ul#menu a:hover{color:#003333}

/*Fim topo*/

/*Corpo do site*/

figure#banner{

position: absolute;

top: 250px;

left: 200px;

}

/*Fim do corpo*/

/*Footer*/

footer{

background-color: #fff;

}

Editado Fevereiro 23, 2016 por Vasconcel0s

wash · Fevereiro 23, 2016

Olá!

Em html5 use apenas <br>, veja: http://www.w3schools.com/tags/tag_br.asp

Sugiro que use a tag <main> como um wrapper:

<!doctype html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Farmácia Vasconcelos</title>
        <link href="css/estilo.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <figure id="logo"><a href="index.php"><img src="imagens/logo.jpg"></a></figure>
            <nav>
                <div id="botoes-menu">
                    <a href="medicamentos.php"><img src="imagens/bt_medicamentos.png" onMouseOver="this.src = 'imagens/bt_medicamentos2.png'" onMouseOut="this.src = 'imagens/bt_medicamentos.png'"></a>
                    <a href="higiene.php"><img src="imagens/bt_higiene.png" onMouseOver="this.src = 'imagens/bt_higiene2.png'" onMouseOut="this.src = 'imagens/bt_higiene.png'"></a>
                    <a href="mae.php"><img src="imagens/bt_mae.png" onMouseOver="this.src = 'imagens/bt_mae2.png'" onMouseOut="this.src = 'imagens/bt_mae.png'"></a>
                    <a href="perfumes.php"><img src="imagens/bt_perfumes.png" onMouseOver="this.src = 'imagens/bt_perfumes2.png'" onMouseOut="this.src = 'imagens/bt_perfumes.png'"></a>
                </div> 
            </nav>
            <nav>
                <ul id="menu">
                    <a href="index.php"><li>Home </li></a>
                    <a href="farmacia.php"><li>A Farmácia </li></a>
                    <a href="funcionario.php"><li> Funcionário </li></a>
                    <a href="faleconosco.php"><li> Fale Conosco </li></a>
                </ul>
            </nav>

            <figure id="banner"><img src="imagens/banner.jpg"></figure>

            <footer id="rodape">
                <p>Estamos localizados na rua das lindas, número 91<br>
                    Caetés I, Abreu e lima - PE / CEP: 53530-470<br>
                    Telefone:(81)98888-0000/99977-5544</p>
            </footer>
        </main>
    </body>
</html>

Sugiro que defina o box-sizing

*{
    box-sizing: border-box;   
}
html, body{
    width: 100%;
    height: 100%;
    margin:0;
}
body{
    background: url(../imagens/fundo.gif) repeat-x;
    font: sans-serif;
    margin: 0;
    padding: 0;
}
main {
    position:relative;
    min-height:100%;
    height:auto;
    padding-bottom:104px; /* configure para que fique com a altura do rodapé */
    overflow: hidden;
    border:2px dashed red;
}
/*Topo*/
figure#logo{
    position: absolute;
    top: -16px;
    left: 80px;
}

nav div#botoes-menu{
    position: absolute;
    top: 95px;
    left: 280px;
}

nav ul#menu{
    position: absolute;
    font-size: 18pt;
    top: 120px;
    left: 250px;
    font-family: arial; 
}

nav ul#menu li{
    list-style: none;
    float:left;
    padding: 20px;
}

nav ul#menu a{
    text-decoration:none; 
    color: #a0a0a0;
    font-weight: bold;
    border: 0px solid #000000;
}
nav ul#menu a:hover{color:#003333}

/*Fim topo*/

/*Corpo do site*/
figure#banner{
    position: absolute;
    top: 250px;
    left: 200px; 
}

/*Fim do corpo*/

/*Footer*/
footer{
    background-color: #eafaea;
    box-shadow: 0px -3px 2px #999;
    width:100%;
    position:absolute;
    bottom:0px;
    text-align:center;
}

Entrar

Meu rodapé está ficando no topo da página!

Pergunta

Vasconcel0s

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

wash

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades