Div com transparencia em cima de outra div

[VultoBR 0]

Olá tudu bem?

 

Bom, meu problema eh o seguinte.

 

Eu tenho 2 divs, sendo 1 com uma img e uma com uma faixa preta em transparencia

 

consigo fazer as 2 , mas nao consigo posicionar a transarencia em cima da img.... ou ela fica no topo , ou ela fica abaixo da img, alguem sabe como posso resolver?

 

.transparencia{	position: absolute;	z-index:20px;	width: 450px;	height:50px;	opacity: 0.60;	color: #000000;	background-color: #000000;}*.transparencia{	filter: alpha(opacity = 60);}

Onde fica as div.

<table cellpadding="0" cellspacing="0" width="450" height="180">  <tr>	<td>	<div>	  <div class="transparencia">		<div style="color:#FFFFFF">Texto aqui</div>	  </div>	  <div><a href="teste"><img width="450" border="0" height="180" src="galeria/1/1/25235.jpg" /></a></div>	</div>	</td>  </tr></table>

 

Bom espero ter dados as info certas ^^ t+

[Nícolas 4]

Da nela um position: relative e depois vai ajustando com margin-bottom e margin-left.

 

Obs: para evitar bug em outros navegadores da sua div transparente não aumentar (450x50) por causa do texto da um display:block na div também

 

Flw aee

=)

[Vitor Moreno 0]

Velho...Tenta colocar left ou top na div flutuante para poder posicionar onde você quer....abraços http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Nícolas 4]

Velho...Tenta colocar left ou top na div flutuante para poder posicionar onde você quer....abraços http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Não indicaria left e top não.

 

Porque com o position: absolute o left e o top posicionam sim, mas não do posicionamento atual da tag em relação ao conteudo, mas sim do navegador.

 

Ele começa a contar a partir do topo e da lateral esquerda DO NAVEGADOR.... ou seja, se você sua o left com 250px pro lado, como o que vai contar é o posicionamento do navegador se alguem entra no site com uma resolução diferente da sua ja vai cair em lugar errado.

 

A não ser que você de um left de 50% para a div cair no centro da pagina e depois ajuste com margin-left para acertar aonde você quer.

 

Mas aee tem o problema do top

 

Se você acrescentar mais conteudo ao site e por um acaso essa imagem descer você terá que alterar o top do CSS para ajustar.

 

(Ler assim e entender o que acontece é pode ser meio complicado, faz o teste que você vai entender o que to falando)

 

Com o position: relative ele pega o posicionamento da tag em relação ao conteudo e não as laterais do navegador.

 

E você dando um margin-top ou margin-left... positivo ou negativo, você consegue ajustar e vai ficar sempre lá sacou ;)

[VultoBR 0]

Olá, obrigado pela resposta ^^

 

bom, o caso do vitor eu já sabia que nao daria, pq já havia tentato ^^ e o caso do nick eu tentei, com relative e nao deu certo, a unica coisa que eu fiz arrumei com margin dentro do que jah estava mesmo, minha "ignorancia" em CSS me da vergonha http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

 

Mas vlw a ajuda ^^ t+

[rodrigojp 0]

Olá Vulto!

Só um detalhe que eu vi no seu código. Eu acho que em "z-index:20px;" deveria ser "z-index:20;"

 

Um abraço,

 

Rodrigojp http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Leonardo X 0]

Olá,

 

Também me deparei com este problema e consegui fazer uma div sem transparencia dentro de uma transparente. Funciona perfeitamente nos navegadores: IE7, IE8, Mozilla, Chrome, Safari, Opera e Flock.

 

 

<div id="lightbox">

</div>

<div id="pelicula">

    <div id="mensagem">
    
    </div>

</div>

 

#lightbox{
	height: 100%;
	width: 100%;
	position:fixed;
	left:0;
	top:0;
	z-index: 98;
	overflow:visible;
	background-color:#000000;
	opacity:0.9;
	filter:alpha(opacity=90);
}

#pelicula{
	height: 100%;
	width: 100%;
	position:fixed;
	left:0;
	top:0;
	z-index: 99;
	overflow:visible;
}

#mensagem{
	width: 400px;
	height: 200px;
	position:relative;
	top: 30%;
	margin: 0 auto;
	background-color: #FFFFFF;
}

um abraço,

 

Leonardo X

[Thiago Retondar 18]

Leonardo,

 

sei que sua intenção é ajudar, mas tente continuar ajudando em tópicos mais recentes. ^_^

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[ro_wagner 0]

Olá,

 

Também me deparei com este problema e consegui fazer uma div sem transparencia dentro de uma transparente. Funciona perfeitamente nos navegadores: IE7, IE8, Mozilla, Chrome, Safari, Opera e Flock.

 

 

<div id="lightbox">

</div>

<div id="pelicula">

   <div id="mensagem">

   </div>

</div>

 

 

#lightbox{
height: 100%;
width: 100%;
position:fixed;
left:0;
top:0;
z-index: 98;
overflow:visible;
background-color:#000000;
opacity:0.9;
filter:alpha(opacity=90);
}

#pelicula{
height: 100%;
width: 100%;
position:fixed;
left:0;
top:0;
z-index: 99;
overflow:visible;
}

#mensagem{
width: 400px;
height: 200px;
position:relative;
top: 30%;
margin: 0 auto;
background-color: #FFFFFF;
}

 

um abraço,

 

Leonardo X

 

Sua reposta me ajudou e muito! Obrigado! e olha que hj é 10/04/12