JMiur [E]

Que algo esté alineado (propiedad text-align o atributo align) o que flote (propiedad float) no es lo mismo. Puede parecerlo pero es completamente diferente, de allí que muchas veces, nos encontramos con problemas cuando tratamos de ubicar algo en una determinada posición.

El concepto es difícil de asimilar a primera vista pero, debemos partir de esto: todo lo que agregamos a una página web es un rectángulo y básicamente, sólo hay dos tipos de rectángulos; unos, llamados bloques, ocupan el ancho total de donde se pongan y crean un salto de línea, es decir, son "independientes", se separan de lo que está arriba y de lo que está debajo. El segundo grupo de rectángulos es el llamado inline; estos, ocupan el espacio exacto de su contenido.

Un ejemplo con varias etiquetas coloreadas para que se vea cada rectángulo:
<div>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit, sed <a href="#">diam nonummy</a> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, <em>quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</em> ex ea commodo consequat.</p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Etiquetas como DIV, P, los encabezados, etc, son bloques; etiquetas como SPAN, STRONG, EM, A o IMG son inline.

Con CSS, cualquier etiqueta puede convertirse de uno a otro tipo, para eso, es que usamos la propiedad display que puede ser block o inline. De esta forma, una lista que normalmente es una serie de bloques (ya que UL y LI son etiquetas de bloque), la podemos mostrar horizontalmente cambiándoles esa propiedad:

  • ITEM
  • ITEM
  • ITEM

  • ITEM
  • ITEM
  • ITEM

Cuando algo "flota" o sea, cuando le agregamos la propiedad float (left o right), convertimos a ese elemento en un bloque pero con una característica especial: el ancho, a diferencia de un bloque, no es TODO sino sólo su contenido. Por ejemplo, un encabezado H2 es una etiqueta de bloque, normalmente se ve así:

ESTE ES UN ENCABEZADO H2


Podemos cambiarle la propiedad display que, por defecto es block y ponerle inline, veríamos esto:

ESTE ES UN ENCABEZADO H2



Pero lo que quiero es poner eso a la derecha, intento con text-align:right:

ESTE ES UN ENCABEZADO H2


No funciona, lo que se alínea es el contenido, así que lo voy a hacer "flotar":

ESTE ES UN ENCABEZADO H2


¿Qué ocurrió? Se transformó en algo diferente ya no es un bloque en el sentido que ya no ocupa todo el ancho pero tampoco es inline porque veamos que pasa si coloco algo arriba y abajo:
<p style="color: LightSkyBlue;">Ut wisi enim ad minim veniam ... commodo consequat.</p>
<h2 style="float: right;">ESTE ES UN ENCABEZADO H2</h2>
<p style="color: Salmon;">Duis autem vel eum iriure ... nulla facilisi.</p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ESTE ES UN ENCABEZADO H2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


El texto en azul no sufre cambios pero el texto rojo que está debajo del objeto que flota, se "acomoda" como puede alrededor de este.

Cambiamos para que flote a la izquierda:

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ESTE ES UN ENCABEZADO H2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Pasa lo mismo, todo lo que está debajo de un elemento que flota "sube" y se acomoda alrededor de este.

Es como si a todo elemento que flotara lo quitáramos de la página, le diéramos un tamaño y luego lo empujáramos dentro de esta, ejerciendo presión. Todo lo que estaba allí antes, se moverá y se acomodará como pueda para hacerle lugar.

Si tenemos varios elementos flotantes, estos se ubicarán a derecha o izquierda, según se lo indiquemos y flotarán hasta el borde o hasta encontrarse con otro elemento flotante. Todo lo que está debajo y no flote, se amoldará hasta que, superada la altura del más alto de estos, la página retome su orden natural:

ABCDLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Carece de importancia si flotan hacia un lado u otro, tienen "prioridad" y el resto del contenido se acoda a ellos:

ABCDLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Sólo hay algo que permite eliminar las consecuencias de esa flotación, otra propiedad llamada clear que tiene cuatro valores posibles: none, left, right y both.

Con left, le decimos al navegador que a partir de ese lugar, ignore las flotaciones izquierda superiores y lo que sigue, se escriba debajo de forma normal; con right hacemos lo mismo para las flotaciones a la derecha  y con both, le indicamos que lo haga con ambas:

ABCDLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ...Desde aqui ya no quiero flotaciones ... ... dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Esa propiedad la agregamos de muchas maneras, por ejemplo en una etiqueta vacía:
<div style="clear:both;"></div>
¿Más sobre flotaciones?

Artículos a leer: bigbaer.com, css.maxdesign, css-tricks, dtott, smashingmagazine

23 comentarios:

Mozz  

Realmente impecable. Felicitaciones por un post excelente.

Responder
LuzdeLuna  

JMiur, de nuevo mi total admiración!
Gracias!! este post va derecho a favoritos para cuando lo necesite( :D que suele ser muy seguido)
Un abrazo

Responder
Graciela  

ohhh JM :O dejo para leerlo cuando mis células neuro estén desocupadas.
Hoy tenemos lluvia :)

Responder
El blog de Leonardo.  

Interesante post lo guardare para leerlo con mas calma porque es un poco complicado.Leonardo

Responder
AXELdesigner  

Jmiur observa este post !! http://anujpathania.blogspot.com/2008/09/running-php-code-using-javascript.html

Responder
Dña. Urraca  

Entonces entiendo que el titulo de un post es en si un bloque sin mas, que podrías hacer flotar dando la orden especifica, no?

Responder
Dña. Urraca  

Oye, cosas que quitas de la plantilla pueden volver a aparecer por arte de magia, merced a blogger???

Responder
JMiur  

Ojala sirva la explicación, no es sencillo de comprender pero es algo que usamos constantemente.

AXELdesigner: Lo había visto y ya tengo una entrada preparada sobre eso que aparecerá la semana que viene.

Dña Urraca: Depende de qué cosas. Hay ciertos códigos que Blogger agrega siempre. Debería saber a cuál te refieres.
Y sí, los encabezados son bloques (ocupan todo el ancho) pero, cualquier etiqueta puede hacerse flotar, bloques o no bloques. Se usa flotar para "acomodar" cosas, por ejemplo, poner una al lado de la otra.

Responder
Bonzu Pipinpadaloxicopolis III  

Ya sabía lo primero pero ese detalle de clear está interesante, creo que ahora voy a editar algunos posts :P

En mi blog se muestran avatares de mis comentaristas, pasó automáticamente, creo que es por esto:
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Responder
JMiur  

Bonzu:
Eso estaba viendo, parece algo que se ha agregado ahora y en mi caso, ha trastocado la plantilla así que debere verlo con cuidado.

Responder
Dña. Urraca  

La Barra de navegación de blogger, fue de las primeras cosas que quite cuando redimensione la plantilla (siguiendo una de tus entradas) y hoy de repente estaba allí otra vez, la he vuelto a quitarya te contare si aparece de nuevo.

Responder
JMiur  

Me ha costado, Bonzu pero, ahi parece que ahora funciona el COSO ese :D

Responder
Bocha  

JMiur... mismo problema de antes, pero esta vez en el col3... coloque el codigo que me diste para el col1 ol, ol li {list-style-position: inside;} y anda perfecto, pero lo coloque en el col3 y ahi no, porque sera??

Por otro lado me gustaria que me indicaras que problemas tengo en el codigo de todo el footer, ya que yo antes tenia separado el footer (comun) y el footer (dividido en tres), pero por alguna razon ahora me aparecen juntos... sabes la razon?? Los quiero tener separados.

Espero tu respuesta y gracias...

Responder
Jorge  

Hola JMiur.
Perdona por la molestia, pero es que trato de entontrar algún post y no encuentro nada y como se tan poco, por empezar ahora con los blog, pero bueno pronto entenderé hasta este post que escribes :)
Pues lo que quiero saber es como puedo tener un visor de videos que he visto ya por algunos blogs, que le haces click y te lo lleva al centro de la pantalla y lo puedes poner de dos en dos en la sidebar... lo he visto aquí ( http://infinitosmundos.bolsanegra.net/ ). Le agradeceria algún link de algún post donde se explique.
Muchas gracias, saludos

Responder
Bonzu Pipinpadaloxicopolis III  

Que bien JMiur :-), lo malo es que tocó demaciado a mi plantilla, ahora ya no se identifican los comentarios del autor y la foto está fuera del cuerpo del mensaje :(( veré que puedo hacer, luego te cuento.
Por cierto ya lo anunciaron en blogger buzz.

Responder
JMiur  

Bocha:
Porque allí no hay una lista numerada OL sino una lista UL:
ul, ul li {list-style-position: inside;}

Jorge:
Esa ventana modal de videos es LightWindow y el modo de mostrarlos es independiente de eso y puede verse acá.

Responder
Alex Roel Castañeda Aquino  

Gracias Muy buena tu explicación, aunque a mi me gustaría saber como hago para poner anuncios adsense dentro del contenido del post, pero directamente en el código de la plantilla.

Website: De Todo Un Poco

Responder
JMiur  

No sabría responderte.

Responder
azul#  

En tu último ejemplo, cual es el efecto del clear??
Teniendo en cuenta que en la linea donde pone "Desde aquí y ano quiero flotaciones" el texto empieza desde la izquierda, y no hay ningún elemento en float, puesto que están en la lineas superiores, no ocurriría lo msm si no pusiesemos el clear??

Lo qe intento decir, esque el lugar que ocupa el texto es el mismo aunque no se le aplicara el clear, no? pueso que en esa linea de flujo no hay elemento flotantes.

Responder
JMiur  

Eso es sólo un ejemplo general. Si le quitara el claer, en ese ejemplo, el texto sólo subiríra un poco.

En principio, me parece que siempre es mejor limpiar las flotaciones.

Responder
pcastagnaro  

Excelente post!!

Responder
América  

Realmente es una explicación magnifica, entendí todo muy bien, en otras webs no entendí nada de nada y menos a mi profesor hace unos dias,

Siempre en Vagabundia entiendo todo tienes un don para explicar las cosas JMiur las haces muy sencillas, gracias :D

JMiur  

Gracias, América. Debe ser porque acá no hay ni profesores ni alumnos. Sólo gente que sabe algunas cosas y gente que sabe algunas otras :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR