Consejos Blogger: Colocar texto alrededor de una imagen

Los elementos agregados a nuestro sitio pueden flotar a la izquierda o a la derecha y no existen términos medios.

Es cierto que en algunas plantillas se ven cosas como float: center; pero eso tiene el mismo efecto que poner float: pepito; ya que, cuando el navegador no reconoce una propiedad, simplemente la ignora y sigue de largo sin hacer nada ni indicar que hay un error así que, cualquier valor colocado que no sea left, right o none no hará nada de nada.

¿Para qué hacer que algo flote? El uso más común es para "acomodar" cierto texto alrededor de una imagen:

<div><img style="float: left;" src="URL_imagen" /> el texto a mostrar </div>

Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.

<div><img style="float: right;" src="URL_imagen" /> el texto a mostrar </div>

Pero ¿qué pasa cuando queremos centrar esa imagen y ponerle el texto alrededor? No hay respuestas para eso. No está previsto e incluso hay quienes sostienen que es innecesario ya que la legibilidad de los textos se vería seriamente afectada y pese a que eso es una opinión subjetiva, no deja de tener cierta lógica.

Lo que si es posible es utilizar columnas donde tengamos una imagen centrada y dos textos, uno a su derecha y otro a su izquierda. La primera solución para eso es un esquema de este tipo:

<style>
  #contenedor-center {
    margin: 0 auto;
    text-align: center;
    width: 620px;
  }
  #texto-L, #texto-R { width: 200px; }
  #texto-L { float: left; text-align:right; }
  #texto-R { float: right; text-align:left; }
</style>

<div id="contenedor-center">
  <div id="texto-L">
    <p> el texto a mostrar </p>
  </div>
  <div id="texto-R">
    <p> el texto a mostrar </p>
  </div>
  <img src="URL_imagen" />
</div>

Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.

Se verán tres columnas pero el texto no rodeará la imagen; abajo quedará un espacio en blanco si es que ese texto es largo.

En css-tricks.com dan una solución aternativa utilziando el pseudo-elemento before para crear un "agujero" y allí poner la imagen:

<style>
  #contenedor-center {
    margin: 0 auto;
    position: relative;
    width: 620px;
  }
  #imagen-center {
    position: absolute;
    top: 0;
    left:50%;
    margin-left:-100px; /* el margen es la mitad del ancho de la imagen */
  }
  #texto-L, #texto-R { width: 49%; }
  #texto-L { float: left; }
  #texto-R { float: right; }
  #texto-L:before, #texto-R:before {
    content: "";
    height: 300px; /* la altura es igual a la altura de la imagen */
    width: 100px; /* el ancho es la mitad del ancho de la imagen */
  }
  #texto-L:before { float: right; }
  #texto-R:before { float: left; }
</style>

<div id="contenedor-center">
  <img id="imagen-center" src="URL_IMAGEN" />
  <div id="texto-L">
    <p> el texto a mostrar </p>
  </div>
  <div id="texto-R">
    <p> el texto a mostrar </p>
  </div>
</div>

Consejos Blogger

martes, 19 de abril de 2011

Colocar texto alrededor de una imagen

No hay comentarios:

Publicar un comentario

Datos personales