Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Alinhamento do Rodape com CSS

Olá pessoal hoje vou ensinar como fazer um alinhamento do rodapé na parte de baixo do navegador, isso pode ser útil para quem estiver desenvolvendo um layout para sistema web ou layout que ocupa 100% do navegador.

Vamos lá primeiro você já deve conhecer um pouco sobre posicionamento de DIV’s, caso nào entendo muito me avise para colocar um novo artigo sobre isso. Para criar o rodapé seu conteúdo deverá ser disposto assim:

<div id="conteiner_geral">
 <div id="conteudo">
      Aqui vai todo o conteúdo
   <div class="clear"></div>
</div>

<div id="rodape">
      Aqui vai o rodapé
</div >
</div>

Passando rapidamente, temos uma DIV que está “cobre todo mundo” e dentro dela duas DIV’s uma com o conteúdo (dentro dela outra para limpar algum alinhamento float caso tenha, isso é opcional ) e outra com o Rodapé.

Com esta estrutura vamos ao CSS, primeiro insira isso:

html, body {height:100%;}

Aqui falo que a altura do body é de 100%, para alinhar as coisas é necessário ter valores de alturas definidos.

Depois vamos mexer na div geral e conteúdo, coloque isso:

div#conteiner_geral{
   position:relative;
   min-height:100%;
   margin:0 auto;
   text-align:left;
   padding-bottom: 43px;
}
* html #conteiner_geral {height: 100%;}
div#conteudo{
   padding-bottom:50px;
}

Aqui eu digo ao navegador que a DIV ID “conteiner_geral” terá seu posicionamento relativo e uma altura mínima de 100% par ao Firefox e outros navegadores, em seguida para o Explorer a altura é de 100% (velhos problemas com navegadores…), em seguida o conteúdo terá uma distancia de 50px na parte de baixo no “bottom”.

Ok, agora vamos para o rodapé, coloque este código no seu CSS:

div#rodape{
   height:43px;
   width:100%;
   position: absolute;
   bottom: 0;
   left:0px;
   background-color:#E6E6E6;
   text-align:right;
}

.clear {clear:both;}

Aqui eu digo ao navegador que a altura do rodapé é de 43px, aqui fica a seu critério, mas lembre-se de colocar um valor igual ou maior no “padding-bottom” da DIV “conteudo”, para que o seus dados não fiquem por baixo dele. Depois digo também que seu tamanho é de 100%, seu posicionamento é Absoluto em relação ao conteúdo geral (que já tá 100% de altura) e seu posicionamento é de ficar no fundo e a esquerda.

Por fim o estilo que limpa outros alinhamentos do tipo float, não é necessário fica a gosto do cliente.

Explicação extraída deste artigo.

Até mais!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...