Jump to content


Photo

Problemas Com Div Transparente


  • Faça o login para participar
5 replies to this topic

#1 Bruno66

Bruno66

    Turista

  • Usuários
  • 35 posts
  • Sexo:Não informado

Posted 14/01/2008, 10:43

Estou com um probleminha na exibição de uma div transparente.

De acordo com a figura 1Attached File  Figura1.gif   16.22KB   16 downloads, qdo clico no link pra exibir as divs as mesmas aparecem sempre no topo.
Mas qdo desço a barra de rolagem as divs ainda continuam sendo exibidas no topo do navegador como mostro na figura 2Attached File  Figura2.gif   14.71KB   10 downloads, mas eu queria que ela fosse exibida no topo na área d visualização do browser.

o código q estou usando é este:

[codebox]
<html>
<head>
<title>Comentários</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 20;
left: 25;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>

</head>
<body>
<p> <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Comentar</a></p>

<div id="light" class="white_content">Insira aqui seu comentário.

<a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Fechar</a></div>
<div id="fade" class="black_overlay"></div>

</body>
</html>[/codebox]

#2 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 14/01/2008, 11:32

Você quer que quando o usuário movimentar a barra de rolagem, a caixa flutuante acompanhe o movimento ? Se for, isso é com javascript.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#3 Bruno66

Bruno66

    Turista

  • Usuários
  • 35 posts
  • Sexo:Não informado

Posted 14/01/2008, 12:23

Você quer que quando o usuário movimentar a barra de rolagem, a caixa flutuante acompanhe o movimento ? Se for, isso é com javascript.


Não precisa movimentar a barra e a div ir seguindo, eu só queria que ela abrisse no centro da tela, tipo como mostro na figura 2 ela abre fixa sempre no topo do browser.

Não sei se deu pra entender mas copie o código q da pra ver melhor.

#4 Aimberê Rocha Mendonça

Aimberê Rocha Mendonça

    Turista

  • Usuários
  • 45 posts
  • Sexo:Masculino
  • Localidade:brasília

Posted 14/01/2008, 15:33

cara é só vc formatar com o css normal, na sua segunda classe vc colocou:
display: none;			
position: absolute;			
[b]top: 20;			
left: 25;[/b]			
width: 50%;				
height: 50%;		
padding: 16px;			
border: 16px solid orange;			
background-color: white;			
z-index:1002;			
overflow: auto;

repara no seu top e no seu left, eles são oq px ou %, coloque eles como px e formate a div novamente que ela vai se movimentar, é garantido,
vlw cara, espero ter ajudado,
abrass...
Aimberê Rocha Mendonça
IT Analyst and Developer

#5 Gustavo Neves Alves

Gustavo Neves Alves

    Novato no fórum

  • Usuários
  • 7 posts
  • Sexo:Masculino
  • Localidade:Ipatinga - MG

Posted 14/01/2008, 16:15

umm não sei se entedi bem

mas se for para posicionar no centro da pagina mude seu CSS pra mais ou menos assim


display: none;
position: absolute;
top: 20;
left: 25; -->> left: 50%; (posiciona o inicio da sua janela no centro)
width: 50%; -->> width: 640px; (defina um tamanho fixo nao deixe dinamico no caso e um exemplo ok)
margin-left: -320px; <<-- adicione esta linha para voltar a jenela metade do seu tamanho em relação a posição dela
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;

bem caso voce precisa que ela assuma o tamanho da janela em height no IE e preciso definir as tags HTML e BODY cmo height: 100%;

espero ter entendido o que vc tava qrendo =D

#6 Bruno66

Bruno66

    Turista

  • Usuários
  • 35 posts
  • Sexo:Não informado

Posted 14/01/2008, 17:25

Então Gustavo, nesse esquema que vc falou a largura fica centralizada, só falta da altura que fazendo nesse msm esquema e colocando o body como height 100% não deu certo ainda :S




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq