Untitled Document
Olá, pessoal hoje vamos colocar uma div flutuante como a que vemos ao canto direito inferior a este site. um div flutuante e fixa funcionando tanto no IE como em outros navegadores.
Bom vamos ao trabalho!
Primeiro temos que criar um css da seguinte maneira:
.div_flutuante{
/*Margem zero de todos os lados*/
margin: 0;
/* É para ser mostrada*/
display:block;
/* Posição é fixa*/
position:fixed;
/* Tamanho da div*/
width:200px;
/* Largura da div*/
height:13px;
/* Quantos pixels do rodape do navegador*/
bottom: 5px;
/* Quantos pixels terá do lado direito do navegador*/
right:5px;
/* Cor da Texto */
color:#000000;
/* Aparecera na frente de tudo*/
z-index:100;
/* Cor de fundo da div*/
background-color:#DA4616;
/* Alinhamento do texto */
text-align:center;
/* Texto em negrito*/
font-weight:bold;
}
A partir dai é só criar a div:
<div id="div_flutuante">Minha div flutuante</div>
Depois disto basta juntar as informações, assim:
<!-- ESTAS TAGS SÃO NECESSÁRIA PARA QUE A DIV FLUTUANTE FUNCIONE NO IE -->
<!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">
<!-- ESTAS TAGS SÃO NECESSÁRIA PARA QUE A DIV FLUTUANTE FUNCIONE NO IE -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.div_flutuante{
/*Margem zero de todos os lados*/
margin: 0;
/* É para ser mostrada*/
display:block;
/* Posição é fixa*/
position:fixed;
/* Tamanho da div*/
width:200px;
/* Largura da div*/
height:13px;
/* Quantos pixels do rodape do navegador*/
bottom: 5px;
/* Quantos pixels terá do lado direito do navegador*/
right:5px;
/* Cor da Texto */
color:#FFFFFF;
/* Aparecera na frente de tudo*/
z-index:100;
/* Cor de fundo da div*/
background-color:#000000;
/* Alinhamento do texto */
text-align:center;
/* Texto em negrito*/
font-weight:bold;
/* Tipo de fonte */
font-family:Verdana, Arial, Helvetica, sans-serif;
/* Tamanho da fonte */
font-size:10px;
}
</style>
</head>
<body>
<div class="div_flutuante">Minha div flutuante</div>
<!-- ESTA DIV È CRIADA SOMENTE PARA PODER-MOS VISUALIZAR SE FUNCIONARA COM ROLAGEM -->
<div style="height:800px;; background:#0000FF"></div>
<!-- ESTA DIV È CRIADA SOMENTE PARA PODER-MOS VISUALIZAR SE FUNCIONARA COM ROLAGEM -->
</body>
</html>
Isso ai pessoal!
Abraço!