Criando um rodapé com 3 colunas ~ Crianerd
agosto 20, 2010 CSS , html , tutoriais
O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.
Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.
O rodapé criado no tutorial possui a medida de 900 pixels de comprimento. Dentro deste rodapé irei criar três colunas dividas em tamanhos iguais.
<div class="coluna">1</div>
<div class="coluna">2</div>
<div class="coluna">3</div>
A div rodape é a div pai, ela comporta todas as outras três divs com a classe coluna.
Vou definir o tamanho das divs dividindo o comprimento total da div rodape pelas três divs coluna. Logo, 900 / 3 = 300. Veja o código:
margin:0 auto; /*Centraliza a div pai*/
width:900px; /*Tamanho da div pai*/
display:inline; /*Evita o bug da margem duplicada*/
float:left; /*Flutuando à esquerda*/
Salve e visualize em seu navegador.
Contribua com o blog enviando suas ideias, críticas ou elogios. Diga-me o que busca e o que gostaria de ver por aqui.
Caro amigo Helder, saudações!
Muito bom o seu tutorial, a pagina fica melhor com o rodapé com três colunas, vou ver se consigo colocar no meu blog.
Parabéns pela excelente postagem e por dividir com os amigos os seus conhecimentos, bela iniciativa!
Dú Pirollo - Obrigado meu amigo. Espero que lhe seja de muita valia.
bah pra eu q sou completamente leiga
a dica foi bem util hehe
edilene - amor - Espero ter ajudado facilitado a todos.
Jucifer - Quem bom! É o que tento fazer quando escrevo um tutorial, alcançar um todo da forma mais clara.
Gostei do seu blog! conteúdo bem legal, o layout é bem clean e bonito e o post é bem interessante gostei da dica, abraço.
Quando tiver tempo poderia complementar esta dica com o tipo de conteúdo ideal para este rodapé?
Mokafoo - Com certeza. Já estou preparando este artigo. Logo logo ele pinta aqui. Desde já agradeço por sua participação.
O seu blog é um barato, Helder!
Salvei sua orientação sobre o rodapé do blog. Vou mostrar ao meu filho e ver se consigo fazer as modificações.