como creo menu similar a este en css?

#1 (**permalink**) 21/07/2005, 15:08

Hola,

quiero crear un menu mas dinamico y atractivo para el nuevo diseño que estoy creando para la web...

seria de este tipo http://www.csszengarden.com/?cssfile...109.css&page=8

la historia es que no controlo demasiado de css y al mirar el css de esa ese diseño que he puesto anteriormente no se muy bien como esta hecho..

me podeis horientar please??

saludos y gracias anticipadas... mi deseo es poder aprender mejor el funcionamiento de css.

ciao

ramm · #2 (**permalink**) 21/07/2005, 19:53

Hola, mira, eso no es tan complicado, el punto es hacer una lista con los vinculos, y con CSS le vas poniendo los estilos.

Mira este tutorial que escribi, hay un menu mas o menos como eso pero en horizontal, que facilmente lo puedes adaptar a vertical.

Quizas antes de ese puedes ver este otro que es para comenzar con CSS, bien facil de entender.

Espero te sirvan

#3 (**permalink**) 22/07/2005, 16:12

Hola,

el menu que busco es en horizontal, he probado este codigo:

Código PHP:

  li a { 
    display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/  
    background-color:#666666; /*algo de color*/  
    color:#FFFFFF; /*mas*/  
    width:200px; /*defino el ancho del rectangulo del vinculo*/ 
    padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/  
    text-decoration:none; /*elimino el subrayado del vínculo*/  
    font-weight:bold; /*decoración*/  
    text-transform:uppercase; /*decorare los vinculos en mayusculas*/ 
} 
li a:hover { 
    background-color:#000000; /*decoración para el evento hover (mouse encima)*/  
}

y es basicamente lo que busco... pero lo que quiero es que no se relacione con la etiqueta <li> y que sea un class independiente, he probado pero al anteponer cualquier nombre no aparece el rectangulo...

de css controlo lo basico con textos, divs, etiquetas... pero esto de los menus ya me resulta complicado.

¿que pasos debo seguir? darme alguna pista please.

saludos y gracias anticipadas

#4 (**permalink**) 22/07/2005, 16:57

puff que tonto estoy...

me falto poner el punto delante para que fuese contextual.... jejejej se me fue la pinza.

vale, ahora solo me keda saber como definir que todo quede en horizontal y sin problemas.

saludos.

ramm · #5 (**permalink**) 22/07/2005, 18:29

Cualquier lista de items (como los menus) deben ser listas ordenadas (<ul>, <li>), para eso estan hechas, procura usarlas igual.

No entendi lo de un class independiente, ni lo de que todo quede en horizontal, ese menu es horizontal, el de la muestra.

Puedes por favor postear lo que estas haciendo para ayudarte mejor?

Saludos.

#6 (**permalink**) 23/07/2005, 08:16

Hola,

Verás ramm, yo lo que estoy creando es un css para el foro y tambien para el resto de la web, entonces como en el foro phpbb ya hay una opcion de crear listas con <li><ul> debo de evitar utilizar esas etiquetas para evitar problemas a la hora de crear listas en el foro.

Por ello lo que he hecho es llamarle por ejemplo ".menuhorizontal" asi es contextual y puedo meterlo usando un class.

Lo que busco es crear ese menu horizontal sin que interfiera con ningun codigo html,

En el rediseño que estoy haciendo www.mindpanic.com/index2.php voy a eliminar el menu principal de la izquierda y a meterlo en horizontal arriba debajo del scroll de novedades.

Por ahora no he realizado pruebas, pero ahora mismo estoy en ello, segun vaya trabajando ire posteando en este hilo las dudas o incidencias que vayan surgiendo.

saludos