Ir para conteúdo

POWERED BY:

Arquivado

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

pauloca

dimensionamento

Por , em Desenvolvimento frontend

Recommended Posts

pauloca    0

pauloca
Postado

Olá a todos Tenho um layout básico composto por topo, lateral esquerda, centro e rodapé dentro de uma div mais externa chamada página. A largura da div página está configurada para 99%. As larguras do topo e do rodapé estão configuradas para 99%. A div lateral-esquerda (com float:left) tem uma largura fixa definida em pixels. Para a largura da div centro (com float:left) fui testando um valor em % até ocupar o espaço desejado. O meu problema ocorre na mudança de resolução. Em 800x600 a largura da div centro é quase o suficiente para ocupar todo o espaço que sobra descontando a largura da div lateral-esquerda, contudo, quando mudo a resolução para 1024x768 a largura da div centro fica bem reduzida, ocorrendo uma perda de espaço. Alguém poderia explicar para mim a causa disso e como resolvo este problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

alendre    0

alendre
Postado

E aí pauloca.. beleza...Posta o code pra gente testar...T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

pauloca    0

pauloca
Postado

beleza Alendre!

O código a seguir é só o esqueleto da página.

 

<html>  <head>	<title> </title>	<style type="text/css">	<!--	#corpo {	margin:0px;	text-align:center;	}	div#pagina {	position:relative;	width:98%;	margin:10px auto;	padding:5px;	text-align:left;	border:1px solid #000;	}	div#topo {	position:relative;	width:100%;	margin:0px 0px 5px 0px;	border:1px solid #000;	}	div#lateral-esquerda {	position:relative;	float:left;	width:150px;	margin:0px 5px 5px 0px;	border:1px solid #000;	}	div#centro {	position:relative;	float:left;	width:79%;	margin:0px 0px 5px 0px;	border:1px solid #000;	}	div#rodape {	position:relative;	clear:left;	width:100%;	border:1px solid #000;	}	p.nome {	text-align:center;	}	-->	</style>  </head>  <body id="corpo">	<div id="pagina">	  <div id="topo">		<p class="nome"> topo </p>	  </div>	  <div id="lateral-esquerda">		<p class="nome"> lateral esquerda </p>	  </div>	  <div id="centro">		<p class="nome"> centro </p>	  </div>	  <div id="rodape">		<p class="nome"> rodapé </p>	  </div>	</div>  </body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

alendre    0

alendre
Postado

Opa pauloca....

 

Desculpa a demora....

 

Ó pra funcionar do jeito q você quer basta alterar os valores do .geral:

 

C você quiser com outra dimensão basta comentar a largura...

 

( width:800px; comentando ele: /*width:800px*/ );

 

As margens:

 

margin: topo, direita, rodapé e esquerda....

 

No seu layout:

 

.conteudo { margin:0px, 0px, 0px, 151px;}

 

Com os dois menus Esquerda e Direita:

 

.conteudo { margin:0px, 151px, 0px, 151px;}

 

É só testar beleza...

 

Como o seu layout:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>NTeste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style><!--.geral {	width:800px;	margin:0 auto;}.topo, .baixo {	height:50px;	text-align:center;	background-color:#CCCCCC;	clear:both;}.esquerda{	width:150px;	height:400px;	text-align:left;	border:1px solid #666666;}.esquerda  {	float:left;}.direita {	width:150px;	height:400px;	text-align:left;	border:1px solid #666666;}.direita {	float:right;}.conteudo {	/* Altere como quiser topo, direita, baixo e esquerda...*/	margin:0px 0px 0px 151px;	padding-left:10px;	border:1px solid #000000;}--></style></head><body><!-- E éssa a estrutura para ter as caixas Esquerda e Direita funcionando... --><!-- No máximo é o div da Esquerda em cima do div da Direita e vice-versa... Ok... --><div class="geral">	<div class="topo">	Topo	</div>	<div class="esquerda">	Esquerda	</div>	<div class="conteudo">Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	</div>	<div class="baixo">	Rodapé	</div></div></body></html>

Com dois menus Esquerda e Direita....

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>NTeste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style><!--.geral {	width:800px;	margin:0 auto;}.topo, .baixo {	height:50px;	text-align:center;	background-color:#CCCCCC;	clear:both;}.esquerda{	width:150px;	height:400px;	text-align:left;	border:1px solid #666666;}.esquerda  {	float:left;}.direita {	width:150px;	height:400px;	text-align:left;	border:1px solid #666666;}.direita {	float:right;}.conteudo {	/* Altere como quiser topo, direita, baixo e esquerda...*/	margin:0px 151px 0px 151px;	padding-left:10px;	border:1px solid #000000;}--></style></head><body><!-- E éssa a estrutura para ter as caixas Esquerda e Direita funcionando... --><!-- No máximo é o div da Esquerda em cima do div da Direita e vice-versa... Ok... --><div class="geral">	<div class="topo">	Topo	</div>	<div class="esquerda">	Esquerda	</div>	<div class="direita">	Direita	</div>	<div class="conteudo">Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	ConteudoConteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	Conteudo	</div>	<div class="baixo">	Rodapé	</div></div></body></html>

Espero ter ajudado....

 

T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

pauloca    0

pauloca
Postado

Olá a todos

 

Alendre, agradeço pela sua ajuda e pelo seu trabalho de ter escrito os códigos que você postou como exemplo.

 

Rflky3, aproveitei os códigos do link http://alabrasil.blogspot.com/2006/02/em-b...anto-graal.html e fiz as adaptações para ficar do jeito que eu preciso, funcionou muito bem.

 

Valeu pessoal, muito obrigado pela ajuda de voces.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pauloca    0

pauloca
Postado

Olá a todos

 

Após alguns testes percebi que o IE bagunça o layout proposto no site

http://alabrasil.blogspot.com/2006/02/em-b...anto-graal.html se não existir a seguinte linha no arquivo html:

http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd.

O Opera, firefox e Mozila mantém o layout conforme proposto.

Alguém poderia, por favor, explicar para mim o que esta linha significa e o motivo do problema relatado acontecer?

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