Ir para conteúdo

POWERED BY:

Arquivado

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

prog_web

Problema com layout em tableless

Por , em Desenvolvimento frontend

Recommended Posts

prog_web    0

prog_web
Postado

Eu montei um layout bem simples em tableless. No HTML eu tenho mais ou menos o seguinte:

 

<!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" xml:lang="pt" lang="pt"><head><title>htmlstaff.org</title><link rel="stylesheet" href="style.css" type="text/css" /></head><body><div id="header">Cabeçalho</div><div id="menu_esquerdo">Menu esquerdo</div><div id="conteudo"><div class="principal">Conteúdo principal</div></div><div id="menu_direito">Menu direito</div><div id="footer">Copyleft © 2001-2006 htmlstaff.org. Conteúdo sob licença Creative Commons.</div></body></html>

E no CSS (style.css) eu tenho mais ou menos o seguinte:

 

html {	overflow-x: auto;}body {	margin: 0;	padding: 0;	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	background-color: #999999;	color: #000000;	font-size: 12px;		font-family: Arial, Helvetica, sans-serif;	SCROLLBAR-FACE-COLOR: #EEEEEE; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC;	SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #999999;	SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #CCCCCC;	SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;}#header {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	height: 40px;	width: 1003px;	background: #CCCCCC;}#conteudo {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	top: 50px;	margin-right: 22%;	margin-left: 22%;	width: 561px;	background: #FFFFFF;}#menu_esquerdo {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	position: absolute;	top: 50px;	left: 0;	width: 200px;	background: #999999;}#menu_direito {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	position: absolute;	top: 50px;	right: 0;	width: 200px;	background: #999999;}#footer {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	text-align: center;	height: 18px;	width: 1003px;	background: #EEEEEE;}principal {	color: #000000;	font-size: 12px;		font-family: Arial, Helvetica, sans-serif;}

Só que eu estou tendo um problema: Eu montei o layout originalmente para ser visualizado em resolução 1024x768, desta forma, quando eu restauro a tela do browser ou visualizo o layout em uma resolução inferior ele fica todo bagunçado. Eu busquei utilizar valores fixos no header, conteudo, menu_esquerdo, menu_direito e footer para evitar problemas do tipo, porém eu não sei aonde esta o erro. Eu queria que o layout, mesmo quando fosse visualizado por uma resolução inferior a 1024x768, não sofresse nenhuma modificação na sua estrutura. Alguém aí pode me ajudar nisto?! Desde já, obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

prog_web, seu código tá bem bagunçado.....sujo.

 

Recomendo a leitura dos artigos (todos) do bruno, eles serão bem importantes pra você.

 

Outro coisa, você sabe q isso:

 

SCROLLBAR-FACE-COLOR: #EEEEEE; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC;	SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #999999;	SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #CCCCCC;	SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;

Não funciona na maioria, ou em todos, exceto o IE.

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

camilo.oliveira    0

camilo.oliveira
Postado

Me parece que se você quer adaptar seu site à todas as resoluções, deve usar valores em porcentagem em vez de pixels absolutos.

 

Ainda não tive tempo de analisar seu código, mas pelo que você escreveu, parece que é esse o problema.

 

 

Tem essa matéria aqui do iMasters mesmo » http://www.imasters.com.br/artigo/3638

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

É isso mesmo camilo, o link que você recomendou está dentro do link que eu passei....por isso falei pra ele ler todos os artigos sobre posicionamento.[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

prog_web    0

prog_web
Postado

prog_web, seu código tá bem bagunçado.....sujo.Recomendo a leitura dos artigos (todos) do bruno, eles serão bem importantes pra você.Outro coisa, você sabe q isso:

SCROLLBAR-FACE-COLOR: #EEEEEE; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC;	SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #999999;	SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #CCCCCC;	SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;
Não funciona na maioria, ou em todos, exceto o IE.[]´s
gio, que isso... Meu código esta bem simplificado, caso não tenha entendido. E eu sei quanto a cor na scrollbar...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

prog_web, seu código está um pouco "sujo" sim..... <_< ....diria até repetitivo demais!!É só olhar o q você postou!!!

margin: 0; padding: 0; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #999999; color: #000000; font-size: 12px; font-family: Arial, Helvetica, sans-serif;

Mas sem estresse, foi apenas uma observação que eu fiz!

Compartilhar este post

Link para o post
Compartilhar em outros sites

camilo.oliveira    0

camilo.oliveira
Postado

prog_web, seu código está um pouco "sujo" sim..... <_< ....diria até repetitivo demais!!

É só olhar o q você postou!!!

 

 

margin: 0;

padding: 0;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #999999;

color: #000000;

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

Mas sem estresse, foi apenas uma observação que eu fiz!

 

Por exemplo, só disso daí que o gio! selecionou, dava pra resumir assim

 

margin:0;padding:0;background-color:#999;color:#000;font-size:12px;font-family:Arial, Helvetica, sans-serif;
da pra colocar tudo da font em uma linha só, é que eu não gosto.....mas é mais ou menos isso.

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