Posicionar imágenes y texto | Oloblogger Para colocar una imagen en un post, utilizamos la etiqueta IMG SRC que, en un principio, tiene una redacción muy sencilla: <img src=&q...

17 de marzo de 2009

Posicionar imágenes y texto

Para colocar una imagen en un post, utilizamos la etiqueta IMG SRC que, en un principio, tiene una redacción muy sencilla:

<img src="URL_IMAGEN" />

Observad que el código incluye una barra de cierre (/) que nos permite ahorrarnos el </img> Así tal cual, si escribimos ese código y continuamos con el texto, este se situará en la línea correspondiente a la base de la imagen, tal y como se puede ver en este mismo párrafo.

Comprobareis que esa presentación no resulta muy grata a la vista, pero el lenguaje HTML nos permite conseguir fácilmente que el texto pueda quedar "rodeando" la imagen. De esta manera, ambos quedarán mejor integrados. Para eso tenemos que utilizar la etiqueta STYLE y asignarle un atributo FLOAT, tal que así:

<img src="URL_IMAGEN" style="float:right;"/>

El resultado en este caso es el que se observa en la segunda rueda... pero todavía podemos mejorar un poco.

Si os fijáis bien, las letras se pegan totalmente al lado derecho de la imagen. Para arreglar esto añadimos un MARGIN a la etiqueta STYLE, colocando algunos píxeles arriba, a la derecha y debajo. A la izquierda no sería necesario porque no hay texto en este caso. Si usáramos un FLOAT:RIGHT, sería al contrario: con margen a la izquierda y sin él a la derecha. El código de este último ejemplo, quedaría por tanto así:

<img src="URL_IMAGEN" style="margin: 10px 10px 10px 0px;float: left; " />

Recordamos que las cifras tanto en el atributo MARGIN, como en el PADDING, se expresan en el siguiente orden: arriba, derecha, debajo, izquierda.

Nada impide usar varias imágenes flotantes a la misma altura o incluso a distinta. Las dos de la izquierda tienen un FLOAT:LEFT y se mostrarán en el mismo orden en que se redacte el código. La primera que se teclee es la que quedará más a la izquierda.

La que flota a la derecha, puede ir escrita antes o después, porque siempre que no coloquemos un retorno de carro (ENTER) se irá a la derecha sin mayores interferencias.

Entre imágenes o entre una imagen y texto, se puede colocar un espacio en blanco y se interpretará como tal siempre que no exista un margen. Esta es otra manera de separar un poco dos imágenes que no tengan ningún atributo FLOAT.

El código de la imagen hay que ponerlo justo donde queremos que tenga su parte superior. Por ejemplo, las tres etiquetas IMG de las columnas anteriores, están escritas justo delante de la palabra "Recordamos".

Otra utilidad que le podemos dar a FLOAT, sería para crear columnas de texto (estilo periódico). Se puede definir un bloque (DIV) alineado al centro y ocupando un 100% del ancho. Dentro de él, tantos bloque más como columnas necesitamos. Colocamos margen derecho e izquierdo a la primera y sólo derecho a las restantes (excepto a la última). Luego le asignamos a cada una un porcentaje sobre el ancho total. La suma de las tres no podrá suponer el 100%, porque los márgenes también consumen espacio. A continuación un ejemplo y después su código.

Lorem ipsum pri fabulas detracto mnesarchum at, ei laoreet impedit temporibus ius. Eros reque paulo per ad, in viris dolores offendit qui. Has cu semper singulis hendrerit. Ea rebum deleniti inimicus mel, at facete honestatis has, et vel diam aeque mediocrem. Ubique vivendo oportere id vix, saperet efficiantur ut sit. Consul utroque an eam.
Lorem ipsum pri fabulas detracto mnesarchum at, ei laoreet impedit temporibus ius. Eros reque paulo per ad, in viris dolores offendit qui. Has cu semper singulis hendrerit. Ea rebum deleniti inimicus mel, at facete honestatis has, et vel diam aeque mediocrem. Ubique vivendo oportere id vix, saperet efficiantur ut sit. Consul utroque an eam.
Lorem ipsum pri fabulas detracto mnesarchum at, ei laoreet impedit temporibus ius. Eros reque paulo per ad, in viris dolores offendit qui. Has cu semper singulis hendrerit. Ea rebum deleniti inimicus mel, at facete honestatis has, et vel diam aeque mediocrem. Ubique vivendo oportere id vix, saperet efficiantur ut sit. Consul utroque an eam.


<div style="text-align:center;margin:0 auto;width:100%;">
<div style="width: 30%; float: left;margin:0px 15px 0px 15px;text-align:justify;">TEXTO COLUMNA 1</div><div style="width: 30%; float: left;margin:0px 15px 0px 0px;text-align:justify;">TEXTO COLUMNA 2</div><div style="width: 30%; float: left;margin:0px 0px 0px 0px;text-align:justify;">TEXTO COLUMNA 3</div>
<div style="clear: both;"/>
</div>

¿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

85 comentarios :

  1. Excelente entrada, Oloman, gracias, no tenía idea que se pudiera hacer eso con el texto, creía que sólo con imágenes.
    Saludos.

    ResponderEliminar
  2. Hola Oloman, sigo aplicando tus consejos al blog, gracias por tu trabajo.

    ResponderEliminar
  3. Pero que excelente esta explicación!!! Si supieras como peleo con las imágenes y nunca quedan en su lugar! jaja
    Ahora mismo anoto los códigos para utilizarlos, gracias Oloman!

    ResponderEliminar
  4. Interesante entradas...

    Saludos!

    ResponderEliminar
  5. Genial Oloman sencillamente genial y el bichito muy logrado casi que lo aplasto con un folio :)

    ResponderEliminar
  6. HEY ME INTERESO MUCHO EL CIRCULO CON LETRAS ROJS QUE TIENES A LA IZQUIERDA COMO LO ICISTES REPONDE PLIS TENGO UN PROYECTO DE HTML Q HACEER

    ResponderEliminar
  7. Genial, gracias Oloman, hace tiempo que buscaba como dividir un elemento de página en tres secciones, imagino que no solo se pueden poner texto sino también imagenes ó codigo html?.
    Probare a ver que sale, si no resulta, lo lamentare muchísimo pero me vere obligado a volver a molestar.
    En cuanto a posición de elementos, hay un artilugio en Vagabundia que me tiene intrigado, al final del blog hay tres pestañas, al hacer clic en cualquiera de ellas aparece la información arriba al costado izquierdo en un espacio que esta en blanco, lo curioso es que las tres lo hacen en ese mismo lugar, si cambias de pestaña, se borra la informcion anterior y aparece la nueva. Mi pregunta es la siguiente: es muy complicado hacer un menú con tres o cuatro elementos y que todas ellas se desplieguen en un mismo sitio, abajo de esta?
    Un abrazo y gracias nuevamente

    ResponderEliminar
  8. Hola Alejandro, si lo que queires es crear distintas secciones dentro de Elementos de Página, me temo que tendrás que estudiar un poco más ;) Enlace: Crear secciones

    Estos códigos son sólo para poder formatear elementos dentro de un post. Para bloques de información de la propia plantilla, ya tendrás que ver la colección de artículos del anterior enlace.

    Con respecto a la segunda cuestión, ese es otro truco totalmente distinto. Se trata de crear un espacio que a su vez contiene varios solapados y que sólo se hacen visibles al pinchar en las pestañas correspondientes. En el caso de J.Miur, las pestañas las ha puesto aparte, en lugar de colocarlas encima como es habitual.

    Intentará preparar un post sobre eso, pero no esperes que sea pronto que empiezan las vacaciones...

    ResponderEliminar
  9. Que envidia, de la sana eh!. Aquí abajo en donde termina todo estamos en pleno invierno y con temperaturas bajo cero. Lo de las secciones lo hicimos, pero con este truco de los contenedores logramos poner tres marquesinas del mismo tamaño en un solo elemento de página, dos a los costados y uno al medio con muy buenos resultados.
    Aún nos queda mucho por aprender y por mejorar y es por eso que estos espacios son tan importantes, mundo blogger no seria el que conocemos sin ellos.
    Quedamos a la espera de nuevos trucos, que disfrutes de unas merecidas vacaciones y gracias por todo

    ResponderEliminar
  10. Muy buen blog de ayuda, me será muy útil. Muy agradecido. 2 Preguntas, ojalá me las pudieras resolver a: jmqplus@mail.com

    1. Cuál sería el mejor software para hacer gadget´s, de k link los bajo...?

    2. es posible utilizar dir url desde mi pc? (algo asi como: file:///C:User/Yav/DeskTop/... y cual sería la sintaxis corecta.

    Gracias de antemano

    ResponderEliminar
  11. Yav, para hacer gadgets tienes muchos servicios en internet, sobre todo para mostrar los resultados de un feed. No sé lo que buscas, pero empieza por el propio Google que tiene muchos prediseñados y te permite hacer nuevos.

    Sobre la segunda cuestión, creo que no, aunque no conozco ese tema y tampoco sé muy bien para qué lo quieres.

    ResponderEliminar
  12. Que manera de explicar las cosas, por eso me gusta visitar tu sitio, gracias por los aportes :)

    ResponderEliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  14. Excelente, gracias queria poner texto al lado de una imagen grande pero que el texto quedara en medio de la imagen, imagen a la derecha y el texto en medio de la imagen pero a la izquierda, y con tu explicacion quedo perfecto, buen post con buenas explicaciones.

    ResponderEliminar
  15. Acabo de descubrir tu blog y me está sirviendo de mucha ayuda!! muchas gracias!!!

    ResponderEliminar
  16. Hola, gracias por el tutorial me sirve mucho, pero como sugerencia podrias quitarle la imagen que dice "codigo codigo codigo codigo" como que hace ruido visual y distrae, gracias denuevo, suerte.

    ResponderEliminar
  17. Lo tengo en mente. Un día de estos lo cambio. Gracias.

    ResponderEliminar
  18. Me gustaria sabe ya que cambie en algunas ocasiones de el titulo del blog si lo que posiciona es eso o la direccion http, te vengo siguiendo desde hace unos dias y me encanta tu blog, se que sera facil la respuesta para ti, pero yo no tengo de momento ni idea, gracias

    ResponderEliminar
  19. Me parece que el posicionamiento al que te refieres no es el mismo que explico yo aquí, Paco. Supongo que te refieres al posicionamiento de tu blog en Internet, para que salga en los primeros resultados de búsqueda que estén relacionados con él.

    Sobre eso no sé casi nada, pero creo que la dirección no tiene nada que ver y el título, poco. De todas formas, no cambies muchos este último porque vas a volver locos a tus lectores ;)

    ResponderEliminar
  20. Saludos Oloman! Hace un par de días decidi que era hora de arreglar mi blog y comenzar a hacer algo con el. Pero me he topado con una duda sobre el posicionamiento de imagenes.

    Quiero poner una imagen .png de una lupa al lado de la barra del buscador pero no sé que codigo usar y si este va en el código de la barra del buscador o si va en el código del menu. No tengo ni idea YwY

    Por cierto, me gusta mucho tu blog!

    ResponderEliminar
  21. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  22. Bueno, creo que mejor lo hago de la forma menos complicada.... PSD... ¬¬ así no me matare con el codigo para poner unsa sola imagen. Gracias de todas formas!

    ResponderEliminar
  23. Casi siempre hay diversas soluciones para la misma cosa Balthier1116. Si lo has arreglado con gráficos, estupendo. Un saludo.

    ResponderEliminar
  24. Me gustaria saber como colocar un texto debajo de una imagen.esta imagen al darle clipc me lleva a un albun de fotos que previamente he subido.la imagen podria ser de 200x200 y debajo de ella un texto de 200x20.saludos.ANIBAL de Peru

    ResponderEliminar
  25. Lucesita55, ahora es bastante fácil hacer eso. Desde el editor de entradas y en la pestaña Redactar, subes la imagen, luego pinchas en ella y te aparece un cuadro con opciones. Una es Añadir leyenda y te genera un texto al pie de la imagen que puedes cambiar por el que quieras.

    Desde ahí mismo puedes Añadir enlace a la imagen.

    ResponderEliminar
  26. La mejor explicación que encontre, Te lo agradezco de antemano :D y gracias.

    ResponderEliminar
  27. Muchas gracias, ha sido de gran utilidad.

    ResponderEliminar
  28. Felicidades y muchas gracias por tu gran ayuda un amigo

    ResponderEliminar
  29. No hay de qué Mallorcared.

    ResponderEliminar
  30. No sabes cuanto me ha servido esta informacion despues de buscar otras fuentes y no encontrar nada tan claro como lo has hecho aca. Gracias Oloman, eres impresionante.

    ResponderEliminar
  31. Dos preguntas:

    Cómo se hace para quitarle los enlaces a la imagen cuando se alínean a la izquierda o derecha, porque lo he intentado en la pestaña Redactar y en la de HTML, y ni así.

    Y segundo, la foto de tu avatar, ¿eres tú o es Nacho Cano un poco descuidado?

    Saludos.

    ResponderEliminar
    Respuestas
    1. ¿Nacho Cano? Joder porque has añadido lo de "un poco descuidado" que si no diría que tienes un serio problema visual :) En cualquier caso sería muy, muy descuidado...

      Para quitar los enlaces a una imagen, independientemente de hacia dónde estén alineadas, sólo hay que quitar la etiqueta a (<a href="http://... etc) y su correspondiente cierre, pero también se puede hacer desde el editor, pestaña Redactar. Pinchas en la imagen y luego en el icono para incluir hiperenlaces. Entonces te saldrá una ventana para modificar enlace o eliminar. Evidentemente es lo segundo.

      Puede que no te salga a la primera pues se mezcla esa utilidad con la de alinear y cambiar tamaño de la imagen, pero seguro que va. Es cuestión cogerle la maña.

      Eliminar
  32. Hola Oloman, me peguntaba si en este tiempo con todo lo mejorado de css3 se puede hacer esto directamente en css, solamente cargar el texto en html y que el texto quede alrededor de la imagen ???? tipo bio para un footer, gracias por tu apoyo.

    ResponderEliminar
  33. Claro que se puede, pero creo que tienes las ideas un poco mezcladas:

    CSS
    .bio {border:1px solid #000000; padding: 10px;}
    .bio img {float:left; margin: 0 0 5px 5px; padding: 0;}

    HTML
    <div class='bio'><img src='URL_AVATAR'/>Texto que acompaña la imagen</div>

    ResponderEliminar
  34. Veo que está todo tu blog sobre HTML muy bien explicado, perooooo no entiendo nada, y es que encima me pongo nerviosa con tanto código ¡que desastre, me estoy acomplejando!será que tengo que empezar como niña pequeña, por lo más básico.

    ResponderEliminar
    Respuestas
    1. Bueno, hay cosas explicadas con más detalle, desde lo más básico y otras que suponen que ya sabéis algo. Sigue la etiqueta BPT para encontrar más de las primeras, que es por dónde se debe empezar ;)

      Eliminar
  35. gracias por tu ayuda, resultan fáciles de seguir y muy practicas, me gustaría saber si existe alguna opción, para colocar una entrada que permanezca fija en el principio del blog, pues van bajando cada vez que se publica una nueva y me gustaría dejar una en la cabecera, un abrazo y de nuevo gracias por tus aportes...

    ResponderEliminar
    Respuestas
    1. Hola. La mejor forma de poner una cosa fija en la cabecera es precisamente poniéndola ahí. Para eso no crees una ENTRADA, sino un gadget tipo HTML/JavaScript desde el apartado DISEÑO del Escritorio. En él escribe lo que quieres -con el mismo estilo que en un post, o no- y luego muévelo justo encima del bloque Entradas del blog. Así tendrás ese contenido fijo que quieres encima de las entradas.

      Eliminar
  36. Hola Oloman... Me gustaria hacerte una pregunta relacionada con los espacios entre las fotos o los textos... Yo tengo Mac Apple y PC de windows. A veces cuando modifico los espacios manualmente entre foto y texto en el HTLM con bottom-margin 1.5em; o bottom-top 0.6em; se producen discrepancias entre ambos sistemas operativos. Me explico, en ocasiones tras hacer los cambios en Mac Apple, por ejemplo, veo que el espacio entre foto y texto es el correcto, pero en windows aparece sin ningun espacio o mas espacio del que yo habia preestablecido, o viceversa. Por que ocurre esto?.... Ahora no se por cual me debo guiar?.. El resultado final va a depender del ordenador desde donde vea mi blog!.. Y en realidad el resultado final deberia depender de los margenes establecidos por mi!..
    OTRA COSA que me gustaria preguntarte...: Conoces algun libro o informacion para aprender el lenguaje HTML, sobre todo en lo referido a fotos:? >a href=+, src=" style: left; etc etc. Realmente me gustan todos esos simbolitos y me gustaria aprenderlos bien... Un saludo afectuoso y muchas gracias de antemano.. Jose xxx

    ResponderEliminar
    Respuestas
    1. En realidad no sé si tiene que ver con el sistema operativo, pero seguro que sí tiene que ver con el navegdor. Puede que con MAC uses uno y con Windows otro.

      El problema es que cada navegador interpreta los márgenes y paddings de distinta manera. Uno lo suma al ancho de la caja, lo que la hace más grande de lo programado y otro entiende que va incluido en el ancho total.

      Para evitarlo puedes usar box-sizing que te lo estandariza, pero tampoco es garantía, pues no todas las versiones de todos los navegadores entienden esa propiedad. Pero peor es nada.

      Y aquí tienes tus libros. Son los más sencillos que conozco, gratis y además con muchos ejemplos: http://www.oloblogger.com/2013/02/libros-online-html-css-javascript.html

      Eliminar
    2. Gracias Oloman.. Lo tendre en cuenta!.. Un saludo y buen fin de semana.. Jose

      Eliminar
  37. Gracias amigo....de muchísima utilidad, saludos desde Caracas Venezuela.

    ResponderEliminar
  38. Hola oloman! mi pregunta es, sabiendo colocar la imagen el problema que tengo es que se sobrepone al comienzo de mi primer post. Me gustaría insertar una imagen y que los posts comenzarán después de esa imagen y que no se quedarán ocultos detrás de ésta. ¿Como lo hago?

    un saludo

    ResponderEliminar
  39. Hola. La imagen no se debe sobreponer sobre el texto, si es eso a lo que te refieres. Al menos no debería pasar si la imagen forma parte de la entrada y usas FLOAT como se explica aquí. La única manera de que se solapen texto e imagen es que en alguno de los dos estés usando (voluntaria o involuntariamente) la propiedad POSITION.

    ResponderEliminar
  40. Vale. Ya lo he conseguido. Al final lo he hecho de manera poco ortodoxa pero bueno, ya esta. Muchas gracias.

    Efectivamente estaba usando position. Añadí lo de absolut y ya no tuve problemas.

    Gracias y un saludo.

    ResponderEliminar
  41. Oloblogger, para seguir mejorando mi página, un tema avanzado:
    -¿Como se crea una imagen con enlace pero que al pasar el raton por encima se fuera agrandando sin pixelarse? Como una especie de zoom out.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. En este enlace tienes una forma y en este otro, otra que incluyen efectos adicionales.

      Eliminar
  42. Muy bien explicado...
    Saludos desde BArcelona

    ResponderEliminar
  43. Hola Oloman! Geniales tus explicaciones, las estoy usando para personalizarme un poco las páginas de mi web de fotografía a partir de una plantilla. Mi pregunta es que el sistema para hacer tres columnas me funciona perfecto pero no ocupa el 100% del espacio, y revisando tu propio ejemplo, veo que tampoco lo hace en tu caso, si te fijas, hay algo de margen a derecha e izquierda del bloque completo. He probado varias cosas pero no me funcionan, no sé nada de HTML, he ido probando y aprendiendo a partir de ese post tuyo.
    Otra posibilidad que aún me gustaría más es que todo este bloque de tres columnas tuviera un rectángulo de color al fondo, esta vez sí que ocupara todo el ancho disponible de la página, así no haría falta tocar el ancho del bloque que te decía. El rectángulo sería el que quedaría alineado con el resto de texto anterior, que no tiene ninguna división.
    En fin, contesta a lo que puedas, y si no, pues ya lo dejaré así, que bastante mejora supone lo de las tres columnas frente a tener que leer texto tan ancho. Ah! y lo del texto alrededor de fotos también queda perfecto, mil gracias!
    Un saludo!!!
    Isabel

    ResponderEliminar
  44. Lo que tiene ser tozuda... ya lo he encontrado! He ido jugando con los márgenes y el espaciado interno y solucionado! Gracias de todos modos porque sin tus explicaciones mi web no estaría quedando tan bien!

    ResponderEliminar
  45. Hola Oloman,
    Ahora que ya se me ha resuelto lo de las imágenes, te comento mi nuevo problema. Cuando edito varias imágenes seguidas, blogger me deja una distancia de 1.5 centímetros +- entre imagen e imagen. Yo quiero que quede menos distancia entre las imágenes y lo que hago es cambiar el HTML. Sin que nadie me haya dicho nada hago el siguiente cambio y así consigo ajustar manualmente la distancia entre las imágenes. Yo cambio donde dice:
    style="margin-left: 1em; margin-right: 1em;
    por este otro enunciado:
    style="clear: left; float: left; margin-bottom: 0.7em; margin-right: 1em;
    Creo que la palabra mágica aquí es margin-bottom: 0.7em; porque eso es lo que va a determinar la distancia entre ambas fotos.
    Sin embargo, hacerlo de forma manual es un coñazo. Sabes si puedo poner esa información de margin-bottom: 0.7em; en el CCS o en Plantilla HTML.?. De esta forma quedaría ya preestablecido y no tendría que estar cambiando nada entre foto y foto… A ver si existe algo para que blogger no me deje tanto espacio entre foto y foto. Un saludo y muchas gracias. Jose

    ResponderEliminar
  46. Sí, pero como hay CSS "inline" (en el propio post), que tiene prioridad sobre el que escribas en la plantilla, tendrás que usar !important para que el prioritario vuelva a ser el de la plantilla. Así:
    .post-body img {margin-bottom: .7em !important;}

    ResponderEliminar
  47. Hola Oloman, No me funciona!!!... Creo que a ese enunciado le falta algo.. Lo debo poner en CSS, verdad?.. Pues no va.. pero ahí veo un .7em y el margen que yo quiero es 0.7em xxx Le pongo el 0.7em pero sigue igual. También lo pongo así: 0.7em; (con el punto y coma) y tampoco.. Por favor Oloman, dime que estoy haciendo mal.. Un saludo y a ver si lo resuelvo cuanto antes.. Gracias de antemano.. Saludos, Jose

    ResponderEliminar
  48. Hola Oloman, parece que ese código: .post-body img {margin-bottom: 0.7em !important;} actúa para aumentar el espacio entre dos imágenes. Pero por alguna razón, Blogger ya prestablece un espacion mínimo entre imagen e imagen y aunque le ponga 0em siempre me daja algo así como 1 centímetro entre las fotos. Y quiero medio centímetro…Que hago? Slds..

    ResponderEliminar
    Respuestas
    1. El código va en la parte CSS, sí... pero tiene que ir al final. Me ayudaría poder ver tu blog por si hay otro código que interfiera.

      Eliminar
  49. Hola Oloman, Mi blog es: dondeandaras.blogspot.com He estado modificando un monton de cosas.. A ver si podemos preestablecer los margenes como a mi me gusta.. Saludos y ya me diras algo. Muchas gracias. Jose

    ResponderEliminar
  50. Oloman, he puesto el código al final y parece que ha surtido efecto a medias… Funciona cuando selecciono las fotos en tamaño pequeño y en mediano. Al seleccionar las fotos en grande no me funciona. Y yo necesito las fotos justo en tamaño grande.. Esto es inexplicable!… Estoy súper intrigado en conocer si hay una solución… Un saludo y gracias… Jose

    ResponderEliminar
    Respuestas
    1. Creo que es por la clase "separator" que Blogger añade automáticamente en algunas configuraciones de imágenes. Prueba a añadir también esto:
      .separator a {
      margin: 0 !important;
      }

      Eliminar
  51. Oloman, Ese codigo magico ha surtido efecto.!.. Muchisimas gracias.. Ahora necesito pre-establecer el margen entre TEXTO e IMAGEN y entre IMAGEN y TEXTO.. Al utilizar ese codigo: .separator a {
    margin: 0 !important;} se me desequilibran los margenes entre el texto en si y la siguiente foto y entre la foto en si y el proximo texto.. Creo que eso es algo de padding em; o algo asi..
    Si me puedes ayudar con eso te lo agradeceria de por vida.. Un saludo y muchas gracias.
    Jose

    ResponderEliminar
  52. Es que adicionalmente tienes que seguir usando el otro para la imagen, pues ese sólo elimina el del enlace:
    .separator img {margin-bottom: .7em !important;}

    ResponderEliminar
  53. entonces por lo que explicas hay que subir la imagen con la URL, no añadiendo imágenes,
    sin embargo a mi a veces me ha funcionado colocar el cursor al lado de la foto y escribir, pero no siempre me deja
    esto es un lio no me aclaro, lucho hasta el agotamiento

    ResponderEliminar
    Respuestas
    1. No exactamente. Esto que explico aquí es cómo funciona lo de las imágenes "flotando" junto a un texto desde el punto de vista del código, pero no es necesario teclear todo eso a mano en Blogger. Como dices, con añadir la imagen y luego seleccionar derecha, izquierda o centro, ya la pones como quieras.

      Eliminar
  54. Hola Oloman, estoy probando cómo combinar párrafos e imágenes en las páginas y entradas de mis blogs (blogspot.com), pero hasta ahora no he podido conseguir lo siguiente, que se ve en artículos de prensa: una imagen flotando abajo a la derecha con respecto al texto de un párrafo (como si la hubieran insertado abajo a la derecha del bloque de texto), o sea, una imágen flotando a la derecha que tenga la totalidad del texto de un mismo párrafo rodeándola por arriba y a la izquierda, de manera que la última línea de texto del párrafo toque pero no depase la línea que sería la prolongación de la base de la imagen.
    ¿Se puede definir con una combinación de "float", "clear", "align", "text-align"? Gracias de antemano. Filip

    ResponderEliminar
    Respuestas
    1. No. Eso que quieres es algo más complicado, pero supongo que no imposible.

      Aquí tienes un truco para conseguir algo parecido y con alguna que otra variación, imagino que se podrá hacer lo que quieres... pero lo dicho, añadiendo algunas cosas más.

      http://css-tricks.com/float-center/

      Eliminar
  55. Hola Oloman, buenos días.

    Te lo comento por aquí porque no he encontrado otro post más adecuado. Quiero cambiar el tamaño del main-wrapper de la página. Como tengo todas las imágenes en su tamaño original, esto hará que el texto se coloque en la parte sobre sobrante de la derecha, rellenando el hueco aumentado. ¿Cómo podría hacer para que el texto siempre esté debajo de la imagen, independientemente de que la imagen ocupe o no todo el ancho posible del wrapper de los post?

    Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola. Supongo que eso te pasa con las imágenes flotadas. Un truquillo podría ser este:
      .post-body .separator a, .post-body .separator img {float: none !important;}

      O quizás este otro:
      .post-body .separator a, .post-body .separator img {clear:both;}

      Eliminar
  56. Gracias Oloman. Sería la primera opción. ¿Existiría algún condicionante para que este truco no se aplique en imágenes "pequeñas" o "medianas" (según tamaños de imágenes de blogger).

    ResponderEliminar
    Respuestas
    1. Con CSS no Emilio, pero dependiendo de como esté hecho todo a veces se pueden utilizar otras cosas. No sé... ahora mismo se me ocurre que lo mejor seguramente sería meterle un width:100% a las imágenes junto con un display:block;, pero quizás no sea de aplicación en todos los casos. Depende de como acostumbres a hacer tus posts.

      Eliminar
  57. La idea es buena. Pero claro, no diferencia de imágenes pequeñas de grandes, todas las pone por igual. Estaría bien que las imágenes en tamaño pequeño o mediano (según blogger) se quedaran como están.

    ResponderEliminar
  58. Buenas tardes Oloman. Tengo un problema con mi blog y es que no consigo por ninguna de las maneras que las fotos que añado acompañando a mis posts tengan un margen o separación con respecto al texto, es decir, queda totalmente pegado el texto a la foto y la sensación es horrible. He probado con el código de arriba a abajo pero no doy con la tecla. Por qué nomenclatura debiese buscar? Mil gracias

    ResponderEliminar
    Respuestas
    1. Hola Luis Miguel. En un principio es sólo cuestión de ponerle un MARGIN a tus IMG, bien añadiéndolo directamente al HTML de cada imagen, bien programándolo de forma general en el CSS de tu plantilla.

      De todas formas es raro que no te ponga margen porque cuando subes con el editor de entradas una imagen alineada a izquierda o derecha, Blogger automáticamente te añade el margen correpondiente. No sé cuál es tu blog, así que no puedo detallarte más si no me muestras un ejemplo concreto.

      Eliminar
  59. hola de nuevo Oloman. Mil gracias por responder y disculpa la tardanza en volver a contactar. Te voy a pasar directamente el enlace para que lo veas en un ejemplo de un post, yo me he dado por vencido: http://oestemarketing.blogspot.com.es/2016/09/decathlon-vs-sport-zone-en-la-milla-de.html

    ResponderEliminar
    Respuestas
    1. Lo mejor es que edites el post desde la pestaña Redactar, pinches sobre la imagen y luego, desde el menú que sale debajo de ella, seleccionar Alinear a la izquierda (o derecha, según...). Si ya te sale como alineada a la izquierda entonces alinea al centro y luego a la izquierda. Blogger genera automáticamente un margen cuando alineas a derecha o izquierda, así que esa es la manera más fácil de arreglarlo.

      Si eso no funciona (que casi seguro que sí), entonces edita el post pero desde la pestaña HTML. Cuando veas el código de la imagen añade este margin-right: 10px; que verás que he marcado en negrita:

      <div class="separator" style="clear: both; text-align: center;">
      <a href="https://4.bp.blogspot.com/-cZ7-ewM4gXE/WDR6IsPb3-I/AAAAAAAAAJI/T_TGTXRvsAcI6liQPJVcEPiPtZNwpRKgwCLcB/s1600/IMG_1773.JPG" imageanchor="1" style="clear: left;float: left;margin-right: 10px;"><img alt="30" border="0" src="https://4.bp.blogspot.com/-cZ7-ewM4gXE/WDR6IsPb3-I/AAAAAAAAAJI/T_TGTXRvsAcI6liQPJVcEPiPtZNwpRKgwCLcB/s1600/IMG_1773.JPG" title=""></a></div>

      Eliminar
  60. Gracias de nuevo Oloman. Acabo de probar ambas indicaciones y sigue igual, con el texto pegado. Que rabia.

    ResponderEliminar
    Respuestas
    1. Imposible. No puedo hacer otro comentario porque especialmente la segunda opción, es infalible. La probé antes de escribirla.

      Eliminar
  61. Buenos días amigo, acabo de volver a intentarlo, ya copiando y pegando el código que has puesto, por si acaso se me estaba escapando algo, y nada, sigue igual. Decir que el soporte técnico de la plantilla es un fraude, no me han solucionado nada. Dime si quieres tu correo para hacerte administrador y si tengo que pagarte algo lo hago sin problema, porque es una desesperación.

    ResponderEliminar
    Respuestas
    1. El soporte de los sitios que venden plantillas, por lo general es en la práctica inexistente. Si quieres escríbeme mediante un formulario que hay abajo de la página (Contacto)

      Eliminar
  62. Muy buen aporte muchas gracias

    ResponderEliminar
  63. Hola Oloman, gracias por el artículo. Dado que tuve problemas con la plantilla de Contempo, que te había comentado del botón de compartir, estoy usando una plantilla gratis que descargué. El diseño me gusta. Si fuera posible, me gustaría que me ayudaras con algunas dudas que tengo, respecto a unos códigos que quiero cambiar.

    Normalmente cuando insertaba una imagen en una entrada, las imágenes quedaban centradas, pero la plantilla que ahora tengo, se come un pedazo, si la imagen está centrada, así que en mi último artículo tuve que alinear a la izquierda. ¿Es posible con algún código css alinear todas las imágenes a la izquierda, si la plantilla lo permite? O aumentar el ancho de las entradas para que me aparezcan las imágenes completas.

    Si es posible, podrías ayudarme?

    También en los títulos de las entradas por cada palabra empieza con una mayúscula, por ejemplo: Antivirus De Paga O Gratuitos, Dos Alternativas -¿Con Cuál Me Quedo? – Puede cambiarse a que solo la primera letra quede en mayúscula?

    Me gustaría que visitarás mi blog, si fuera posible.
    http://hiberhernandez.blogspot.mx

    Gracias de antemano. Apenas estoy aprendiendo CSS y HTML - Saludos

    ResponderEliminar
    Respuestas
    1. Hola Hiber.

      Supongo que a estas alturas has solucionado lo de las imágenes porque hice un muestreo y veo todas bien.

      Sobre lo de los títulos, eso es simplemente cuestión de que quites todos los text-transform:capitalize; que veas. Yo encontré estos tres en tu plantilla:

      p.title {
      text-transform: capitalize;
      ...
      h1.post-title {
      font-weight: normal;
      text-transform: capitalize;
      ...
      h1.post-title, h2.post-title {
      font-weight: normal;
      text-transform: capitalize;
      ...

      Eliminar
  64. ¡Muchísimas gracias! funciona perfectamente.

    ResponderEliminar