Posicionar imágenes y texto
17/03/2009
13
Para colocar una imagen en un post, utilizamos la etiqueta IMG SRC que, en un principio, tiene una redacción muy sencilla:
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í:
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í:
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.
<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>
<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>
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
13 comentarios:
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.
Hola Oloman, sigo aplicando tus consejos al blog, gracias por tu trabajo.
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!
Interesante entradas...
Saludos!
Genial Oloman sencillamente genial y el bichito muy logrado casi que lo aplasto con un folio :)
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
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
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...
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
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
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.
Que manera de explicar las cosas, por eso me gusta visitar tu sitio, gracias por los aportes :)
ggguiyoiu
PUBLICAR UN COMENTARIO