Retocando los códigos

El código Html completo del menú lateral era por el momento este:

<div id="menu">
  <ul>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
    <li><a href="#">Enlace 3</a></li>
  </ul>
</div>

Bueno, realmente es ese pero todas las líneas entre <ul> y </ul> han de estar seguidas una justo después de la otra para que el internet explorer muestre bien el menú. Yo aquí lo escribo en líneas separadas para que se vea más claro, pero acuérdate de luego guardar la plantilla con todas esas líneas seguidas.

La idea de colocar las imágenes anteriores como fondos, pues así no nos molestará a la hora de escribir los enlaces dentro. Para ello la imagen más larga se la vamos a poner de fondo a la capa menu, mientras que la imagen más corta, la de arriba se la tenemos que poner a algún elemento de dentro de esa capa. Si se la ponemos de fondo a los enlaces, esa imagen se repetirá con cada enlace, con lo que no nos vale (solo debe aparecer una vez y además arriba del todo).

Para remediarlo le vamos a poner un título al menú. Como cada sección tendrá su propio menú parece buena idea que ese título sea el nombre de esa sección. Así, si una sección se llama "poesias", por ejemplo, pondremos la palabra "Poesias" arriba del todo del menú, como si fuera un título, y al elemento título (h1) le colocaremos ese fondo corto. Y todo arreglado.

De modo que, lo único que hemos de retocar en el código Html de la plantilla.html será el incluir el título. Si recuerdas de lecciones anteriores, los títulos se escriben igual que los párrafos, pero en lugar de usar las etiquetas <p> y </p> se usaban estas otras, <h1> y <h1> (es un uno, no una ele!).

El menú anterior con el título puesto quedaría entonces con este código Html:

<div id="menu">
  <ul>
    <h1>Título de Sección 1</h1>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
    <li><a href="#">Enlace 3</a></li>
  </ul>
</div>

El problema que se nos presenta es que nosotros ya habíamos definido unas características para los párrafos tipo h1, por lo que ahora si las cambiamos, también cambian las propiedades de los títulos que en un futuro pongamos en el contenido de la página.

Esto se supone que sabemos arreglaro. Queremos definir unas propiedades para los títulos del tipo h1, pero solo para los que están dentro del menú, es decir, los que pertenecen a la capa menu. Te acuerdas como se hacía? Je je je, que memoria...

Abre el archivo estilo-general e incluye esta línea, por ejemplo, debajo de la línea donde definimos la capa menu, así seguiremos cierto orden.

#menu h1 {}

Con esa línea lo que conseguimos es darla propiedades SOLO a los títulos que hay dentro de la capa menu, sin tocar para nada los demás. Solo un problema, y es que como los navegadores leen desde arriba hacia abajo. Te lo explico mejor.

Imagina una casa llamada Body. Dentro de ella hay unas cuantas habitaciones que llamamos Capas y dentro de cada habitación o capa hay varios elementos (párrafo, enlaces, etc). Imagina ahora que la hoja de estilos le cambia los aspectos a los elementos de la casa. Por ejemplo, si escribo esto:

* {el color del pelo será rubio}

Todos (el asterisco * indica TODOS los elementos) los habitantes de la casa serán rubios. Te acuerdas? Nosotros en lecciones pasadas pusimos una línea similar, que empezaba con un asterisco.

Ahora imagina que le digo con esta otra línea:

#cocina {el color del pelo será moreno}

que todos los elementos de la cocina (la capa cocina) han de ser morenos. Qué ocurre? Al final serán rubios como decía la línea de antes o serán morenos como dice esta otra? Pues como la última orden que he dado es la segunda, la de cocina, esa será la que manda. En caso de que dos líneas digan distintas cosas para una misma propiedas (altura, anchura, borde.... color del pelo..) la que al final se muestra en el navegador es siempre la última.

Por supuesto, los elementos del baño y del salón siguen siendo rubios, pues la línea de la "capa" cocina solo habla de sus elementos, no de los del resto de la casa. Se entiende ahora? Espero que si, je je. Y si no se entiende, dímelo en el Foro CCTW e intento explicarlo mejor, oki? Te lo agradecería mucho!

Bien, pues si miras en la hoja de estilo-general.css, verás que tenemos al final del todo esta línea:

h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}

Al estar al final, y estar definiendo propiedades para todos los h1 de la web, son esas las características que mandan y será inutil darle otras propiedades en la línea nueva que hemos puesto. Por qué? Pues porque ésta línea está después.

Cómo lo arreglamos? Fácil, la situamos antes de la otra y listo, oki?