Arreglando los márgenes del menú
Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los márgenes cuando tengamos los enlaces definitivos, pues según lo largo que sea el texto de cada enlace podemos ajustarlo más o menos, al igual que la anchura del menú. Pero como ya estamos liados con esto, vamos pa´lante y lo terminamos, te parece? Va a ser muy facilito.
Aún no te lo he dicho, pero quizás hayas visto ya por algún lado varias formas de especificar los márgenes. Se pueden definir de estas formas:
Esto indica que se ha de dejar 10 pixeles tanto por arriba como por abajo y por ambos lados.
Este otro modo, con dos cantidades, indica que se ha de dejar 10 pixeles por arriba y abajo y 20 pixeles por la derecha e izquierda. Es decir, la primera cifra indica el margen de arriba y abajo y la otra la de los lados.
Y este otro modo (puedes escoger el que te venga mejor según si los márgenes son iguales para todos los lados o diferentes) define por orden los margenes a dejar por arriba, por la derecha, por abajo y por la izquierda respectivamente. O para acordarnos, la primera cifra es la de arriba y las demás van en sentido de las agujas del reloj (arriba, derecha , abajo e izquierda).
Nosotros, para el caso de los márgenes del menú vamos a escoger la última forma, con las cuatro cifras, pues así podemos retocar muy fácilmente y ver como va quedando. Empezamos como siempre, abrir tu Html-Kit, abrir la Hoja de Estilos y escribir dentro de los corchetes de la capa #menu li lo siguiente:
Lo he puesto todos a cero (en realidad ya estaban todos a cero pues hicimos el formateo con el asterisco hace muy poco) y vamos probando con distintos valores para ver como va quedando.
Lo que más me interesa es dejar un poquito de margen hacia la izquierda para separar los enlaces del borde, y también un poco de margen por encima y por debajo para que no se vean muy apiñados. En cambio el margen derecho me interesa más que siga a cero, pues así tengo más hueco para colocar el texto de cada enlace, lo pillas?
Así que, tras varias pruebas (te invito a que hagas tus experimentos poniendo valores un poco exagerados para ver mejor los efectos) lo vamos a dejar así:
Te recomiendo que en estos ejemplos que vamos haciendo pongas exactamente lo mismo que yo. Así no te liarás más adelante cuando hagamos cambios. Confía en mí un poco, no? Tu puedes ir a tu bola si quieres, pero en el otro sitio que hemos creado al principio, al que llamamos <>bmis-experimientos, pero en esta mando yo, oki? je je je.
Sigo echando de menos algo... Ah! claro, lo de eliminar el subrayado y hacer que cambien de color los enlaces cuando pasas el ratón por encima! Eso mola, vamos a verlo en la página siguiente, es muy sencillo también, y es gratis! je je je.
Lección 2:
