Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucaswxp

[Resolvido] Fazer div ocupar toda tela

Por , em Desenvolvimento frontend

Recommended Posts

lucaswxp    22

lucaswxp
Postado

Olá galera ^^

Sabem o lightbox? Quando uma foto está aberta por ele não fica um fundo preto? Quero fazer algo do tipo (o fundo), não tenho nada ainda, pois não sou muito bom com CSS :P

Eu pensei que seria um div que ocupa toda tela, mas não tenho certeza. Como faço (com a opcidade também)? Lembrando que eu quero fazer apenas o elemento que ocupa toda tela, nada de JS nem coisa do tipo, depois eu me viro com isso :)

 

EDIT:

 

Consegui chegar nisso:

<div style="position:absolute;z-index:11;background-color:black; height:100%; width:100%;"></div>
Porém em algumas páginas ela nao fica totalmente 100%

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Resende    1

Rodrigo Resende
Postado

Ta ai amigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div com opacidade ocupando toda a tela</title>
<style>
*{
	margin:0;
	padding:0;
}
#suadiv{
	position:absolute;
	top:0;
	left:0;
	z-index:11;
	background-color:#000;
	width:100%;
	height:100%;
	opacity: .50;
	filter: alpha(opacity=65);
}
</style>
</head>

<body>
<div id="suadiv"> </div>
</body>
</html>

Caso tenha duvidas sobre algumas propriedades basta procurar no Google que encontrara.. ou pode postar aqui mesmo..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Resende    1

Rodrigo Resende
Postado

Eu testei no IE7 e Firefox... No IE7 quando eu abri o arquivo pediu para desbloquear um troço la rs.... mas quando tu colocar isso em um servidor vai rodar beleza... http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito