Criando um rodapé com 3 colunas

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.


Estrutura html

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 id="rodape">
    <div class="coluna">1</div>
    <div class="coluna">2</div>
    <div class="coluna">3</div>
</div>

A div rodape é a div pai, ela comporta todas as outras três divs com a classe coluna.

Marcação Css

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:

#rodape {
        margin:0 auto; /*Centraliza a div pai*/
        width:900px; /*Tamanho da div pai*/
        }
.coluna {
        display:inline; /*Evita o bug da margem duplicada*/
        float:left; /*Flutuando à esquerda*/
        width:300px;
        }

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.

Comentários

  1. 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!
    Abraços e muita paz!!!

    ResponderExcluir
  2. Dú Pirollo - Obrigado meu amigo. Espero que lhe seja de muita valia.

    ResponderExcluir
  3. bah pra eu q sou completamente leiga
    a dica foi bem util hehe
    bjim guri

    ResponderExcluir
  4. 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.

    ResponderExcluir
  5. Gostei do seu blog! conteúdo bem legal, o layout é bem clean e bonito e o post é bem interessante gostei da dica, abraço.

    ResponderExcluir
  6. Olá Helder,
    Quando tiver tempo poderia complementar esta dica com o tipo de conteúdo ideal para este rodapé?
    Obrigado

    ResponderExcluir
  7. Mokafoo - Com certeza. Já estou preparando este artigo. Logo logo ele pinta aqui. Desde já agradeço por sua participação.

    ResponderExcluir
  8. 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.

    Vou pedir que ele faça contato com você. Ela é muito bom no Photoshop.

    Gostei muito e vou passar por aqui mais vezes. Estou seguindo você!

    Um abração...

    ResponderExcluir
  9. Carlos Roberto de Oliveira - Obrigado pelas palavras. Espero que os artigos possam ser úteis.

    Um abraço.

    ResponderExcluir
  10. Olá, Helder!

    Mais tarde, com calma, vou tentar criar as colunas no rodapé do Dando Pitacos.

    Depois lhe dou um retorno.

    Um abração e parabéns pelo blog...

    ResponderExcluir
  11. Carlos Roberto de Oliveira - Olá, companheiro. Qualquer dúvida é só entrar em contato.

    ResponderExcluir

Postar um comentário

Postagens mais visitadas