Buenas, como alguno me habéis preguntado sobre el tema y también sugerido os voy a contar cómo podemos hacer que nuestro menú sea horizontal. ¡Soemla, va por tí!
Es muy sencillo, ya veréis. Empezaremos por ver cómo es nuestro código HTML. un ejemplo, podría ser el siguiente (con DIVs):
Si alguien prefiere hacerlo con tablas, sólo tendrá que cambiar el "div" por el "td" correspondiente
Bien, ahora sólo nos queda darle forma, así es que nos vamos al CSS.
Primero voy a quitarle el estilo a la lista para que no me salgan esos puntitos, que no me molan nada:
Código:
#menu ul { list-style: none ; }
Si lo habéis hecho con tablas y clases, sería (por ejemplo):
Código:
td.menu ul { list-style: none ; }
Ahora es cuando llega la magia, cambiamos para que se vea el menú en horizontal:
Código:
#menu ul li { float: left ; }
Y, por último sólo nos queda hacer que no se pegue una opción con otra, así es que añadimos:
Código:
#menu ul li { float: left ; margin: 0px 0px 0px 10px ;}
Y ahora os explico algunas cosas:
1.- En CSS se pueden utilizar selectores anidados, o sea, que si tengo un div (#menu) que tiene una lista (ul) y quiero que lo que ponga sólo afecte a la lista del div #menu, simplemente pongo
Código:
#menu ul { ... ; }
Y las características que ponga sólo afectaran a esas listas.
2.- "float: left ;", creo que se explica por sí sólo, pero vamos, se traduce por "que flote a la izquierda".
3.- El margin es el toque final y cada uno tendrá que adaptarlo a sus necesidades.
Espero que os sirva, amigos!!!!
Marcadores