Ir para conteúdo

[TUTORIAL] Como fazer um footer sempre no final da página

Guest Dêemezeká

Por Guest Dêemezeká
em Tutoriais

 Compartilhar

Posts Recomendados

Guest Dêemezeká

Guest Dêemezeká

Postado
Postado

Não quer ver o footer logo abaixo do menu caso sua página não tem um conteudo?


Veja como fazer um footer sempre no final da página:


 


Seu site precisa ter uma tag <html> e uma tag <footer>, ou <div class="footer"> tanto faz.




<html>

	<head>

		<title>Footer Bonito</title>

	</head>



	<body>

		<div class="conteudo"></div>



		<footer> SEU FOOTER </footer>

	</body>

</html> 

Depois disso, agora tudo vai ser feito no css: (coloque isso dentro da tag <head> ou em um arquivo css externo)




html{

	position:relative; /* A POSIÇÃO DO <html> PRECISA SER RELATIVA, POIS O FOOTER SERÁ ABSOLUTO */

	min-height:100%; /* PODERIA SER APENAS height:100%; MAS O min-height FORÇA A ALTURA A SER SEMPRE 100% (ÚTIL PARA IE6) */

}



footer{

	position:absolute; /* POSIÇÃO ABSOLUTA, POIS O FOOTER NÃO TERÁ RELAÇÃO COM OS OUTROS ELEMENTOS DA PÁGINA */

	width:100%; /* DEFINA A LARGURA DO SEU FOOTER (NÃO É PRECISO SER EM PORCENTAGEM) */

	left:0; /* POSICIONAMENTO COLADO NA LATERAL ESQUERDA (NO CASO É PORQUE A LARGURA DO FOOTER É 100%) */

	bottom:0; /* AQUI ESTÁ A MAGICA: bottom:0; = SEMPRE NO FINAL DA PÁGINA */

	height:80px; /* ALTURA DO FOOTER */

	background-color:blue; /* COR DE FUNDO */

	text-align:center; /* SO PARA NAO FICAR FEIO */

	color:#fff; /* COR DO TEXTO DO FOOTER */

} 

Está tudo explicado nos comentários do codigo :p


Resultado:


jTqSNQL.png

 


 


Se tem dúvida em algo é so responder o topico que eu respondo :D


0
Link para o comentário
Compartilhar em outros sites
Guest Dêemezeká

Guest Dêemezeká

Postado
Postado

 

Não uso mais a tag footer, mas ótimo tutorial. Hoje em dia abandonei tabelas, rodapés e tudo mais, trabalho só com div's :D

por que parou kk

Recomendo vc nao usar so divs, isso foge dos padroes w3c .__.

Mas de qualquer forma esse tuto serve pra div tambem

0
Link para o comentário
Compartilhar em outros sites
Guest HillGnur

Guest HillGnur

Postado
Postado (editado)

Acho que seria mais fácil apenas usar algo assim

 

HTML

<footer id="footer">

</footer>

 

CSS

 

#footer{

 

float:bottom;

width:100%;

height:5%;

}

 

 

Eu uso mais ou menos esse estilo, ele sempre ficará no final da page, mas basicamente é esse o código que uso

sei que essas tags são antigas e tal, mas sempre ajudam no desenvolvimento inicial do site, dps só trocar pra div

Editado por HillGnur
0
Link para o comentário
Compartilhar em outros sites
Guest Dêemezeká

Guest Dêemezeká

Postado
Postado

Acho que seria mais fácil apenas usar algo assim

 

HTML

<footer id="footer">

</footer>

 

CSS

 

#footer{

 

float:bottom;

width:100%;

height:5%;

}

 

 

Eu uso mais ou menos esse estilo, ele sempre ficará no final da page, mas basicamente é esse o código que uso

sei que essas tags são antigas e tal, mas sempre ajudam no desenvolvimento inicial do site, dps só trocar pra div

essas tags nao sao antigas, tem no html5, e esse footer ai fica sempre no final porem o resto do conteudo pode passar por cima dele (o que ta no topico tambem) existem outras formas mais sofisticadas, esse tutorial que fiz é muito antigo

0
Link para o comentário
Compartilhar em outros sites

Participe da Conversa

Você pode postar agora e se cadastrar mais tarde. Se você tiver uma conta, a class='ipsType_brandedLink' href='https://gamersboard.com.br/login/' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title='Sign In Now'>acesse agora para postar com sua conta.
Observação: sua postagem exigirá aprovação do moderador antes de ficar visível.

Visitante
Responder

×   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.

Processando...
×
 Compartilhar
Ir para a lista de tópicos

  • Quem está navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...