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/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *