Poner un Cartel flotante

  • abril 22, 2011

Hay muchas formas de fijar carteles en una p??gina web; pueden ser simples o sofisticados pero, todos ellos se basan en el uso de la misma propiedad CSS: position: fixed que hace justamente eso, fijar una etiqueta de tal modo que queda siempre en la misma posici??n.

Esa posici??n se establece indicando el valor de cuatro posibles propiedades: left top right y bottom donde top:0; left:0; es el ??ngulo superior izquierdo de la ventana del navegador y bottom:0; right:0; es el ??ngulo inferior derecho.

Dado que esa posici??n depende del tama??o de la ventana, es posible que en monitores con resoluciones de pantalla muy grandes, el cartel se muestre «muy lejos»; eso suele resolverse con JavaScript pero, si uno no quiere complicarse, basta establecer la posici??n utilizando porcentajes como left: 50%.

Su contenido puede ser cualquier cosa ya que s??lo se trata de una etiqueta exactamente igual a las dem??s; puede tener textos, enlaces, im??genes, tablas, videos, lo que se nos ocurra pero, siempre es bueno que se le agregue alguna clase de enlace que permita «cerrarla».

Los detalles del ejemplo:

<style>
#fijo {
background-color: #678;
border: 1px solid #234;
bottom: 20px;
color: #FFF;
font-size: 16px;
outline: 1px solid #CCC;
padding: 10px;
position: fixed;
left: 50%;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 300px;
z-index: 1;
}
#fijo a { /* depende de la imagen a usar */
display: block;
float: right;
height: 35px;
width: 35px;
}
</style>

<div id="fijo">
<a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';">
<img src="URL_IMAGEN" />
</a>
<p> ....... el contenido ....... </p>
</div>

Fuente




……. el contenido aqu?? lo tienes …….

No Comments Found