Últimos Retoques

Fíjate ahora. Abre tu plantilla.html con el Html-Kit si la tienes cerrada y añade un tercer enlace al menú. Ya sabes, después de la línea del Enlace 3, pones una idéntica y le cambias el número 3 por el 4, es decir, añades esto:

<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>
    <li><a href="#">Enlace 4</a></li>
  </ul>
</div>

Si de nuevo haces vista previa verás como no hay que tocar para nada los fondos del menú, sino que estos crecen con él. Hay que ahorrar trabajo, no? je je je.

Ya para terminar de dejarlo perfecto, añade un padding-top:12px (margen por arriba al título del menú) para separarlo un poco de la franja oscura de la imagen y listo, queda perfecto, genial, fenomenal... er.. no tengo palabras, casi lloro de emoción, tú no? je je.

Fondo del menu perfectamente integrado

También vendría bien dejar un poco de margen por la parte inferior, pues parece que el Enlace 4 está demasiado pegado a la parte baja de la imagen, no? Esto lo podemos arreglar colocando un padding por abajo de unos 5 pixeles a la capa menu, incluyendo en su estilo algo así:

#menu {background-color: yellow ; width: 150px ; float:left ;
        text-align:left ; margin: 3px 10px 3px 3px ;
        background-image: url(objetos/menu-parte-inferior.gif);
        background-position: bottom ;
        padding-bottom:5px }

Pensando un poco... ahora que toda la capa del menú está cubierta por imagen de fondo, podemos eliminar eso de background-color: yellow que tenemos al principio del código de arriba, no crees? Así ahorramos! je je. Puedes eliminar esa parte.

Más cosas? Venga vale.... a ver... SI! Haz vista previa y pon el ratón sobre cada uno de los enlaces de este menú vertical. Como verás, la sombra gris que aparece cuando haces eso tiene un margen por la izquierda, pero en cambio no lo tiene por la derecha y ese efecto es un poquillo feo. Cómo lo arreglamos? El margen que vemos por su izquierda ha de estar definido por nosotros en algún lugar de la hoja de estilos... seguramente en la línea que define los li del menú, es decir, en esta línea:

#menu li {list-style:none ; margin: 4px 0px 4px 6px ;}

y ahí está la solución. Vemos que tiene definidos unos márgenes de 4 por arriba y por abajo, 6 pixeles por la izquierda y un cero patatero por la derecha. Ponle un 8px por ejemplo en lugar de cero y fíjate como ahora se ve mejor, verdad?

Menu refinitivo en la página web de ejemplo!

Sómos unos Cracks!

El efecto ahora es para morirse de gusto! GUAU!! diseño de páginas web

Por cierto. Quizás no veas bien los acentos en tu web cuando la subas al sevidor. En ese caso no olvides insertar esta línea de código entre <head> y </head>:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Toma nota e insértalo en todas las páginas que hagas, siempre que en ellas se usen acentos y los escribas tal cual en el código Html, oki?