Como fazer div opaca cobrir todo conteúdo da página?

[Larissa08 0]

Olá!

Tenho uma página que mostra resultados,

nesta página quando você clica em algum resultado aparece uma div encobrindo a lista e que mostra um formulário com os dados do resultado que você clicou para serem modificados.

Então..

essa Div só está encobrindo a parte da tela que aparece inicialmente..

se eu desço o scroll ela não cobre o resto da lista, deixando eu clicar em outro resultado.

Gostaria de saber como faço isso.

a Div é esta:

#divOpaca {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	z-index:1;
	background-image:url(pixel.png) repeat-y 100% 0;
	visibility: hidden;
	background-color:#7A8628;
	opacity: .5;
	filter: alpha(opacity=50);
	overflow:auto;
}

 

Não está cobrindo tudo nem no firefox nem no IE.

Preciso disso o mais rápido possível!

Agradeço desde já qualquer ajuda .

Beijos.

:unsure:

[William Bruno 1501]

acho que eis a questão:

height:100%;

ou seja, 100% da viewport, o Body que aparece na janela.

Tenta uma altura, com o valor: auto ou algum valor definido em pixels..

 

Tem algum link pra gente poder vizualizar?

[Larissa08 0]

Obrigado pela dica..

desculpa, mas nao posso por o link pois é job do meu trabalho, então se der algum problema eu sou culpada entende?

lamento.

beijos.

brigado mesmo assim

[William Bruno 1501]

Ok, tudo bem...

mas funcionou?

 

qualquer coisa, continua postando.. e coloca uma parte maior do código.. por que ai pelo menos a galera do forum pode testar e aprender antes de tentar te ajudar..

sem contar que fica mais facil ^^

[Larissa08 0]

Olha,

com o height:auto;

nao da..

a div some..

só fica uma linha no alto da página.

 

 

#divOpaca {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	z-index:1;
	background-image:url(pixel.png) repeat-y 100% 0;
	visibility: hidden;
	background-color:#7A8628;
	opacity: .5;
	filter: alpha(opacity=50);
	overflow:auto;
}

aah..

eu nao tentei por o tamanho dela com pixels por que nem todas as listas são do mesmo tamanho..

tem busca que mostra 5mil resultados e outras que podem mostrar até 1

então ficaria muito grande nesse ultimo caso..

:/

[Maujor 144]

Faça o seguinte:

 

1. Determine a altura necessária para cobrir toda a lista. (Digamos que seja 830px)
   
2. Retire a declaração height: auto e acresente min-height: 830px ( a altura mínima para cobrir toda a lista)
   
3. Acresente mais esta regra CSS: * html #divOpaca {height:830px;} ( a altura mínima para cobrir toda a lista)
   

[William Bruno 1501]

ahuahuahua... eu acredito em 2 coisas sobre programação:

 

1° TUDO É POSSIVEL!(levando em conta as devidas limitações de hardware, huhu).

2° Nenhuma linguagem consegue sozinha as respostas, sem um pouco de criatividade e um bom algoritmo.

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

 

Estive pensando no seu caso... principalmente na frase:

"tem busca que mostra 5mil resultados e outras que podem mostrar até 1"

 

Então, a resposta pode parecer absurda... mas que tal fazer um "height variável, definido em pixels", ja que o valor auto não funciona ? :wacko:

 

Colocando o estilo dessa DIV dentro do documento que está retornando a consulta, é plausivel imprimir qualquer coisa com php(ou outra linguagem Server-Side que você usa para trazer as informações do banco)

 

height: <?php 
	$cont=mysql_num_rows($sql);
	print $cont*15; ?>px;

Será mostrado no HTML, portanto interpretado pelo Browser somente o seguinte:

height: tantospixels;

Eu criei uma variável $cont, disse pra ela receber o número de linhas retornadas pela consulta $sql(essa é a parte responsável pelo "5mil .. até 1"), e logo em seguida, multipliquei este valor por 15(a altura que mede em pixels cada linha).

 

A parte interessante, é que FUNCIONA PERFEITAMENTE, já que se a tua consulta "$sql":

retornar 6 linhas/resultados, teremos um height de 6*15=90px,

se ela retornar 1 linha/resultado, um height de 15px,

se ela retornar 500linhas/resultados, um height de 7500px!! :blink:

 

Enfim, o valor vai variando conforme e exatamente o números de registros que você precisa mostrar.

 

Que tal, esta solução? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Maujor 144]

Então, a resposta pode parecer absurda... mas que tal fazer um "height variável, definido em pixels", ja que o valor auto não funciona ?

 

Gostaria de saber como seria o código php para os casos de pequenas alturas da DIV já que ela tem que cobrir toda a lista?

"Como fazer div opaca cobrir todo conteúdo da página?"

[William Bruno 1501]

	height: <?php 
	$cont=mysql_num_rows($sql);
	print $cont*20; ?>px;
/*alterei o valor de cada linha de 15 para 20. Acompanhe no código fonte, como o valor do Height da Div #conteudo, varia conforme surgem mais ou menos linhas na cosulta.*/

Bom, criei esse arquivo pra demonstrar:

http://www.cenasordidas.hbe.com.br/exemplo...ra_variavel.php

 

Forma de interagir, vá clicando no "nome" das flores, que assim, será mostrado na DIV vermelha os registros que tem essas flores, e a altura da DIV vai variar, como você pode acompanhar no Codigo Fonte.

 

<!-- Ah sim.. agora que eu entendi.. -->

A DIV tem de cobrir TODO o conteudo da página, mesmo se ela só tiver 1 linha de resultado?

[Larissa08 0]

Olha..

sim.

Quando tiver apenas 1 resultado ela irá cobrir a parte da tela que estou vendo, sem scroll (isso já tem)

mas quando tem mais resultados e eu preciso scrollar , a div não aumenta junto entende?

o tamanho minimo dela é o tamanho da tela que eu vejo (até o rodapé)

É mais ou menos o que você fez com as flores de exemplo, mas teria um tamanho mínimo e iria se sobrepor ao texto, ao link, no caso que levaria a outros resultados.

[Larissa08 0]

height: <?php 
	$cont=mysql_num_rows($sql);
	print $cont*15; ?>px;

Será mostrado no HTML, portanto interpretado pelo Browser somente o seguinte:

height: tantospixels;

 

Como faço isso no ASP?

Tem como?

Esse sistema que to mechendo é todo em ASP

[William Bruno 1501]

Nunca mechi com ASP, mas a idéia acredito que seja a mesma.

Eu dei um guardei o valor do número de linhas que foi retornado pela consulta, na variável $cont, multipliquei por 20(o tamanho de cada linha), e "imprimi" tudo isso para ser o valor do height.

[Larissa08 0]

Olheem,.

achei um exemplo bem legal do que eu quero

http://g1.globo.com/Noticias/Mundo/0,,MUL138616-5602,00.html

 

quando você clica para ampliar a foto.

aparece uma div cobrindo todo o conteúdo e bloqueando tudo acompanhando o scroll.

queria que a minha fizesse isso..

mas ela nao acompanha o scroll.

 

já tentei height:auto;

já tentei min-height

já tentei position:relative; só que ficar pior ainda.

e um monte de outras coisas.

 

se eu deixar a div com position:fixed; fica tudo certo como eu quero no firefox, e no IE fica um espaço em branco no topo da página,fazendo a página aparecer muito lá embaixo..a div nao se sobrepoe ao conteúdo.

 

espero que possam me ajudar.

beijos.

[micox 2]

Vê se isso te ajuda: http://www.elmicox.com/2007/simulando-posi...sem-javascript/

 

 

<head>
<style type="text/css">
	/* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */
	.fixed { position: fixed !important; }
</style>
<!--[if lte IE 7]>
	<style type="text/css">
		/* FAZ O POSITION FIXED PARA O IE (não mexa).
			Para funcionar o DTD do documento deve estar correto. E não ser quirksMode
			By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com
		 */
		.fixed { position: absolute !important; }
		body { height: 100% !important; width: 100% !important;
			   margin: 0 !important; position: relative;  }
		html { overflow-y: hidden !important;  }
		#newbody { position: relative !important; overflow-y: scroll !important;
				   height: 100% !important; width: 100% !important; margin: 0 !important; }
	</style>
<![endif]-->
<style>
/* colocando bordas só pragente ver melhor */
#newbody { border: 1px solid blue; }
#cobretudo { border: 1px solid red; width: 100%; height: 100%; }
</style>
</head>
<body>
<div id='cobretudo' class='fixed'>Cobre tudo</div>
<div id='newbody'>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
	<p>adfasf alsçdjf çalskjdfllaçskd flk</p>
</div>
</body>

[Larissa08 0]

Olá!

desculpa..

mas eu nao mecho com essas coisas há muito tempo...

não sei como adaptar o que você passou pra classe que eu já tenho. :unsure:

beijos.

[hunternh 2]

http://rapidshare.com/files/93676761/transparencia.rar.html

 

Com esse script a div cobre todo o site.

Para exibir a transparência use transparencia.show() e para remover transparencia.hide()

[micox 2]

Olá!

desculpa..

mas eu nao mecho com essas coisas há muito tempo...

não sei como adaptar o que você passou pra classe que eu já tenho. unsure.gif

beijos.

Você leu o link que passei? heheh

É só:

 

1) Colocar a div que é pra cobrir tudo no início do código

2) Colocar a classe fixed nela

3) Ajustar a altura e largura dela para 100%

4) Colocar a transparencia nela ( talvez te ajude: http://elmicox.blogspot.com/2006/08/tablel...vas-e-semi.html )

4) Colocar a id 'newbody' na div que tem o conteúdo do site

 

Prontim.

[brcontainer 16]

a solução do micox é uma das melhores ideias

tem um tópico antigo falando sobre isso

de uma pesquisada no forum abraço ;)

[hunternh 2]

Eu usava esse tipo de css, só que tive problemas com background que acaba ficando fixo.

[William Bruno 1501]

Efeitos de lightview só abrem imagens?

 

Porque se for possível, fazer abrir um conteúdo html, daria certo oque a Larissa ta querendo...

e é lightview o exemplo que ela postou.