CSS: Estendendo o topo (top) e rodapé (bottom) do seu site
Olá meus caros!
Este post foi criado para responder uma dúvida recebida como comentário aqui no linhadecomando.com.
A dúvida é de como fazer um site, usando toda a dimensão da tela ou seja se adaptar em qualquer monitor; o topo e o rodape fica usando toda a tela.
Vamos a resposta:
<html> <head> <style> body{font-family:Arial} .fundoTopo { background-color:#FF0000; } .clear { overflow:hidden; width:100%; } .center { text-align:left; margin:0px auto; position:relative; width:980px; } .topo{ background-color:#003399; height:143px; width:980px; color:#FFFFFF; } #logo{ width:180px; height:141px; border:#00CCCC 1px dotted; float:left } #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> </body> </html> |
Este recurso foi utilizado no desenvolvimento deste website: http://www.mineirinhamoveisrusticos.com.br/