Ir para conteúdo

Arquivado

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

David Terra

Trabalhando com z-index, png e Internet Explorer(IE)

Por , em Desenvolvimento frontend

Recommended Posts

David Terra    0

David Terra
Postado

Boa noite,

Como podem observar aqui neste endereço http://meridiananet.com/demo/content/home/default2.asp a div#topo fica alinha à div#navegacao isso no IE já no firefox é exibido normalmente o que estou fazendo de errado?

 

Marcação CSS:

 

CODE

* {

margin:0;

padding:0;

}

 

body {

text-align:center;

}

 

div#wrapper {

margin: 0 auto;

text-align: left;

width: 740px;

}

 

div#topo {

position: absolute;

width: 740px;

height: 265px;

z-index: 999;

background: url("../img/topo.png") !important;

background-image: none;

filter: none !important;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../img/topo.png');

}

 

div#conteudo {

float: right;

margin-top: 195px;

padding: 5px 5px 5px 10px;

width:507px;

background-color: #58AAED;

}

 

 

div#principal {

float:left;

width:100%;

}

 

div#navegacao {

float: left;

margin-top: 195px;

width: 208px;

height: 500px;

background-color: #58AAED;

}

 

div#navegacao-interna {

position: absolute;

width: 164px;

height: 500px;

margin: 0 0 0 38px;

background-color: #DBEDFB;

}

Marcação HTML:

CODE
<?xml version="1.0" encoding="ISO-8859-1"?>

 

<!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" xml:lang="pt-br" lang="pt-br">

 

<head>

 

<title> New Document </title>

 

 

<link href="../../css/estilo.css" rel="stylesheet" type="text/css" media="screen" />

 

 

 

</head>

 

<body>

 

<div id="wrapper"> <!-- Centraliza página -->

<div id="topo">

 

</div>

 

<div id="conteudo"> <!-- Conteúdo da página -->

<div id="principal"> <!-- Textos do site -->

principal

</div> <!-- Textos do site -->

</div> <!-- Fim conteúdo da página -->

 

<div id="navegacao">

 

</div>

 

</div><!-- Fim centraliza -->

</body>

 

</html>

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

refiz o seu HTML e o seu CSS, ainda não é a melhor maneira, o que estava dando erro era um float:;

e o uso do text-align:center; mas por enquanto é só você ajustar ;)

 

PS.: não use o text-align:center; para alinhar apenas o margin: 0 auto; , não sei por que na sua página não alinhou no IE

mas em breve vejo isso para você

<div id="wrapper">
				<div id="topo">
					<div></div>
				</div>

				<div id="conteudo"> <!-- Conteúdo da página -->
					<div id="principal"> <!-- Textos do site -->
							principal
					</div> <!-- Textos do site -->

				</div> <!-- Fim conteúdo da página -->

				<div id="navegacao">

				</div>

</div>

* {
		margin:0;
		padding:0;
}
body{
		text-align:center;
}
div#wrapper {
		text-align:left;
		margin: 0 auto;
		width: 740px;
		height: 265px;
		background:#fc0;
}

div#topo {
		width: 740px;
		height: 195px;
}

div#topo div{
		position: absolute;
		width: 740px;
		height: 265px;
		z-index: 999;
		background: url("topo.png") !important; 
		background-image: none;
		filter: none !important;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='topo.png');
}

div#conteudo {
		float: right;
		padding: 5px 5px 5px 10px;
		width:507px;
		background-color: #58AAED;
}


div#principal {
		float:left;
}

div#navegacao {
		width: 208px;
		height: 500px;
		background-color: #58AAED;
}

div#navegacao-interna {
		position: absolute;
		width: 164px;
		height: 500px;
		margin: 0 0 0 38px;
		background-color: #DBEDFB;
}

div#rodape {
		clear:both;
		height: 72px;
		background: url("rodape.png") no-repeat;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Terra    0

David Terra
Postado

Valeu, única coisa que não entendi foi pq que não posso utilizar:

div#navegacao {
	   float: left;
}

 

Agora tenho outro problema, dentro do topo (encima da imagem) vão outras marcações(menu, texto, imagens), como faço para que o links e textos não fiquem congelados o IE?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

por que já possui float:left; na div#principal ;)

claro que acredito que ainda tem umas coisinhas a arrumar vou ver o que posso fazer, acredito que o melhor seja você refazer do ZERO e tentar encaixar o TOPO depois, pois era um dos floats que estavam afetando ele ;)

 

falow abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

David Terra    0

David Terra
Postado

Agora tenho outro problema, dentro do topo (encima da imagem) vão outras marcações(menu, texto, imagens), como faço para que o links e textos não fiquem congelados o IE?

 

Obrigado

Para resolver o problema dos links congelados no IE criei um DIV extra sobre a div#topo .topo-fundo

 

div#topo .topo-fundo{
		position: absolute;
		width: 740px;
		height: 265px;
		z-index: 998;
		background: url("../img/topo.png") !important;
		background-image: none;
		filter: none !important;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../img/topo.png',sizingMethod='scale');
}

div#topo .topo-conteudo{
		position: absolute;
		width: 740px;
		height: 265px;
		z-index: 999;
}

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