Pie de imagen | Oloblogger Al estilo de las que habitualmente aparecen en prensa, ciertas imágenes ilustrativas de una entrada,...

27 de abril de 2009

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
Copy URL

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

follow us in feedly

31 comentarios :

  1. Muy bueno!!! me llevo toda esta información.
    Gracias Oloman, saludos

    ResponderEliminar
  2. Gracias por simplificarme las pruebas. Más o menos lo que has puesto es lo que yo había conseguido (esto es para darme ánimos a mi misma, así me creo que estoy aprendiendo). Tanto en mis pruebas como en tu solución he encontrado un problema. Si el texto es más largo que el ancho de la foto, la línea de texto continúa y va desplazando la imagen. Mi chapuza ha sido probar e ir cortando el texto en líneas con la etiqueta br. He visto en algunos sitios que eso se puede solucionar con unas líneas de CSS en el código de la plantilla. Según los proponentes, con ese añadido de CSS, el texto se distribuiría en diferentes líneas del mismo ancho que la imagen automáticamente. Sin embargo he probado las diferentes propuestas y no funciona ninguna, no sé si porque he hecho algo mal o por qué.
    Muchas gracias por todo.

    ResponderEliminar
  3. Hola.
    Esta vez no es una cuestión técnica, solicito consejo. Durante todo este tiempo he estado siempre leyendo cosas a salto de mata. Creo que es hora de parar y leer algo más formal y empezar por el principio. Así que a conseguir libros toca, pero el nivel no puede ser muy alto, claro está.
    ¿Tienes alguna recomendación?
    He encontrado algunos gratuitos:
    http://www.librosweb.es/
    ¿Los conoces? Si es así, ¿merecen la pena? ¿Son de mucho nivel para empezar?
    Una vez más, gracias por todo.

    ResponderEliminar
  4. No los conocía mujer Quijote, pero no tienen mala pinta. Le he dado una vueltecita rápida al de Introducción a CSS y me parece que está bastante bien.

    Sólo echo en falta ejemplos, que siempre ayudan a clarificar qué hace cada cosa.

    Si ya sabes algo sobre como funciona CSS a nivel atributos, esto te ayudará a entender cómo funciona a nivel global y luego descender a cada selector. Normalmente, los que aprendemos a "salto de mata", lo hacemos al revés.

    ResponderEliminar
  5. Muchas gracias. Creo que empezaré por xhtml, como dices, lo que aprendemos a salto de mata está aprendido al revés. A base de cosas sueltas, de tus ayudas, de mis peleas, he aprendido a hacer cosas concretas, pero sólo eso, sin saber muy bien qué estoy haciendo ni cómo funcionan las herramientas que uso. Así que como te digo, a empezar de cero y por el principio. Primero xhtml, luego, si logré asimilar algo, pasaré a css.
    Si tienes algún libro que recomendarme te lo agradeceré.
    Un saludo.

    ResponderEliminar
  6. Me parece que no entendiste la indirecta de "los que aprendemos a salto de mata" :) Estoy entre ellos y no sé de ningún libro para recomendarte.

    De todas formas te comenté el de CSS porqué en Blogger, casi toda la parte de HTML (o XTHML en este caso) prácticamente está gestionada por la propia plantilla y me parece más importante conocer como manejar el estilo que el resto.

    Después, evidentement, puedes seguir por el HTML que tampoco viene nada mal.

    Un saludo.

    ResponderEliminar
  7. Sólo para desearte un buen día del laburante, Oloman.

    ResponderEliminar
  8. ¿Pero es que no hay nadie en esto de la informática que no haya aprendido a salto de mata? :)
    Oído cocina, cambio de planes, empiezo por CSS.
    Gracias.

    ResponderEliminar
  9. Hola Oloman:
    necesito de tu ayuda, si es posible... no tiene nada que ver con esta entrada.
    Necesito ocultar los directorios web que tengo en mi blog, del modo que lo haces en tu blog.
    Es algo necesario, ya que cada vez tengo menos espacios en las barras.
    Muchas gracias, por tu atención.

    saludos JACK SPARROW DG
    http://liniersasinotequeremos.blogspot.com
    hermosoliniers@gmail.com
    PD:
    Muy buen blog, siempre me ayuda.

    ResponderEliminar
  10. Hola Jack.

    Lo que necesitas lo tienes explicado en http://oloblogger.blogspot.com/2008/10/aligerar-la-sidebar.html

    Saludos

    ResponderEliminar
  11. Yo de nuevo.
    Empiezo por CSS y ahora se me ocurre probar una cosa que exige javascript. No tengo remedio.
    Quiero probar un filtro anti-hoygan. Para ello debo subir un archivo .js al servidor web y luego colocar un una línea de código.
    Como lo que tengo es un blog, eso de subir archivos no puedo hacerlo (creo). ¿Se podría colocar el script de alguna manera dentro de la plantilla para evitar eso de subir el archivo? La aplicación tiene una docena de líneas de código nada más. La puedes ver en:
    http://www.nopuedocreer.com/quelohayaninventado/3670/sistema-anti-hoygan/
    Gracias.

    ResponderEliminar
  12. Hola Mujer Quijote. Utiliza la segunda opción que se explica en el post http://oloblogger.blogspot.com/2008/10/como-instalar-un-script.html

    ResponderEliminar
  13. Soy una cenutria, antes de preguntar debería de revisar la enciclopedia Oloblogger. Lo siento.
    De todas formas ha sido un intento fallido, no sé donde incrustar la llamada al script. Las líneas de código que ponen en las instrucciones no se parecen en nada a las que posee mi plantilla.

    ResponderEliminar
  14. A ver te escribo este comentario para pedirte un favor porque me estoy volviendo locaaaaaaaa.
    De repente mi blog ha aparecido con todos los elementos de la página sidebar y otros elementos por debajo de las entradas juraría que no cambié nada de la plantilla, pero está claro que algo he hecho... Si pudieras ayudarme y decirme como puedo colocarlo te lo agradecería mucho......
    http://lapaginadeiris.blogspot.com

    ResponderEliminar
  15. Great blog post, Keep it continue....
    Web Design toronto

    ResponderEliminar
  16. Mujer Quijote: Cuando te contesté antes no había visto el código del anti-Hoygan. Ahora te confirmo que en Blogger no se puede poner. El script no es problema alojarlo de la manera indicada en el enlace que te dí, pero como no tenemos acceso al formulario de comentarios (sólo al CSS), pues no podemos implantar la llamada en el botón SUBMIT, tal y como citan en esa página.

    Noemí: Hoy se ve todo bien. Por darte algunas posibles pistas, simplemente puede ser que tardaran mucho en cargarse los artilugios de la sidebar.
    Otra posibilidad es que lo vieras con navegadores y/o resoluciones distintas con distintos resultados. Si es esto, tendrías que repasar el ancho de cada elemento (post-sidebar) y reducir alguno para que cupieran sin problemas.

    ResponderEliminar
  17. estimado, como estas, tanto tiempo sin pasar por aca. La verdad te cuento que estoy porque se me pidio armar otro blog, esta vez para un centro de ex alumnos de una universidad, en la cual yo estudie, y baje una plantilla que me gusto mucho. he hecho algunos cambios, pero hay algo que me esta matando porque aun no se como arreglarlo, y tiene que ver con el glider.js, ojala lo conozcas. cuando entro a la pagina me sale un aviso que la pagina 1 no tiene contenido, y no entiendo a que se refiere, podrias verlo?

    la direccion es http://exkineupla.blogspot.com/

    si fuese necesario, y me avisas, te puedo enviar la plantilla completa, o algo asi.

    espero tu respuesta, y gracias

    ResponderEliminar
  18. Estimado Olo:
    Aunque mi pregunta no está relacionada con este artículo, te agradezco tu ayuda. Quiero que mis comentarios puedan aparecer, además de la forma convencional, como tú los has organizado en el apartado "vuestras cositas"¿ Cómo hago? Releí algunos artículos pero no encontre cómo hacerlo.
    Por otra parte, espero que tus asuntos sigan marchando bien. Un abrazote-

    ResponderEliminar
  19. Lo siento Alexis, pero no conozco ese Script. Incluso he intentado ver la fuente y no veo nada claro. Ni siquiere ponen un ejemplo de lo que hace el código.

    Martha: Mira en esta entrada
    http://oloblogger.blogspot.com/2007/04/mostrar-comentarios-recientes-blogger.html
    La primera opción es la más sencilla y funciona bien.

    ResponderEliminar
  20. Hola, chico. Busque en tu web un problemita que tengo con mi blog, lo que pasa es que apartir de la entrada 37 al insertar la imagen de repente di publicar y me aparecio un espacio en blanco entre el titulo de la entrada y el texto de la entrada, yo crei que era solo en la entrada nueva asi que la eminine, pero el espacio esta en todas la entradas, menos en la principal y por mas que hago no lo puedo eliminar,,

    Solo toma en cuenta que tengo aprox un mes y medio utilizando blogger,,,, plis ayudame...

    este en mi blog:
    http://desarrollandominegocio.blogspot.com/
    desde ya muuuuchas graaaaciaaas...

    ResponderEliminar
  21. Mayela, creo que ese espacio es el hueco destinado a un banner de Adsense. No se admiten más de tres anuncios por página y quizás por eso, ese no se muestra. Sin embargo, su espacio permanece reservado. Prueba a quitar provisionalmente los otros anuncios a ver si te aparece ese. Si es eso, bastará con quitar algún otro o ese mismo.

    ResponderEliminar
  22. ya quite uno deje tres y ese espacio no desaparece :( es como una imagen fantasma que ya me dio muchos dolores de cabeza,,, crees que pueda pasarte mi usuario y contraseña para que accedas y me heches una mano con eso???
    porfaaaa ;)

    ResponderEliminar
  23. No deberías ir dando tu usuario y pass por ahí...

    ResponderEliminar
  24. yo lo se pero es una petición de una mujer desesperada :( como quiera suelo cambiar a cada rato mis contraseñas. ;) por favor, por favor, por favor

    ResponderEliminar
  25. Muchas gracias por ayudarme, quedo muy bien y muy rapido,,, no tengo idea de donde eres, apenas en la mañana entre a tu blog, no lo conocia y me sorprende la cantidad de gente que te sigue y tu ayuda desinteresada, GRACIAS.

    ResponderEliminar
  26. Anónimo1/9/10 16:14

    holisssssssssss esta re bueno me sirve para el liceo gracias!!!!!!!!!!!!!!!!!!

    ResponderEliminar
  27. Bueno, q decirte entre tantas cosas q comentar. Soy un novatón-autodidacta en HTML,empecé hace unos días y tus "clases" son geniales. Xa mi q estoy en pañales en estas cosas de programacíon ha sido de muchísima ayuda. Muchas gracias.

    Patt

    P.S:Te seguiré consultando.

    ResponderEliminar
  28. Guillermo... o Patt, no sé :D Lo de los pañales es una fase de la vida que se termina pasando con el tiempo. ¡Y con los blogs pasa lo mismo! Suerte con ello.

    ResponderEliminar
  29. Yo no he conseguido hacerlo.
    En nuestro blog no somos capaces de poner un pie de foto. Si fueses tan amable de ayudarnos te lo agradeceríamos. La entrada es esta y las imágenes para poner pie de foto son las dos últimas: http://argalladas.blogspot.com/2010/11/non-hai-dia-que-non-aprendamos-algo.html
    Gracias!

    ResponderEliminar
  30. Argalleiros quizás os convenga utilizar el nuevo editor de Blogger si es que no lo teneis ya. Con él es muy fácil poner un pie de imagen. Sólo hay que pinchar en ella y en el menú emergente que aparece puedes seleccionar la alineación de la imagen y UN PIE DE TEXTO.

    Se consigue accediendo a Configuración > Básico > Configuración global > Seleccionar editor de entradas > Editor actualizado

    Suerte

    ResponderEliminar