como fazer div flutuante ?
30/01/2013
0
Olá pessoal como que faço uma DIV ficar flutuante ?
Ari Lima
Curtir tópico
+ 0
Responder
Post mais votado
01/02/2013
<html>
<head>
<title>Div flutuante centro da tela.</title>
<style type="text/css">
body {background-color: #CCC; font-family: Tahoma,Arial;}
#posiciona {
position: absolute; /* posição absoluta ao elemento pai, neste caso o BODY */
/* Posiciona no meio, tanto em relação a esquerda como ao topo */
left: 50%;
top: 50%;
width: 300px; /* Largura da DIV */
height: 250px; /* Altura da DIV */
/* A margem a esquerda deve ser menos a metade da largura */
/* A margem ao topo deve ser menos a metade da altura */
/* Fazendo isso, centralizará a DIV */
margin-left: -150px;
margin-top: -125px;
background-color: #FFF;
color: #FFF;
background-color: #666;
text-align: center; /* Centraliza o texto */
z-index: 1000; /* Faz com que fique sobre todos os elementos da página */
}
#fechar { margin: 5px; font-size: 12px; }
</style>
<script>
function fechar() {
document.getElementById("posiciona").style.display = 'none';
}
</script>
</head>
<!--o elemento BODY por padrão tem posição relativa-->
<body>
<div id="posiciona">
<div id="fechar" align=right><a href="javascript:fechar();">FECHAR</a></div>
Sou flutuante!
</div>
</body>
</html>
Fonte do código acima : [url]http://www.cashpage.net/blog/dicas/como-criar-uma-div-flutuante-no-centro-da-tela-em-css/19[/url]
José
Responder
Mais Posts
30/01/2013
William
Acho q esse link pode ajudar um pouco:
[url]http://www.cashpage.net/blog/dicas/como-criar-uma-div-flutuante-no-centro-da-tela-em-css/19[/url]
[url]http://www.cashpage.net/blog/dicas/como-criar-uma-div-flutuante-no-centro-da-tela-em-css/19[/url]
Responder
31/01/2013
Guilherme
ao pé da letra seria um
mas acho que você está querendo usar um
se for a segunda maneira, não se esqueça de setar altura, comprimento, top e left para dar solidez ao seu layout
float: left /* (ou right) */
mas acho que você está querendo usar um
position: absolute;
se for a segunda maneira, não se esqueça de setar altura, comprimento, top e left para dar solidez ao seu layout
Responder
31/01/2013
José
<html>
<head>
<title>Div flutuante centro da tela.</title>
<style type="text/css">
body {background-color: #CCC; font-family: Tahoma,Arial;}
#posiciona {
position: absolute; /* posição absoluta ao elemento pai, neste caso o BODY */
/* Posiciona no meio, tanto em relação a esquerda como ao topo */
left: 50%;
top: 50%;
width: 300px; /* Largura da DIV */
height: 250px; /* Altura da DIV */
/* A margem a esquerda deve ser menos a metade da largura */
/* A margem ao topo deve ser menos a metade da altura */
/* Fazendo isso, centralizará a DIV */
margin-left: -150px;
margin-top: -125px;
background-color: #FFF;
color: #FFF;
background-color: #666;
text-align: center; /* Centraliza o texto */
z-index: 1000; /* Faz com que fique sobre todos os elementos da página */
}
#fechar { margin: 5px; font-size: 12px; }
</style>
<script>
function fechar() {
document.getElementById("posiciona").style.display = 'none';
}
</script>
</head>
<!--o elemento BODY por padrão tem posição relativa-->
<body>
<div id="posiciona">
<div id="fechar" align=right><a href="javascript:fechar();">FECHAR</a></div>
Sou flutuante!
</div>
</body>
</html>
Responder
Clique aqui para fazer login e interagir na Comunidade :)
