Unos cuantos trucos interesantes para sacarle el mayor provecho posible a los estilos para diagramacion de paginas web.

La principal herramienta en la diagramacion usando estilos es el Box Model y el posicionamiento… y con el pasar del tiempo he descubierto algunos trucos que me parecen extremadamente utiles. Estos trucos son todos “descubrimientos propios”, nacidos de leer la documentacion de CSS y experimentar y experimentar y experimentar. Pero estoy seguro que a muchas otras personas se les han ocurrido las mismas ideas.

Esta lista de trucos posiblemente vaya creciendo (y siendo corregida) con el pasar del tiempo. No es una recopilacion definitiva y menos aun exacta. Esta aqui para mi propia referencia y para compartirla con ustedes.

Mas a la derecha… mas a la derecha…

El premio al “atributo mas util que nadie conoce” es disputado por right y bottom. Con estos dos atributos podemos hacer que un elemento sea alineado a la derecha de la pagina o al fondo de la ventana. Generalmente se usan en lugar de left y/o top, aunque pueden emplearse todos juntos.

Si indicamos “right: 10px” el elemento sera posicionado con su lado derecho a 10 pixels del margen derecho de la pagina, mientras que “bottom: 50px” coloca el lado inferior a 50 pixels de la parte de abajo de la ventana.

Posicionamientos anidados

Otro de los detalles desconocidos es que el posicionamiento absoluto no es absoluto, es relativo. Hay dos clases de posicionamiento: siguiendo el flujo, o flotando. Cuando un elemento usa “position: absolute” o “position: relative” pasa a ser “flotante”. El gran secreto es que las coordenadas de un elemento flotante absoluto son relativas a su ancestro mas cercano que sea flotante.

Si a un elemento le asignamos “position: absolute; top: 0px; left: 50px” este aparecera en la esquina superior izquierda de la ventana. Pero si lo colocamos dentro de otro elemento que a su vez tenga “position: absolute; top: 100px; left: 0px” entonces aparecera 150 pixels a la izquierda. Claro, si esto era lo que buscabamos, hubieramos podido usar el valor “150px” desde un principio.

Pero el truco esta en que “position: relative” tambien hace que un elemento sea flotante, y que podemos hacer un elemento relativo y moverlo solo 0 pixels, con lo cual se comporta como un elemento posicionado por el flujo del documento, pero sus hijos pasan a tener un nuevo punto de referencia para el posicionamiento absoluto.

padre { position: relative; width: 60%; height: 100px; }

hijo { position: absolute; right: 5px; bottom: 15px; }

Usar “position: relative” es una manera inocua de hacer que un elemento “flote” y por lo tanto se convierta en un nuevo punto de referencia para los demas elementos flotantes dentro de el.

Al fondo de la ventana o al fondo de la pagina?

Normalmente, si especificamos una posicion “bottom: 0px” el browser va a alinear el elemento con la parte inferior de la ventana, cuando la intuicion y probablemente nuestra intencion, era alinearlo con la parte inferior de la pagina, en especial si se trata de una pagina mas “alta” que la ventana.

Ademas, el hecho de que la posicion sea relativa a la ventana pero que despues se desplace con el resto de la pagina hace que este comportamiento resulte basicamente inutil.

En todo caso, hay una solucion.

Podemos “envolver” todo el contenido de la pagina con un DIV, que abre justo despues del BODY y termina justo antes. A ese DIV le asignamos “position: relative; width: 100%” y listo… cualquier coordenada bottom sera en referencia los extremos del DIV y no de la ventana.

Acolchando al padre, marginando al hijo

A menudo, los efectos del margen en un elemento son equivalentes a poner acolchamiento en su elemento padre. La principal diferencia es que los margenes tambien afectan a otros elementos contiguos, llamemoslos “hermanos”.

Dependiendo del efecto que se quiera lograr, puede convenir mas usar los margenes del hijo o el acolchado del padre. Esto suena trivial, pero a menudo es una sugerencia que se pasa por alto.

Box Model Hacks

La interpretacion oficial de width es que se refiere al contenido del elemento, sin incluir bordes, margenes o rellenos. Pero los programadores de algunos navegadores cometieron el error de incluir todos los “agregados” en el calculo del ancho de los elementos.

Un elemento con “width: 100px; border: 10px; padding: 20px” deberia mostrar su contenido en 100 pixels de ancho y a partir de alli incluir 20 pixels de acolchado y 10 pixels de borde. Pero en un navegador “problematico” este mismo elemento ocuparia solo 100 pixels, a los que se le restan el acolchado y el borde dejando solo 40 pixels para el contenido.

Hay maneras de activar y desactivar este comportamiento en algunas versiones nuevas de los navegadores que presentan este problema, pero la solucion mas facil es no usar width en el mismo elemento que border, margin y padding. En su lugar, simplemente usa dos elementos DIV anidados. En el elemento externo aplicas los bordes y margenes, mientras que el elemento interno define el ancho.

Podrias hacerlo a la inversa, pero si colocas el ancho en el elemento interno estas siguiendo la idea original del estandar que dice que las dimensiones se refieren al contenido sin los bordes.

Olvidate de Float

A menudo cuando intentaba hacer algunas diagramaciones complejas sin usar tablas, insistia en usar “float: left” y “float: right” , pero estos atributos requieren que los elementos tengan un orden especifico algo estricto, y no siempre es posible lograr lo que quieres. Olvidate de ellos.

La mejor manera de armar una diagramacion de varias columnas es usando posicionamiento absoluto con los cuatro atributos (no solo top y left) y empleando elementos padre con posicion relativa para cambiar los puntos de referencia de las coordenadas como ya explique antes.

Ancho de 80% menos 200 pixels

Este es uno de los trucos mas dificiles. He visto hombres maduros llorar y regresar al comfort de las tablas. Pero la solucion es mas simple de lo que piensas.

Tienes dos columnas, una a la izquierda de 200 pixels de ancho, y otra a la derecha de 20%. Quieres agregar una tercera columna que ocupe el espacio restante, es decir, 80% menos 200 pixels.

Crea un elemento abuelo con “width: 100%”, dentro del cual va el elemento padre con “margin-left: 200px; margin-right: 20%” y adentro coloca la columna central con “width: 100%”. Eso es todo!

Puedes hacer “grupos” de columnas de esta manera para lograr cualquier combinacion de porcentajes y anchos fijos.

El unico inconveniente es que necesitas agregar cosas en el html original para poder usar este truco.