Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Beraldo

Espaços vazios ao centralizar página na tela

Por , em Desenvolvimento frontend

Recommended Posts

Beraldo    864

Beraldo
Postado

Saudações, pessoal! :D

 

Odeio mexer com design. Meu negócio é programar, mas às vezes temos que fazer uns sacrifícios, né...? :D

 

Estou utilizando aquele tutorial do Maujor sobre como centralizar uma página na tela, mas está ficando um espaço em branco abaixo da div conteudo, entre ela e o rodapé.

 

Os códigos HTML e CSS são estes:

 

padores.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" href="padroes.css" type="text/css" /><title>Padrões</title></head><body><div id="tudo"><div id="topo"><h1>Topo</h1></div><div id="menuLat"><h2>Menu<br />Lateral</h2></div><div id="conteudo"><h1>Conteúdo da página</h1></div><div id="rodape"><h2>Rodapé</h2></div></div></body></html>

padroes.css

body{	text-align: center;}#tudo{	width: 750px;	margin: 0 auto;	padding: 0;	border: solid 2px red;}#topo{	position: relative;	top: 0;	left: 0;	width: 750px;	height: 110px;	margin: 0;	padding: 0;	border: solid 2px blue;}#menuLat{	position: relative;	top: 10px;	left: 0;	width: 170px;	height: 350px;	margin: 0;	padding: 0;	border: solid 2px yellow;}#conteudo{	position: relative;	top: -340px;	left: 180px;	width: 560px;	height: 500px;	margin: 0;	padding: 0;	border: solid 2px green;}#rodape{	position: relative;	bottom: 100%;	width: 700px;	width: 700px;	margin: 0;	padding: 0;	border: solid 2px black;}

Gostaria que ficasse como nesta imagem:

http://img405.imageshack.us/my.php?image=padroesmp7.jpg

 

Creio que o problema esteja aqui:

#conteudo{

position: relative;

top: -340px;

O navegador não ignora o espaço que seria ocupado pela div conteúdo se ela não tivesse o top negativo.

 

Como posso solucionar isso?

 

Valeu

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beraldo    864

Beraldo
Postado

Grande gio, tudo tranqüilo e você? :D

 

Valeu pela ajuda! Funcionou perfeitamente.

Para quem quiser, o CSS final é este:

 

body{
	text-align: center;
}
#tudo{
	width: 750px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	border: solid 2px red;
}
#topo{
	width: 750px;
	height: 110px;
	margin: 0;
	padding: 0;
	border: solid 2px blue;
}
#menuLat{
	width: 170px;
	height: 350px;
	margin: 0;
	padding: 0;
	float: left;
	border: solid 2px yellow;
}
#conteudo{
	width: 560px;
	height: 500px;
	margin: 0;
	padding: 0;
	float: right;
	border: solid 2px green;
}
#rodape{
	width: 700px;
	width: 700px;
	margin: 0;
	padding: 0;
	clear: both;
	border: solid 2px black;
}

A página HTML não teve alterações em seu código.

 

Valeu

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito