Footer ficando no topo da página!

Edmilson Vasconcelos · 23 de fevereiro de 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 agradeço desde já!

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="botões-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#botões-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;
}

DiF · 23 de fevereiro de 2016

@Edmilson Vasconcelos Basicamente você não definiu a posição do rodapé, o elemento figure usado incorretamente.. sua estrutura precisa ser melhorada.

siga este "corpo"

<div id="container">
  <div id="topo">
    <header>Aqui vai conter a imagem do seu banner</header>
    <nav>Seu menu</nav>
  </div>
  
  <div id="conteudo">
      aqui podes usar o elemento article para o conteúdo
  </div>
  
  <footer id="rodape"></footer>
</div>

Numa rápida explicação, o DIV id container serve para agrupar todos, no caso de quando quiseres usar por exemplo o grid 960 e deixar centralizado exatamente como nosso fórum.

A imagem deve ser usada o elemento img ou usar de background.. o elemento figure só é necessário quando usado em conjunto com o "figcaption".

o elemento <article> é usado para o conteúdo, contudo o elemento DIV também deve ser usado.. pois é ele quem deve ser usado para "dividir" os elementos.

e o footer tens que posicionar.

Use a posição relativa ou absoluta. se quiser que ele fique sempre no final da página tens que usar a posição absoluta no eixo Y em zero.

Deixo aqui um site ótimo de leitura.. é do autor Maurício Samy Silva, lançou diversos livros de html 5, css3 e jquery

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php