Ir para conteúdo

POWERED BY:

Arquivado

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

Gustavo H Lima

ZOOM (+ ou -) no IE estraga o layout...

Por , em Desenvolvimento frontend

Recommended Posts

Gustavo H Lima    0

Gustavo H Lima
Postado

Estou aprendendo posicionamento em CSS.

Estao aparecendo alguns problemas quando dou ZOOM na página no IE. No FireFox funciona perfeito.

 

(Seguem os códigos .css e .html, talvez eu esteja fazendo de forma errada os posicionamentos, caso há um jeito mais correto de fazer me indiquem, obrigado)

 

 

#logo_header { 
	margin: 15px 0px 0px 35px; 
	width: 233px;
	height: 205px;
	position: absolute;
	}
	
#green_header {  
	margin: 90px 0px 0px 15px; 
	width: 781px;
	height: 205px;
	position: absolute;
	}
	
span.ghl {  
	background: url(../imgs/green_header_left.png) no-repeat top left;
	margin: 0px 0px 0px 0px; 
	width: 30px;
	height: 205px;
	position: absolute;
	float:left;
	}
	
span.ghm {  
	background: url(../imgs/green_header_main.png) no-repeat top left;
	margin: 0px 0px 0px 30px; 
	width: 721px;
	height: 205px;
	position: absolute;
	float:left;
	}
	
span.ghr {  
	background: url(../imgs/green_header_right.png) no-repeat top left;
	margin: 0px 0px 0px 751px; 
	width: 30px;
	height: 205px;
	position: absolute;
	float:left;
	}
	
#menu_opcoes { 
	margin: 245px 0px 0px 15px; 
	width: 783px;
	height: 42px;
	position: absolute;
	}	
	
#teste {
	background: url(../imgs/logo_header.png) no-repeat top right;
	position: absolute;
	margin: 15px 0px -10px -10px;
	width:100%;
	height:100%;
	}
	
body {
	background: url(../imgs/background.jpg) fixed repeat top left;
	margin: 0 0 0 0;
}

 

<HTML>
 <HEAD>
  <LINK REL="stylesheet" href="css/main.css" type="text/css">
 </HEAD>
 <BODY>



	<DIV ID="green_header">	
 
		<SPAN CLASS="ghl"></SPAN>
		<SPAN CLASS="ghm"></SPAN>
		<SPAN CLASS="ghr"></SPAN>

	</DIV>	

	 	
 		<DIV ID="logo_header">
 			<IMG SRC="imgs/logo_header.png" />
 		</DIV>
		
 		<DIV ID="menu_opcoes">
 			<IMG SRC="imgs/menu_opcoes.png" />
 		</DIV>


 
 </BODY>
</HTML>

 

 

O que ocorre no ZOOM: (Internet Explorer)

 

ZOOM PADRAO, 100%:

 

 

ZOOM IN, 110%:

 

 

ZOOM OUT, 70%:

 

 

 

O que que tá errado!?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tenta evitar o uso de tanto absolute.

Esse position, retira o elemento do fluxo do documento, esvaziando o container...

 

Além de "travar" o objeto.. para dada resolução...

Coloca um link para o teu site, pois precisamos das imagens para sugerir algo ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Sugiro a utilização de posicionamento relativo ;).

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gustavo H Lima    0

Gustavo H Lima
Postado

Tenta evitar o uso de tanto absolute.

Esse position, retira o elemento do fluxo do documento, esvaziando o container...

 

Além de "travar" o objeto.. para dada resolução...

Coloca um link para o teu site, pois precisamos das imagens para sugerir algo ^^

 

.... (tirei a url)

 

 

Qual seria a melhor forma de fazer o posicionamento???

Dividi esse quadrado verde em 3 pois nas bordas eu usei uma resolucao maior (PNG 24) para uma melhor transparencia....

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

acredito que assim seja a melhor maneira

é um exemplo depois é só ajustar ;)

<style>
*{
margin:0;
padding:0;
}
div#green_header {  
	margin: 90px 0px 0px 15px;
	width: 781px;
	height: 205px;
	}
	
span.ghl {  
	background: #000 url(green_header_left.png) no-repeat top left;
	width: 30px;
	height: 205px;
	float:left;
}
	
span.ghm {  
	background: #ccc url(green_header_main.png) no-repeat top left;
	display:block;
	margin: 0 30px;
	height: 205px;
	}
	
span.ghr {  
	background: #fd0 url(,green_header_right.png) no-repeat top left;
	width: 30px;
	height: 205px;
	float:right;
	}
</style>

<DIV ID="green_header">
		<SPAN CLASS="ghl">a</SPAN>
		<SPAN CLASS="ghr">b</SPAN>
		<SPAN CLASS="ghm">c</SPAN>
</DIV>

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