Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

30 ago 2010

Elemento que flota sobre nuestra web

En unas pocas lineas os vamos a enseñar como colocar en vuestra web o blog una imagen o "caja" que flota sobre todo nuestro contenido, no perdiéndose de vista al mantenerse siempre en el mismo lugar de nuestra pantalla. Este será un ejemplo básico, aunque empezando con este mismo código se pueden llegar a ideas muy interesantes para aplicar.


Elemento Flotante como este, que puede ser una imagen con enlace, por ejemplo
La idea es poner una imagen o un especie de "caja" (como se puede ver en la esquina inferior izquierda, el cuadrado rojo) para meter dentro varias imágenes o lo que se quiera, y que se mantenga flotando encima de todo el contenido del blog, en un lugar fijo, que no cambie aunque bajemos el contenido del blog o lo subamos. Esto se puede conseguir fácilmente con una propiedad CSS del HTML, y lo explicaremos de forma que se pueda usar dentro de una entrada (para que se vea sólo en esa entrada concreta) o que se pueda colocar en un widget HTML, de forma que así no sea necesario modificar la plantilla en ningún momento.

Dividiremos en dos partes lo que hay que colocar. Primero, las propiedades para hacer el objeto en cuestión en un elemento flotante:

<style type="text/css">
#flotante1 {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100px;
   height: 100px;
}
</style>

Este código es el que hace el objeto flotante (el fixed, en violeta), y hay que tener dos cosas en cuenta para su correcto funcionamiento.
  • El objeto es necesario colocarlo en un lugar que puede ser: arriba (top), abajo (bottom), a la izquierda (left) o a la derecha (right). Solo hace falta colocar dos datos, es decir, si se coloca arriba del todo (top) no hace falta poner el dato referente a abajo (bottom) porque ya se sobrentiende, y esto igual con el izquierda-derecha. El número que le acompaña son los píxeles o el porcentaje que le separan del lado indicado, por ejemplo, si se indica top: 50px el objeto estará a 50 píxeles de la parte de arriba, o si se coloca left: 33%, el objeto empezará justo en un tercio de la pantalla, cerca de la parte izquierda
  • los elemento width y height, son el tamaño del objeto, el ancho y el alto respectivamente. Es importante ajustarlo a la imagen o texto que se quiera incluir, para que no haya problemas.

Y después queda el objeto que se quiere hacer flotante:

<div id="flotante1">...CONTENIDO...</div>

Siendo el CONTENIDO lo que contiene esta "caja" flotante. Notar que el "id" es el mismo que en el código de arriba, y se pueden hacer varios códigos parecidos con flotante1, flotante2, o con el nombre que uno quiera.

También puede ser simplemente una imagen:

<img id="flotante1" src="DIRECCION DE LA IMAGEN" />

Para colocar un ejemplo práctico y que casi todo el mundo gustará usar, ya que es como el objeto colocado como se ve en esta entrada, con una imagen con enlace , sería como sigue:

<style type="text/css">
#flotante1 {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100px;
   height: 100px;
}
</style>
<div id="flotante1"><a href="DIRECCION DEL ENLACE" border="0"><img id="flotante1" src="DIRECCION DE LA IMAGEN" /></a></div>

Haciendo los datos width y height igual que los datos de ancho y alto de la imagen, colocando la dirección del enlace y la dirección donde se encuentra la imagen, tendréis el objeto flotante. Recordad que esto lo podéis colocar en un widget html o directamente en "Edición de HTML" en una entrada, para que sólo se vea el objeto al visualizar esa entrada.

Dudas y errores en los comentarios, gracias

18 comentarios:

  1. Muchas gracias esto es justo lo que estaba buscando

    ResponderEliminar
  2. Justo lo que nesecitaba amigo

    ResponderEliminar
  3. lo voy a provar, pero me ha servido para darme idea de como hacer lo que quiero.... gracias

    ResponderEliminar
  4. Gracias!
    No sabes cuanto me sirvio ;)

    ResponderEliminar
  5. Se podría lograr que el objeto se este desplazando por la pantalla de un lado a otro? :) Muchas gracias. Un ejemplo sería el de esta página, el globito rosa : http://onemomentintimes1.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Para hacerlo de esa manera, es algo más complicado. Hace falta crear (o usar) un "pequeño" programa en javascript que haga el efecto. Lo puedes encontrar hecho, como por ejemplo aquí, pero tendrás que subir un archivo js a algún sitio donde puedas subir archivos (y después que pueda acceder directamente, sitios como mega o similares no sirven) y desde tu blog configurarlo para que funcione en tu blog. Si tienes experiencia en hacer estas cosas no es muy complicado, si no... puede ser una completa odisea.

      Eliminar
  6. hola, tome tu consejo y lo aplique sobre mi logo y quedo estupendo, sólo que a continuacion llevo un contenedor de imagen y pasa por encima de mi logo, como puedo lograr que no lo haga? gracias

    ResponderEliminar
    Respuestas
    1. Holas.
      Sin ver a lo que te refieres no te podría decir qué ocurre.

      Eliminar
  7. Muy buenas.
    Me encanta esta solución, pero tengo un problema a la hora de incluirlo en mi web (en weebly): no siempre está "por encima" de todas las imágenes, a veces se coloca por debajo, por lo que no se ve y, además, no se puede acceder al link que propongo con esta imagen.
    Alguna solución?
    Gracias por su tiempo.

    ResponderEliminar
    Respuestas
    1. Hola.

      Sin verlo, lo que se me ocurre es que le añadas al código CSS la propiedad z-index. Va de 0 a 255, siendo 0 la "altura" de la web base, y poco a poco se va subiendo para que unos objetos estén encima de otros. Raramente se suele trabajar más allá del 10, a no ser que quieras asegurarte que este siempre encima de todo. Por ejemplo:

      z-index: 10;

      PD.: Con los flash suele tener problemas esta propiedad porque ellos quieren estar encima de todo. Son algunos de sus problemas.

      Eliminar
  8. Como puedo hacer que desaparezca al disminuir la resolución de la pantalla? es decir, que no quede por encima del contenido del blog?

    ResponderEliminar
    Respuestas
    1. Jugando con los códigos CSS, los tamaños y la posición se pueden hacer algunas cosas dependiendo de cómo lo quieras. Por ejemplo, se puede hacer que tenga una posición fija horizontal (con el left y right) y si se hace más pequeño que esa posición el cuadro se iría por la izquierda perdiéndose de vista.

      Sin embargo si se quiere hacer dinámicamente (que en tiempo real decida desaparecer o no dependiendo del tamaño de la ventana) o sea alguna combinación más complicada que no se pueda hacer con CSS puro, tendrás que usar Javascript, y buscar un pequeño programa que detecte el tamaño de pantalla y que decida si el elemento se mantiene visible o no dependiendo de las condiciones que quieras.

      Eliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.