Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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+
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
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 ;)
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+
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
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
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
>
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
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
=)