Algunos consejos útiles
Sobre el uso correcto de las reglas CSS
Antes de poner los estilos, ten claro lo que quieres hacer. Haz siempre un dibujo de lo que quieres que resulte. Así será más fácil colocar cada cosa en su sitio.
Separa siempre los estilos en un documento aparte. Si la hoja de estilos es muy grande, divídela en varias para facilitarte el trabajo.
Procura utilizar siempre las medidas de las fuentes (letras) en "em".
Escribir siempre cada propiedad y valor, o valores, en una línea. Así será mucho más fácil encontrar lo que buscas.
Organiza por partes y con lógica los estilos, y siempre de la misma manera, para no volverte loco si has de cambiar algo.
Pon nombres a los "Id" y "Class" que tengan relación con el propósito de los mismos. Si tienes que hacer una revisión tiempo después, lo entenderás todo mejor.
Utiliza siempre las listas sin numerar (<ul>) para hacer los menús. Al fin y al cabo, un menú no es más que una lista de enlaces.
Prueba siempre el resultado en diferentes navegadores: Opera, Google Chrome, Safari, Firefox. Como sólo puedes tener instalado una versión de IE, para probar en versiones distintas, puedes buscar instaladores de colecciones; así tendrás desde el I1 al I8. Aquí tienes una completa.
Si utilizas Mc, lo que puedes hacer es instalar un software que emule Windows, o si no tendrás que probar los diseños en un PC normal.
Los ejemplos que he puesto de una, dos y tres columnas son todas con anchos fijos. Se pueden hacer extensibles
utilizando porcentajes (100% para el contenedor principal)
en las medidas de anchura
. De esa manera, se adptarán a cualquier ancho
de pantalla ocupándola entera. La pega es que con las modernas pantallas de más de 20 pulgadas, a veces, la página tan ancha queda un poco ridícula.
Algunas explicaciones
Para entender las reglas CSS
Agrupar valores en una sola propiedad
Hay propiedades como "margin" o "padding" cuyos valores pueden escribirse en una sola propiedad. En vez de escribir:
margin-top: 5px;
margin-right: 5px;
margin-botton: 5px;
margin-left: 5px;
Podemos escribir una sola propiedad con uno o varios valores. Ej: "margin: 5px;"
Para recordar esta regla, pensemos en un reloj analógico y que los valores van en el sentido de las agujas de ese reloj. Así pues, el primer valor, que son las 12, será arriba (top); el segundo, que son las 3, será derecha (right); el tercero, que son las las 6, será abajo (bottom); y el cuarto, que son las 9, será izquierda (left).
Si escribimos un solo valor, como en el ejemplo, ese valor es para los cuatro lados.
Si escribimos dos valores, "margin: 5px 10px;", el primero se refiere a "arriba y abajo" (12 <--> 6) y el segundo a "derecha e izquierda" (3 <--> 9).
Si escribimos tres valores "5px 10px 7px;", el primero se refiere a "arriba" (12), el segundo se refiere a "derecha e izquierda" (3 <--> 9) y el tercero se refiere a abajo (6).
Si escribimos los cuatro valores "margin: 5px 10px 7px 10px;", obviamente, el primero será "arriba" (12), el segundo, "derecha" (3), el tercero, "abajo" (6) y el cuarto, izquierda (9).
background y border
En estas propiedades, también se pueden agrupar valores.
Sobre Internet Explorer de Microsoft
Como apunté en las reglas al explicar el modelo de caja, las antiguas versiones de IE (del 7 para atrás) no entienden algunos de los estilos como el resto de navegadores. En el IE8, se han arreglado casi todos los problemas, pero todavía hay mucha gente que utiliza la versión 7 y, supongo, algún rezagado que sigue con el IE6.
Durante años, para que las cosas se vieran igual en todos los navegadores, hemos tenido que utilizar "hacks" para IE. La verdad es que yo ya paso de hacerlo para la versión 6, pues no sé si merece la pena el trabajo. Para la versión 7 lo sigo haciendo, porque no son demasiadas las cosas que hay que cambiar. Y, en realidad, no utilizo "hacks" porque si lo hago no puedo validar las páginas. Lo que hago es una hoja de estilos aparte con los cambios necesarios y la incluyo en el head con un condicional en un comentario:
<!--[if IE 7]><link href="estiloIE7.css" rel="stylesheet" type="text/css" /><![endif]-->
De esta manera, IE7 lee lo que hay en esa hoja de estilos y lo aplica, dejando el código limpio y sin "hacks".
Aun así, todos los IE dan siempre problemas con los márgenes y los rellenos, por lo que hay que revisarlos uno por uno.
