CSS: Estendendo o topo (top) e rodapé (bottom) do seu site (Completo)
No código abaixo, você aprenderá como estender o topo e o rodapé do seu site, através de css.
Incluí também uma div para conteúdos.
<html> <head> <style> body{ font-family:Arial } .clear{ overflow:hidden;width:100% } .center{ text-align:left; margin:0px auto; position:relative; width:980px; } .fundoTopo{ background-color:#FF0000 } .topo{ background-color:#003399; height:143px; width:980px; color:#FFFFFF; } #logo{ width:180px; height:141px; border:#00CCCC 1px dotted; float:left } .fundoRodape{ background-color:#3366FF } .rodape{ background-color:#003399; height:43px; width:980px; color:#FFFFFF; text-align:center } .fundoConteudo{ background-color:transparent } .conteudo{ background-color:#003399; height:500px; width:980px; color:#FFFFFF; text-align:center } #texto{text-align:right} </style> </head> <body> <div class="fundoTopo clear"> <div class="center"> <div class="topo"> <div id="logo">LOGO 180 x 143px</div> <div id="texto">BEM VINDO AO NOSSO SITE</div> </div> </div> </div> <div class="fundoConteudo clear"> <div class="center"> <div class="conteudo"> CONTEÚDO DO SITE </div> </div> </div> <div class="fundoRodape clear"> <div class="center"> <div class="rodape"> www.linhadecomando.com<br> Todos os direitos reservados. </div> </div> </div> </body> </html> |
Detalhe: como exemplo eu coloquei cores hexadecimais (#3366FF) para estender a div; pode ser trocado por imagens.
Até mais!