domingo, 24 de outubro de 2010

Div fixa, com CSS!

Já viu aqueles sites que ficam exibindo propagandas e mais propagandas como se fossem pop-ups, mas não são pop-ups?
Aquilo é muito irritante, mas está presente em muitos portais. Como a maioria dos navegadores hoje em dia ficam bloqueando as popups, a saída é apelar para a criatividade, e alguns recursos de programação.
Materiais:
- Uma página HTML;
- Um Layer (DIV);
- Um conteúdo para o layer;
- Um comentário W3 (para navegadores que não suportam o css 'fixed');
- Algumas linhas em CSS;
Modo de preparo:
Misture tudo e depois veja se deu certo, se não funcionou, tente o exemplo abaixo:
<!-- Comentário DOCTYPE necessário para alguns navegadores -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Código de estilo que define as margens e posições do DIV -->
<style>
body{margin:0; padding:0;}
div {
//~> Esta posição "fixed" que informa que a DIV deve ficar fixa.
position:fixed;
top:10px;
left:10px;
border:1px solid black;
background:#CCC;
}
html, body
{
_height: 100%;
_overflow: auto;
}
div {
_position: absolute;
}
</style>

</head>
<body>
<div align="center">
TESTE DE DIV FIXA NA TELA
</div>
<br><br><br><br><br><br><br>a<br><br><br><br><br><br>
<br><br><br>a<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>a<br>
<br><br><br>a<br><br>a<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>a<br><br><br><br>a
</body>
</html>

Agora é só adaptar esse exemplo ao seu código e se divertir!

0 comentários:

Postar um comentário

Alguma dúvida?

 

© 2009Java Erro | by TNB