Formatear los estilos a cero
Si tuvieras varios navegadores diferentes, como el Internet Exporer, el Opera, el Firefox, etc, etc, te darias cuenta que en cada uno de ellos el menú (y algunas otras cosas) se ve ligeramente distinto. En unos los enlaces aparecen en el centro, en otros un poco a la derecha, o un poco más a la izquierda en otros.. Esto es porque mientras no se indique lo contrario, unos navegadores deciden dejar un margen de unos pocos pixeles para cada elemento, mientras otros navegadores deciden que no, que hay que dejar un poco más o un poco menos... Al final lo que ocurre es que parece imposible ver una página web exáctamente igual con todos los navegadores.
Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero uno bien importante sí. Como cada uno toma por defecto un valor inicial para los margenes y bordes, lo que haremos será indicar nosotros en la Hoja de Estilos que TODOS los elementos van a tener un valor cero para los bordes y márgenes. Luego, si deseamos cambiar alguno, lo definiremos en la Hoja de Estilos, pero por el momento lo ponemos todo a cero, o lo que es igual, vamos a formatear los estilos!
Para indicar que ha de aplicarse a todos los elementos posibles, ponemos un asterisco. Para indicar que tengan margen, padding (padding es otro tipo de margen que ya explicaré) y borde cero basta con colocar en la primera línea de la Hoja de Estilo, esto:
Si escribes esta línea en estilo-general.css, la guardas y haces vista previa de la plantilla verás como ahora el menú aparece centrado, justamente centrado, sin márgenes. También han desaparecido otros márgenes que rodeaban la capa global, etc. Tenemos el poder! je je je.. Eso sí, no olvides colocar esa línea la primera de todas, no se te ocurra ponerla la cuarta, la quinta, etc, debe ser la primera de todas, arriba del todo en estilo-general.css. De lo contrario, como el navegador va leyendo los estilos de arriba a abajo, si la lee de las últimas anularás los márgenes y bordes de las capas definidas antes de esa línea. Acuérdate!
Enlaces del menú hacia la izquierda
Has visto que todos los elementos de la web de ejemplo salen centrados? Sabes porqué? Pues porque pusimos text-align:center en la etiqueta body, y como el body contiene a toda la web entonces todos los elementos de la web estarán centrados, a no ser que..... a no ser que le indiquemos otra cosa a cada estilo concreto, claro.
Por ejemplo, los enlaces del menú quedan mucho mejor si aparecen alineados a la izquierda, verdad? Pues vamos a arreglar eso ahora mismito! Abre tu Html-Kit, abre la Hoja de Estilo y, escribe text-align:left dentro de las propiedades de la capa #menu, tal que quede así:
La verdad, también se hubiera podido poner el text-align:center en el estilo #menu li, no? De la forma primera se aplica a todos los elementos de la lista, mientras que definiendolo en #menu li solo se aplicaría a los elementos encerrados entre <li> y </li>. Tiene sentido, verdad? Lo dejamos definido en el #menu por ahora.
Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado pegados a la izquierda, verdad? Seguimos mejorando el aspecto en la página siguiente.
Qué tal lo llevas? Levántate un poco y estira las piernas, que te va a dar algo malo! je je je je. Si no entiendes algo o quieres que te explique mejor alguna parte dímelo en el Foro CCTW, sin problemas, o escribe allí tus dudas o sugerencias, que para eso estamos colega!
Lección 2:
