Una de las cosas a las que más me he aficionado estos dos últimos años, es a la maquetación con CSS. El cambio de las tablas al CSS muy significativo; ahorra tiempo de carga, aumenta la accesibilidad de la página, facilita el marcado, mejora el diseño; y simplifica los contenidos de cara a buscadores. Sin duda el mejor aliado de un buen marcado es el estándar de XHTML.

Uno de los "trucos" que me ha ayudado muchísimo en la maquetación de mi web ha sido la utilización de esta clase en CSS.


* {
margin: 0px;
padding: 0px;
}


¿Cual es la explicación de esto? Muy sencillo. Cada navegador trae una hoja de estilos propia para interpretar la de las páginas que va a mostrar. Por desgracia, unos exploradores (por ejemplo IE) dan un margen inicial con la propiedad margin y otros (como Firefox) lo hacen con la propiedad padding. ¿Qué problema encontramos en esto? Que los usuarios que usan uno u otro explorador verán nuestra página de forma diferente. Con este reinicio de márgenes y paddings podremos empezar de cero con la maquetación, lo que nos evitará mucho trabajo innecesario.

Otro truco muy útil es la utilización de un grid como fondo de la propiedad body. Al tenerlo de fondo, cada vez que queramos posicionar un elemento, tendremos una clara referencia en píxeles con ejes coordenados. Sin duda mucho mas sencillo que hacerlo a ojo. Para hacer esto, solo necesitáis tener esta clase temporal, que no interferirá en vuestra hoja de estilos.


body {
background: url(layout_grid.gif) top left no-repeat;
}



Grid

Vía: anieto2k y Sigt.net