CSS: Estendendo o topo (top) e rodapé (bottom) do seu site (Completo)

22 de novembro de 2010 admin

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!

Você pode gostar também

PHP: Gráfico de Barras com CSS

CSS: Possibilitando o atributo “width” na tag “label”

CSS: Alinhamento de DIVS

Deixe um comentário Cancelar resposta