viernes, 22 de abril de 2011

Poner un Cartel flotante

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

3 comentarios:

Anónimo dijo...

Hola :

Me llamo Adamaris Zapata soy administradora de un sitio web. Tengo que decir que me ha gustado su página y le felicito por hacer un buen trabajo. Por ello me encantaria contar con tu sitio en mi directorio, consiguiendo que mis visitantes entren tambien en su web.

Si estas de acuerdo hazmelo saber enviando un mail a adamaris.zapata@hotmail.com
Adamaris Zapata

tecnoservicearg dijo...

Muy buena la información del Blog.

Sex Shop dijo...

Muy buenooooo!!!!!!!!!!!!

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones