Separar un poco el menú
Según lo explicado en la página de antes, para conseguir separar un poco el menú lateral (toda la zona amarilla) del borde de la parte naranja de la página, es decir, para meterlo un poco más dentro de la parte central, podríamos colocar un margin o un padding. Cuál de los dos?
Como lo que queremos es separar la capa #menu (la amarilla) de los elementos exteriores, tenemos que aplicar margin. Si aplicáramos padding a la capa #menu el efecto sería crear una separación entre el borde amarillo y los enlaces de dentro, no?
Hace un par de páginas pusimos a la capa #menu este margen: margin-right:10px, te acuerdas? Era para dejar una separación entre el menú y los textos de la parte naranja que están a su derecha. Ahora, como hemos visto que también sería bueno separarlo por la izquierda y por arriba (y ya puestos, por debajo también), ampliamos la definición y la ponemos de este modo:
Esto es lo mismo que poner solo margin: 10px, pero mejor lo dejamos del otro modo así podemos poner margenes diferentes en los cuatro lados si vemos que el mismo para todos los lados no nos gusta.
Colocando ese margin en estilo-general.css obtendríamos esta apariencia.
Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un poco. Vamos a probarlo con estos otros valores (recuerda el orden de las dimensiones del margin, arriba-derecha-abajo-izquierda)
Y haciendo de nuevo vista previa sobre plantilla.html vemos que queda mucho mejor, dónde va a parar, je je je.
Aún no hemos aplicado ningún borde a ninguna capa. Esto es por que cada navegador interpreta el borde de un modo distinto y vamos a evitarlo todo lo posible. En su lugar usaremos imagenes de fondo con el borde ya dibujado y en los casos en los que no sea posible ya nos buscaremos las mañas para poder usar bordes sin problemas, pero eso será más adelante.
Te toca currártelo por tu cuenta
No estaría de más que crearas una página aparte e investigaras los efectos del margin, el border y el padding por tu cuenta. Para distinguir una cosa de otra lo mejor es ponerle un color al body (a estas alturas debes saber hacerlo), creas una capa a la que pones nombre y le aplicas otro color diferente y luego le aplicas otro color distinto más al elemento que pongas dentro de la capa, que puede ser una imagen, un párrafo, una lista, etc, etc. Seguro que te resultará curioso observar los cambios que produce variar esos datos en la hoja de estilo y seguro que aprendes un montón.
Yo por mi parte intentaré ponerte algunos ejemplos en cuanto pueda para esclarecer estos conceptos, oki? Pero recuerda, no lo pruebes en los archivos de este ejemplo para no perdernos en las lecciones, hazlo en un archivo aparte.
Mientras tanto, seguimos con las lecciones, vale?
Lección 2:
