HTMLVentana flotante en HTML

Ventana flotante en HTML

-

- Advertisment -

Tener un cuadro flotante en nuestra web es útil siempre y cuando lo uses de la manera correcta, básicamente debes evitar que tape el contenido y para nada sobreponerse sobre un banner de Adsense ya que es causal de Baneo. así que teniendo esto en cuenta usa este código con prudencia.

Yo lo utilizo en algunas web para mostrar los botones de ME GUSTA, Twitter y Google Plus, siempre a un lado y posición especifica, ya que si la pantalla es chica (monitores 1024×768 o de tables y celulares), al tener esa posición fija no se va a mostrar ni sobreponer como el área de visualización. aquí un Ejemplo: “PIZARRON DE PESCADORES – EL ANZUELO PERÚ – PARTE II

El código sin usar CSS es el siguiente:

<div style="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;"> 
	<!--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 código CSS

<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:

<div class="ventana_flotante">
<!--Aquí el Código-->
</div>

7 COMENTARIOS

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí

Últimas Noticias

WordPress – Crear BBCODE o shortcode personalizados

Los BBCODES o "shortcode" son esas funciones que tiene Wordpress y que se usan con corchetes, que generalmente te...

WordPress – Enviar título de la página o campo oculto, en Contact Form 7

Problema: Tengo un cliente que tiene una web con muchos productos y en todas sus páginas usa el mismo formulario...

Laravel – Modo Debug según IP

En algunos casos se necesita el modo DEBUG según IP, por ejemplo cuando estamos en producción y tenemos un...

Reemplazar URLs cuando cambias de dominio en WordPress (también de http a https)

Cuando haces un cambio de dominio por alguna razón (antes te llamabas www.viejodominio.com y ahora www.nuevodominio.com) si bien ya...
- Advertisement -

Como ejecutar comandos Artisan desde consola Git

Voy a suponer que ya tienen instalado el composer y php de manera global y un proyecto en Laravel....

Ejecutar Composer y/o PHP de manera Global en Windows

Si por alguna razón al instalar Composer este no funciona desde cualquier ruta estando en linea de comandos (ya...

Debe leer

- Advertisement -

También podría gustarteRELACIONADA
Recomendada para usted