40 replies to this topic

[Maykel Esser]

Olá pessoas

Tenho o seguinte caso:

Ao clicar em um link, tenho um java que muda o visibility de uma DIV para visible (padrão é hidden). Beleza, funfa!
E no fundo, tenho uma div que gostaria deixar transparente, pra dar um acabamento bacana, porém ele está pegando todo o conteúdo e deixando transparente, não somente o BG. Tentei com PNG e não deu, então vou tentar com CSS... porém tem esse problema:

A DIV marcada em vermelho não pode estar transparente, apenas o BG!

a estrutura está assim:

página:

<div id="item1" align="center" class="floater">    <div id="tabelaConteudo">        conteúdo que nao pode ficar transparente    </div></div>

css

div.floater {	position:absolute;	left:0%;	top:0%;	width: 100%;	height: 1803px;	visibility: hidden;	background-color: #000000;	z-index: 3;	filter: alpha(opacity=75);	opacity:0.75;	-moz-opacity: 0.75;}#tabelaConteudo{	background-color: #FFFFFF;	border: 3px solid #CCCCCC;	width:500px;	padding: 10px;	margin-top: 20%;	z-index:4;}

Attached Files

•  _p.jpg   177.29KB   8 downloads

Edição feita por: maykel, 21/10/2008, 12:09.

[Édipo Costa Rebouças]

Sempre um div filho vai herdar a transparência do div pai, leia o tuto e seja feliz.

http://forum.wmonlin...howtopic=206414

[Maykel Esser]

amigo, não consegui aplicar seu exemplo ao meu caso! Você pode me ajudar?

[Édipo Costa Rebouças]

[codebox]
<div id="item1" align="center" class="floater">

<div id="transparencia"> <!-- --> </div>
<div id="tabelaConteudo">
conteúdo que nao pode ficar transparente
</div>
</div>
[/codebox]


vc vai colocar a transparencia no id="transparencia" ou algo equivalente que vc queria fazer, ele vai ter um position:absolute; top: 0, left: 0; height: 100%; width: 100%; as declarações de opacidade e o z-index: 0;

div id="tabelaConteudo" vai ter que ter um position: relative | absolute, z-index: 1.

as declarações de transparencia irão ficar somente na div com id="transparencia".

class="floater" tem quer position: relative | absolute

Editado:

A cor que vai ganhar a transparencia vai na div id="transparencia" tb.

Flw.

Edição feita por: Édipo Costa Rebouças, 15/10/2008, 14:18.

[Maykel Esser]

tentei o que você disse:

ficou assim:

html:

<div id="item1" align="center" class="floater"><div class="transparencia"></div><div class="tabelaConteudo">  <img src="imagens/produtos/boias.jpg" /><br />   <input class="button" type="submit" onClick="alteraVisibilidade('item1');" value="FECHAR" /></div></div>

css:

#flash{    position: relative;    z-index: 0;}div.floater {	position:absolute;	visibility: hidden;	z-index: 2;}.tabelaConteudo{	background-color: #FFFFFF;	border: 3px solid #CCCCCC;	width:500px;	padding: 10px;	margin-top: 20%;	z-index:3;	position:relative;}#transparencia{	position: absolute;	top: 0%;	left: 0%;	width: 100%;	height: 1803px;	background-color: #000000;	-moz-opacity: 0.65;	-khtml-opaciy: 0.65;	opacity: 0.65;	filter: alpha(opacity=65);	z-index: 1;}

Porém ficou esquisito, não tem mais fundo, hehe, e a div de conteudo desceu um bocado!

O que eu tenho que alterar a mais aí?

Attached Files

•  _p.jpg   229.2KB   4 downloads

Edição feita por: maykel, 15/10/2008, 14:25.

[Édipo Costa Rebouças]

div.floater {
position:absolute;
visibility: hidden;
z-index: 2;
}

vc tem que dar uma largura para a div floater, para que a di transparencia pegue essa largura também

[Maykel Esser]

verdade! Falha nostra... outra coisa era que ele estava procurando uma classe transparencia, mas eu tinha registrado como uma ID, aí nao achava nada mermo!

Cara, valeu a ajuda, de verdade!

só uma coisa, no IE6 ele ficou quebrado! Ele funfou a transparencia, mas ta tudo alinhado a esquerda, e não está respeitando o Width 100% Oo!

[Cristiano Galdino]

Já vi alguns tópicos semelhantes a esse.

http://developer.moz..._and_Background
http://forum.wmonlin...howtopic=202445

[Maykel Esser]

Então Cristiano, eu não procurei bem, ahueahuae

Mas essa parte já foi resolvida! Tirando a parte do IE6 que não respeita a WIDTH nem a HEIGHT que eu setei! -.-'

div.floater {
	position:absolute;
	visibility: hidden;
	z-index: 2;
	left: 0%;
	top: 0%;
	width:100%;
}
.tabelaConteudo{
	background-color: #FFFFFF;
	border: 3px solid #CCCCCC;
	width:500px;
	padding: 10px;
	z-index:3;
	position:relative;
	margin-top: 200px;
}
#transparencia{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 1803px;
	background-color: #000000;
	-moz-opacity: 0.65;
	-khtml-opaciy: 0.65;
	opacity: 0.65;
	filter: alpha(opacity=65);
	z-index: 1;
}

[Édipo Costa Rebouças]

obs: 0% não ecziste , é 0, aqui funfa no ie6, tenho que dar uma olhada depois estou meio sem tempo. tenta colocar um text-align: center no div floater para o ie6.

aw vc tiver uma versão online da pagina, passa ai pra gente.

Edição feita por: Édipo Costa Rebouças, 15/10/2008, 15:12.

[Cristiano Galdino]

Eu não tenho o IE6 aqui pra testar, na verdade ignoro ele. Sorry.

[Maykel Esser]

Corrigido Édipo! Mas continua a mema coisa, rs!

Vou postar umas screens:

Firefox
IE6
IE7

[Édipo Costa Rebouças]

 ie7.JPG   73.48KB   7 downloads  ie6.JPG   67.66KB   5 downloads  firefox2.JPG   70.43KB   5 downloads
ie7, ie6, firefox2

[codebox]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
/* <![CDATA[ */
div.floater {
position:absolute;
visibility: none;
z-index: 2;
left: 0%;
top: 0%;
width:100%;
height: 100%;
}
.tabelaConteudo{
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
width:500px;
padding: 10px;
z-index:3;
position:relative;
top: 200px;
}
.transparencia{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000000;
-moz-opacity: 0.65;
-khtml-opaciy: 0.65;
opacity: 0.65;
filter: alpha(opacity=65);
z-index: 1;
}
/* ]]> */
</style>
</head>
<body>
<div id="item1" align="center" class="floater">
<div class="transparencia"> <!-- --> </div>
<div class="tabelaConteudo">
<img src="imagens/produtos/boias.jpg" alt="" /><br />
<input class="button" type="submit" onClick="alteraVisibilidade('item1');" value="FECHAR" />
</div>
</div>
</body>
</html>
[/codebox]

[Maykel Esser]

Versão Online

Opa, resultados começam a surgir

Masssssssss maldita Microsoft que não quer reconhecer o WIDTH: 100%!!!!! AAAAAAAAAAAAAAAA! O IE6 e IE7 Está tudo OK! O IE6 já aparece a transparencia e a altura certa, só não quer fazer a largura em px! Tem algum conflito no CSS que não permita usar pixels e % em dimensões? (largura e altura juntos)

[Édipo Costa Rebouças]

ele deve estar pegando a largura de alguma outra coisa que esta com position relative, seta a largura do floater via js por enquanto, pega do objeto window . http://www.criarweb....artigos/326.php