Cómo hacer el menú horizontal

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):

<div id="menu">
    <ul>
      [*][url="index.html"]Inicio[/url]
      [*][url="notis.html"]Ultimas Noticias[/url]
      [*][url="apartado-I.html"]Apartado I[/url]
      [*][url="apartado-II.html"]Apartado II[/url]
  [/list]
</div>

Si alguien prefiere hacerlo con tablas, sólo tendrá que cambiar el "div" por el "td" correspondiente :wink:

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:

#menu ul { list-style: none ; }

Si lo habéis hecho con tablas y clases, sería (por ejemplo):

td.menu ul { list-style: none ; }

Ahora es cuando llega la magia, cambiamos para que se vea el menú en horizontal:

#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:

#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

#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!!!!

¡Tan lindo mi amigo hq!. Gracias, muchisimas gracias :wink:
Ya me había puesto a leer algo por ahi en la red.Con esto complemento y si hay dudas nos leemos.
Todos ud(s) son increibles. :wink:
saludos

SOEMLA

hola!

genial estos códigos

he conseguido realizar el menú horizontal y sin los puntitos famosos...

ahora la pregunta es, dependiendo del tamaño de la ventana del navegador el menu se me pone en dos líneas en lugar de una sola.

hay alguna manera de evitar esto!?

gracias

Hola ariviti:

El menu horizontal lo has hecho con tablas o con divs?

SOEMLA

Parece q has solucionado lo del menu horizontal.

saludos soemla

ei q estado un poco desconectada.

no he conseguido arreglar lo del menu horizontal

lo he hecho con tablas, es mi primera web i aun no me he metido con los divs i eso

Para lo del menu horizontal tienes 2 opciones:

1.- Especificar el ancho necesario. Lo bueno es que siempre se verá en 1 línea, pero lo malo es que si la pantalla es más pequeña que el menú, aparecerá el scroll horizontal.

2.- Dejar que el navegador se adapte al contenido. Lo bueno es que no te saldrá el scroll horizontal, pero lo malo es que te puede pasar lo del menú en varias líneas.

Solución: También puedes hacerlo con DIVs en vez de tablas y ponerle el Scroll sólo al menú (aunque queda un poco feillo).

Tu decides!!

ok gracias!!!

de momento he dejado que se ajuste a la pantalla de cada ordenador

muchas gracias por el consejo!

Hola hq:

Me he seguido por el tutorial y la estructura de mi pagina web la hecho con tablas.Puedo hacer solo el menu horizontal con Div aunque el resto de la estructura de la pagina este con tablas?

saludos
soemla

Claro, incluso puedes hacer el menú en una celda de las tablas, sólo tiener que cambiar donde pone <div> por el <td> que corresponda a la celda del menú.

El curso paso a paso con tablas asigna la celda a1 y a2 para logotipo y banner respectivamente.
Inserte el div q necesito para el menu horizontal debajo de estas celdas. En vista diseño D.8 me visualiza el div fuera del ancho de las tablas (yo les asigne width:90% a las tablas q componen mi pagina web). Igual le di ésta medida al div del menu (width:90%).
Pero cuando doy vista previa con IE 7.0 y Opera me visualiza el div perfectamente(osea no se sale del ancho de las tablas).
Es normal q se visualize fuera del ancho de las tablas en vista diseño con D.8.0?
saludos soemla

Cuando trabajas con Dreamweaver, la vista previa no es tan ancha como tu pantalla (hay menús laterales, bordes del programa y eso, por eso se ve iferente, pero no te preocupes. Si lo ves bien en la vista previa, es que está bien.

Gracias hq.