Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Edmilson Vasconcelos

Footer ficando no topo da página!

Recommended Posts

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

 

Editado por dif
Colocar o código dentro da tag CODE

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×