Ir para conteúdo

POWERED BY:

Arquivado

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

Kaduln2

[Resolvido] Div sobrepondo a outra no FF e IE

Por , em Desenvolvimento frontend

Recommended Posts

Kaduln2    0

Kaduln2
Postado

Olá pessoal, tudo bom ! bom, sou novato por aqui e na area de webstandards tb !!

 

Estou com um probleminha aqui !! A div (bloco vermelho) está por cima da div (bloco verde)

 

somente nos navegadores IE e FF

 

Imagem Postada

 

 

Já no Chrome ela se comporta da forma como eu quero, ou seja atrás do bloco verde:

 

 

Imagem Postada

 

 

Será que eu tenho que colocar algum hack para esses navegadores, ou alguma marcação CSS já resolveria??

 

Segue a Marcação pra essas 2 Divs que utilizei:

 

#microfone { width:181px;          /*bloco verde */
             height:778px;
	     background: #099;
             margin:30px 50px 0 0;
	     float:right;


#slideshow {width:395px;         /*bloco vermelho */
            height:221px;
	    background:#900;
	    float:right;
	    margin:20px -180px 0 0;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Poste toda a marcação e CSS. Pode estar havendo algum problema na herança que não é coberto pelo trecho postado. Certifique-se de ter validado a marcação, também.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaduln2    0

Kaduln2
Postado

Poste toda a marcação e CSS. Pode estar havendo algum problema na herança que não é coberto pelo trecho postado. Certifique-se de ter validado a marcação, também.

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::.BETO LEITE.::</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>

<div id="principal"> <!--Inicio Principal-->

<div id="microfone"> <!--Inicio DIV Microfone (BLOCO VERDE)-->

</div><!--Fim DIV Microfone-->

<div id="menu"> <!--Inicio menu-->

<ul> 

<li><a href="index.html">HOME</a></li>
<li><a href="quemsou.html">QUEM SOU</a></li>
<li><a href="#">SERVIÇOS</a></li>
<li><a href="#">MÍDIA</a></li>
<li><a href="#">SEU ESPAÇO</a></li>
<li><a href="#">CONTATO</a></li>

</ul>

</div><!--fim menu-->

<div id="palco"> <!--Inicio Palco-->

<div id="bordaarredondada"> <!--Inicio bordaarredondada-->

</div><!--Fim bordaarredondada--> 

<div id="slideshow"> <!--Inicio slideshow (BLOCO VERMELHO)-->

</div> <!--fim slideshow-->

</div><!--Fim Palco-->

</div><!--Fim Principal-->

</body>

</html>

@charset "utf-8";
/* CSS Document */

*{ margin:0; 
   padding:0;
}

body {background: url(img/fundo.jpg) top;
      margin-top:30px;
}

h1 {font-family:'CaviarDreamsBold';
    font-weight:bold;
    text-align: left;
    color:#333;
    padding:8px 0 0 3px;
}

p {font-family: Verdana, Geneva, sans-serif;;
   margin: 10px 0 0 5px;
   font-size:12px;
   text-align:justify;
   color:#333;
   padding:5px 0 0 5px;
	}

@font-face {
	font-family: 'CaviarDreamsBold';
	src: url('caviardreams_bold-webfont.eot');
	src: local('☺'), url('caviardreams_bold-webfont.woff') format('woff'), url('caviardreams_bold-webfont.ttf') format('truetype'), url('caviardreams_bold-webfont.svg#webfontYd235sOH') format('svg');
	font-weight: normal;
	font-style: normal;
}


#principal {height:800px; 
            width:799px;
	    margin:auto;
	    padding:1px; 0 0 0;
            background: url(img/bgeralcopy.png) no-repeat;		
		    
}

#microfone { width:181px;          
             height:778px;
             background: #099;
	     margin:30px 50px 0 0;
	     float:right;
}

#palco { width:640px;
         height:497px;		 
         margin:20px 0 0 0;
	 background:#FFF;
}



#bordaarredondada { width:30px;
                    height:497px;
	            background:url(img/bordas/arredondado2.gif) no-repeat;
		    float:left
}

#slideshow {width:395px;         
            height:221px;
	    background:#900;
	    float:right;
	    margin:20px -180px 0 0;
}

#menu ul {margin:233px 0 0 0;
          padding:0;
	  background:#FF0;
}
		  
#menu li {display:inline;
          margin:0 12px 0 0;
		  

}

#menu li a { text-decoration:none;
             color:#999;
	     font-family:'CaviarDreamsBold';
	     font-size:14px;
	     font-stretch:normal;
}

#menu li a:hover{color:#FFF;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Estás esquecendo da propriedade z-index.

 

z-index define a 'profundidade' dos elementos posicionados relativa e absolutamente.

Quanto maior o z-index, mais 'no topo' fica o elemento.

 

Não prestei muita atenção na sua marcação, mas dessa forma, o vermelho sobrepõe o azul

#ret_azul {
	position: relative; /* ou absolute */
	z-index: 10;
}

#ret_vermelho {
	position: relative /* ou absolute */
	z-index: 11;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaduln2    0

Kaduln2
Postado

Rick.hjpbarcelos

 

 

Cara, fusei tanto ontem no tio google que acabei descobrindo o nosso amigo z-index, até então não o conhecia !!

 

porém não tinha conseguido aplica-lo !! Achei sua explicação rápida e direta, definiu bem em 2 linhas e pra mim foi o suficiente !!

 

deu tudo certo aqui !!! valeu mesmo !! sou novo aqui no forum e to curtindo pra caramba !! aprendendo muito !! uma abraço !

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