Ir para conteúdo
Fórum Script Brasil
  • 0

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


Vasconcel0s

Pergunta

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>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Farmácia Vasconcelos</title>
<link href="css/estilo.css" rel="stylesheet">
</head>
<body>
<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>
 
</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 por Vasconcel0s
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

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;
} 

 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...