Eliminando el punto negro del menú Horizontal

Para eliminar ese puntito tan molesto, hay que ponerle la propiedad list-style:none a alguna de las líneas de la hoja de estilo. A cuál crees que hay que ponérsela? Pues por ejemplo a la línea #navegacion li, pues esa línea contiene las propiedades de cada una de las secciones del menú, verdad? Vamos a ver que pasa. Añade esto:

#navegacion li {float:left; list-style:none;}

Conseguimos esta otra vista previa de la plantilla. Ahora no aparecen esos punto, que bien.

Acomodando el margen de los enlaces del menú horizontal

A estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer todos los enlaces del menú horizontal tan pegados se muestren un poco más separados. Imagino que sospechas que eso se hace o bien con el margin o bien con el padding. Reconozco que es un poco complicado saber si hay que usar el margin o el padding, a mí me ocurre lo mismo. Siempre recurro a la foto del apartado Margin o Padding para aclararme, je je je. Pero ante la duda lo mejor es probar, si uno no va bien, usa el otro.

Vamos a intentar separar cada enlace del menú. Para ello le pondremos un margin al los elementos li de la capa navegacion. Para ello ya sabes, hacemos esto:

#navegacion li {float:left; list-style:none; margin:0px 10px 0px 10px;}

Si recuerdas, el orden de esas cifras era: la primera cifra para el margen superior, la segunda para el de la derecha, la tercera para el margen inferior y la última para el de la izquierda. Según la línea de arriba, hemos dejado unos margenes de 10 pixeles por la izquierda y derecha de cada enlace del menú. Queda así ahora la plantilla de nuestra web.

Parece un poco escaso. Vamos a cambiar los dos 10px por 20px para aumentar la separación entre ellos, quedando ahora así la plantilla. Ahora queda mejor.

Dando margen al conjunto de enlaces

Hemos visto como separar los enlaces entre ellos, pero aún podemos dejarlo mejor si los centramos, no? Como no consigo centrarlos fácilmente vamos a hacerlo de otro modo. Vamos a colocarle un margen a la capa navegacion ul por la izquierda de unos 50px. Con eso conseguimos mover a la derecha todo el grupo de enlaces. La nueva línea de css que hay que poner a la hoja de estilos es esta:

#navegacion ul { margin-left: 50px }

Ahora tendremos este aspecto. Como ves, hemos desplazado todos los enlaces un poco (50 pixeles) a la derecha. Vamos a aumentarlo a 180px para que quede más centrado. Este el el resultado.

Ya sabes que cuando hagas tus propios experimentos basados en este ejemplo, si añades más enlaces a este menú horizontal tendrás que disminuir estas cantidades para centrarlo.

Colocando enlaces al menú

Solo nos falta ya colocarle los enlaces a los elementos del menú. Eso si que debes saberlo ya, pero lo repetimos para recordarlo. Como aún no sabemos a qué página mandar al visitante cuando hagan clic en ellos, en lugar de ponerle la ruta de la página destino le colocaremos un simple #. Eso hace que los enlaces se muestren como tales, pero al pulsar sobre ellos no te mandan a ningún lado.

Para convertir los elementos de la lista del menú horizontal en enlaces, basta con colocarle esto que os señalo en negrita al código inicial que pusimos en el archivo plantilla.html:

<div id="navegacion">
  <ul>
    <li><a href="#">Sección 1</a></li>
    <li><a href="#">Sección 2</a></li>
    <li><a href="#">Sección 3</a></li>
    <li><a href="#">Sección 4</a></li>
  </ul>
</div>

Con eso, la plantilla se ve ahora de esta forma.

Edito! Nuestro amigo del foro, jjca05, me recuerda que en algunas versiones de navegadores, como en el caso del opera 11.50, se muestran los enlaces uno junto al otro y no bajo el otro. Para corregir esto lo que hay que hacer es colocar todas las líneas de código de los li´s seguidas. Esto de poner todas las líneas de los li´s seguidas has de hacerlo siempre, pues además de evitar este problema, evitas también que aparezcan márgenes indeseados entre cada elemento de la lista. De modo que la forma correcta de escribir aquél fragmento de código (y que has de usar siempre siempre) es esta:

<div id="navegacion">
  <ul><li><a href="#">Sección 1</a></li><li><a href="#">Sección 2</a></li><li><a href="#">Sección 3</a></li><li><a href="#">Sección 4</a></li></ul>
</div>

No queda tan clarito como antes, pero es el único modo de evitar tener distintos resultados en cada navegador, cosa nada deseable.

Fíjate que ahora los enlaces del menú horizontal se comportan como los del menú lateral, es decir, aparecen rojos y sin subrayar y cuando colocas el cursor del ratón sobre ellos aparecen con fondo gris claro y con línea bajo ellos. Esto es porque cuando definimos las propiedades a las etiquetas a en la hoja de estilo, lo hicimos de forma general, es decir, para TODOS los enlaces. Más adelante aprenderemos a crear varios tipos de enlaces, por si queremos que los del menú lateral se comporten de un modo distinto a los del menú horizontal o incluso distintos a otros elementos del cuerpo de la página web.