Dar estilos Css a la lista del menú
Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este menú. Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un código Html sencillo para revisarlo nosotros, y sencillo para que los buscadores lo lean bien e indexen nuestras páginas correctamente, es poner en el Html lo justito, y dejar los detalles de cómo queremos adornar cada cosa para la Hoja de Estilo. Además esto nos permitirá hacer cualquier cambio en todas las páginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos. Es genial.
Reparando el fallo del menú.
Si ya hiciste vista previa de la plantilla habrás visto que al poner varios enlaces dentro ha crecido y se sale por debajo de la página web. Vamos a reparar esto desde la Hoja de Estilo. Abre tu Html-Kit y abre estilo-general.css
Esto, después de muuuchas pruebas lo he conseguido arreglar de este modo, colocando un width:800px y un float:left a la capa contenido. No me preguntes mucho porqué, pero es la única combinación que logra que en todos los navegadores se corrija ese fallo. Realmente le estamos indicando a la capa contenido que ha de tener un ancho de 800 pixeles, igual que el ancho de la página. En realidad parece que ocupara menos, pero ten en cuenta que el menú está dentro de él, luego lo amarillo del menú es parte de la capa contenido. Ves ahora como sí ha de tener 800px de ancho? El colocarle el float:left evita que en algún navegador se descuadre todo. No se explicarte porqué ahora mismo, y verás como a veces, a pesar de que cumplas todas las buenas prácticas que se pueden leer por la red, hay que hacer alguna "pirula" para que se vea correctamente la página web con cualquier navegador. Es todo un reto, pero por ahora lo estamos consiguiendo.
Sin más rollo, abre la Hoja de Estilo y deja la línea del estilo contenido de este modo:
y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para ver cómo ahora todo se ha solucionado... o no? Si ves algún fallo no dudes en decírmelo en el Foro CCTW, plis!
Eliminando los puntos de la lista
Esta es fácil y comprensible. Podemos modificar las propiedades del elemento li en la Hoja de Estilos, pero el problema que podemos tener es que si lo hacemos así, todas las listas que tengamos en la web dejarán de tener ese punto, y es más, tomarán todas las propiedades que le digamos ahora. Por eso, mejor que modificar las propiedades del elemento li, lo que haremos será crear un estilo nuevo de li, que usaremos solo en el menú. De este modo todas las listas que pudieramos poner en las otras partes de la web serían normales.
Así que, definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la condición de estar dentro de la capa menu. Toma ya. Cómo te has quedao? je je je. Esto se hace así:
Cuando se pone la capa antes de un tipo de estilo, se está indicando que esas propiedades solo han de respetarse cuando el elemento (en este caso el li) esté dentro de la capa escrita antes (en este caso menu). Que bien, no?
Las propiedades que le vamos a dar en estilo-general.css) son las siguientes:
Esto hace que no tenga ningún (none) tipo de estilo típico de lista, como por ejemplo el puntito aquel. Si guardas la Hoja de Estilo (estilo-general.css) y haces vista previa de la plantilla verás que ya no aparece. En la página siguiente seguimos arreglando el menú.
Lección 2:
