miércoles, 30 de enero de 2008

Páginas centradas con divs y css

¡Al fin lo logré!

Después de una cantidad increíble de intentos he encontrado dos formas verdaderamente sencillas de hacer páginas centradas.

El caso más trivial es cuando el tamaño del contenido es variable, como en esta página. Aquí basta con poner un margen simétrico para body:
body { padding-right: 30%, padding-left: 30%}
Puede hacerse con porcentajes o pixeles. No recuerdo si funciona igual con magin, para el caso, el problema está resuelto.

El problema se vuelve algo más complicado si lo que se quiere centrar tiene un ancho fijo. Este blog tiene esa propiedad, aunque no encontré entre todo el css una forma clara de cómo lo lograron. Encontré la mía. Funciona perfectamente en Firefox (linux y windows) pero desafortunademente, por alguna ilógica razón, alinea a la derecha en IE. El sitio resultante se encontrará aquí.

Se requiere crear dos divs (y un tercero por simetría). La primera funciona como una especie de marco, se usará para calcular el centro de la pantalla; la otra es para el contenido. La tercera es para rellenar el espacio vacío a la derecha. Algunos navegadores pueden pintar esta mitad de otro color si no se la rellena con algo.

El html deberá quedar así:
<body>
<div id="izquieda">
<div id="centro"> ...
</div>
</div>
<div id="der"/>
</div>
</body>
El css correspondiente es:
body { background:black; color:cyan; padding: 0px; margin: 0px;  font-family:arial; }
#izquierda { padding: 0; margin: 0; width:50%; position:relative; left:374px; }
#centro { padding: 0; margin: 0; float:right; width:748px; }
#der { padding: 0; margin: 0; float:right; }
Todos los margin y padding igual a cero están ahí porque no quiero márgenes, en otros diseños alguien podría querer experimentar con otros valores.

Ahora veamos porqué funciona:

Nótese que se desea que la región central mida 748 pixels. Con izquierda, al 50% de ancho, se obtiene la mitad de la pantalla. Ahora, lo que uno querría es utilizar la coordenada del centro de la pantalla para calcular e indicar alguna de las esquinas de la región central. Prové con varias combinaciones, pero la única que funcionó fue esta:

Con float:right, el lado derecho de la región central es alineada con el lado derecho de "izquierda", que se encuentra a la mitad de la pantalla. Lo que resta, es recorrerla 374 pixeles más a la derecha (la mitad de su tamaño). Sin embargo, los navegadores no entienden la petición si las cosas se salen de sus nodos padres. Por ello la solución fue empujar la región izquierda esta cantidad. Concecuentemente, su borde derecho se recorre y la región "centro" queda, efectivamente, en el centro.

No hay comentarios.: