Texto Flotante | HTML - CSS



Hola, en esta ocasión les presento un "Texto Flotante", para incorporarlo es sus webs
Tener un Cuadro Flotante en nuestra web es util siempre y cuando lo uses de la manera correcta, básicamente debes evitar que tape el contenido.




El codigo sin usar CSS es el siguiente:


Cita:

<style type="text/css">
.ventana_flotante {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px 6px 6px 6px;
bottom: 50px;
left: auto;
margin-left: -120px;
padding: 10px 0 0;
position: fixed;
text-align: center;
width: 90px;
z-index: 15;
}
</style>
...............
...............

<div class="ventana_flotante">
<!--Aqui el Codigo-->
</div>






El que evita que se sobreponga sobre el contenido y/o hace que se oculte cuando la pantalla no es widescreen es el margin-left: -120px; lo puedes comprobar si achicas la ventana de tu navegador mientras visualizas la web



Si lo deseas Separado, es decir, como codigo CSS


Cita:

<style type="text/css">
.ventana_flotante {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 6px 6px 6px 6px;
bottom: 50px;
left: auto;
margin-left: -120px;
padding: 10px 0 0;
position: fixed;
text-align: center;
width: 90px;
z-index: 15;
}
</style>





y la llamada seria:


Cita:

<div class="ventana_flotante">
<!--Aqui el Codigo-->
</div>






Captura:








Creo que es mejor morir de pie, que vivir de rodillas..
Opciones
Estadísticas
Creado 29.12.2013 a las 00:16 hs
Categoría Información
  • 4
    Medallas
  • 0
    Favoritos
  • 1642
    Visitas
  • 110
    Puntos
  • 0
    Seguidores
Comentarios
9
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Daniel Daniel
Hombre Carbono Member  Mensaje
3,025 29 612
Medallas
4
Recibenos en tu Correo!
rss

Posts relacionados