Mostrando resultados para as tags ''footer''.

Encontrado 1 registro

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

um tópico no fórum postou Visitante Tutoriais

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 Resultado: Se tem dúvida em algo é so responder o topico que eu respondo

Pesquisar na Comunidade