Pie de imagen

Al estilo de las que habitualmente aparecen en prensa, ciertas imágenes ilustrativas de una entrada, pueden necesitar un texto con algún tipo de información que se muestre fuera del flujo del texto principal, acompañando directamente la imagen.

Una de las fantásticas caricaturas que podeis encontrar en el blog de Kikelin.

Para conseguir esto, crearemos un bloque mediante un DIV que flotará dónde nos interese y dentro de ese bloque, pondremos la imagen y el texto.

De esta manera, sólo nos tendremos que preocupar de posicionar el DIV donde queremos, porque todo lo que lleve dentro formará un bloque compacto que se situará en esa posición.

Y después de la teoría, la práctica... Una vez redactado nuestro texto principal y desde Edición de HTML, empezamos a insertar este código allá dónde queremos que aparezca la imagen. En primer lugar creamos un bloque alineado al centro o flotando con respecto al texto principal. Esto sólo dependerá de nuestro gusto estético o del tamaño de la imagen.

/*Bloque centrado*/
<div style="text-align:center;margin:0px auto;">
</div>

/*Bloque flotando a la derecha*/
<div style="text-align:center;float:right;margin:0px 0px 10px 10px;">
</div>

/*Bloque flotando a la izquierda*/
<div style="text-align:center;float:left;margin:0px 10px 0px 10px;">
</div>

Ahora, dentro de este bloque, insertaremos la imagen y el texto. Como se ha dicho, no es necesaria ninguna etiqueta STYLE en este segundo paso, ya que los atributos del DIV serán los que prevalezcan al estar la imagen y el texto anidados dentro de él. A lo sumo, podemos incluir un display:block; en la imagen, para ahorrarnos un salto de línea tras el texto. Lo vemos para un bloque flotando a la derecha, tal y como se ha colocado la caricatura de Kikelin.

<div style="margin: 0px 0px 10px 10px; text-align: center; float: right;">Una caricatura de Kikelin<img style="display:block;" src="URL_IMAGEN"/></div>

A partir de aquí ya podemos añadir un enlace al texto, a la imagen o incluso dar formato a cualquiera de ellos. Por ejemplo, podemos hacer más pequeño el texto del pie de imagen o colocar un borde a la idem.

<div style="margin: 0px 0px 10px 10px; text-align: center; float: right;">
<span >
Una caricatura de <a href="URL_ENLACE_TEXTO">Kikelin</a>
</span>
<a href="URL_ENLACE_IMAGEN">
<img style="display:block;border:2px solid #00000;" src="URL_IMAGEN"/>
</a>
</div>

Nota: En el anterior ejemplo se han introducido saltos de línea entre etiquetas para que se aprecie más fácilmente el anidamiento de estas, pero lo correcto sería redactarlo en una sola línea.

Fotografía con hambre.

Actualización: Nos comentan que los textos largos van ampliando el DIV en lugar de irse adaptando al mismo. Esto es porque en el código de esta entrada no se ha indicado ancho alguno para dichos bloques. Para el caso de textos largos, conviene añadir a la etiqueta STYLE un atributo WIDTH con los pixeles de ancho que queremos que ocupe el bloque.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter