♡ 35☆ Posicionar imágenes y texto

35 Compartir en Facebook Compartir en Twitter Enviar entrada por correo Imprimir artículo

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 imagen del bichito corriendo a la derecha... pero todavía podemos mejorar un poco.

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

<img src="URL_IMAGEN" style="margin: 5px 0px 5px 5px;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?