Foros del Web » Creando para Internet » CSS »

problemas con el menu horizontal

Estas en el tema de problemas con el menu horizontal en el foro de CSS en Foros del Web. hola que tal, les cuento que ando realizando un menu horizontal para mi web ( xboxlatino.byethost10.com/ ) y lo quiero modificar... por sierto me estoy ...
  #1 (permalink)  
Antiguo 03/09/2009, 17:26
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Pregunta problemas con el menu horizontal

hola que tal, les cuento que ando realizando un menu horizontal para mi web (xboxlatino.byethost10.com/) y lo quiero modificar... por sierto me estoy basando en el ejemplo de (documentoweb.com/CSS/Ejemplos/Menu-desplegable-1.html) y lo que pasa esque ese menu utiliza en div menu que en mi caso se llama navigation y nivel1 los mismos colores tanto cuando no esta ensima el maus y cuando esta

aqui les dejo el codigo css der archivo.. es el mismo del ejemplo pero yo lo acomode

Código:
#navigation {
	font-size:0.7em;
	text-align:center;
	width:696px;
}

#navigation ul {
	list-style-type:none;
}

#navigation ul li.nivel1 {
	float:left;
	width:174px;
}

#navigation ul li a {
	background-color:#399;
	color:#fff;
	display:block;
	padding:8px;
	position:relative;
	text-decoration:none;
}

#navigation ul li:hover {
	position:relative;
}

#navigation ul li a:hover, #navigation ul li:hover a.nivel1 {
	background-color:#6cc;
	color:#000;
	position:relative;
}

#navigation ul li a.nivel1 {
	display:block!important;
	display:none;
	position:relative;
}

#navigation ul li ul {
	display:none;
	left:0;
	position:absolute;
}

#navigation ul li a:hover ul, #navigation ul li:hover ul {
	display:block;
}

#navigation ul li ul li a {
	padding:6px 0 8px 0;
	width:174px;
}

#navigation ul li ul li a:hover {
	position:relative;
}
y lo que kiero conseguir que los colores de navigato y los del nivel1 sean diferentes tando en a como en a:hover... no se si se llame asi, espero que me puedan ayudar.

saludos y gracias de antemano
  #2 (permalink)  
Antiguo 03/09/2009, 17:56
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: problemas con el menu horizontal

Y cual es el problema? Es que no sabes identificar que es que?

La estructura es esta:
<ul> // grupo de botones primarios
<li>
<ul> <li> </li></ul> // grupo de botones secundarios
</li>

<li>
<ul><li> </li> </ul> // grupo de botones secundarios
</li>
<li> </li> // boton solo
</ul>

O sea que a tu css le tenes que cambiar el background para el nivel secundario:

#navigation ul li a {background: #222} // nivel primario

#navigation ul li ul li a {background: #456} // nivel secundario

Tambien podes cambiar el color de las letras con a:hover

#navigation ul li a:hover {color: white} // nivel primario
#navigation ul li ul li a:hover {color: blue} // nivel secundario

En fin:
"background" para el color de fondo.
"color" para el de las letras.
  #3 (permalink)  
Antiguo 03/09/2009, 18:10
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: problemas con el menu horizontal

Cita:
Iniciado por mayid Ver Mensaje
Y cual es el problema? Es que no sabes identificar que es que?

La estructura es esta:
<ul> // grupo de botones primarios
<li>
<ul> <li> </li></ul> // grupo de botones secundarios
</li>

<li>
<ul><li> </li> </ul> // grupo de botones secundarios
</li>
<li> </li> // boton solo
</ul>

O sea que a tu css le tenes que cambiar el background para el nivel secundario:

#navigation ul li a {background: #222} // nivel primario

#navigation ul li ul li a {background: #456} // nivel secundario

Tambien podes cambiar el color de las letras con a:hover

#navigation ul li a:hover {color: white} // nivel primario
#navigation ul li ul li a:hover {color: blue} // nivel secundario

En fin:
"background" para el color de fondo.
"color" para el de las letras.
oks muchas gracias mayid te debo una +karma

gracias y saludos
  #4 (permalink)  
Antiguo 03/09/2009, 18:22
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problemas con el menu horizontal

Hola WinderJerter:

Tu tienes un anidamiento algo así:
#navbar #navigation ul .class11 ul li a

Lo que seria en body algo así:

<div id="navbar">
<divid="navigation">
<ul>
<li class="class11">
<ul>
<li>
<a></a>
</li>
</ul>
</li>
</ul>
</div>
</div>


#esto_es_una_id y sirve para referirte a un elemento, debe ser única. En body tendras algo así <etiqueta id="esto_es_una_id">

.esto_es_una_clase
y sirve para referirte a un elemento, puedes aplicar una clase a varios elementos. En body tendras algo así <etiqueta class="esto_es_una_clase">

Bueno, cambiar el estilo es simple si sabes como referirte a los elementos de tu menú en <style>

Si quieres cambiar por ejemplo el color de fondo de #navigation entonces lo buscas dentro de las etiquetas <style> e incluyes la propiedad background-color: aquí el color que tu quieras (white, #fff por ejemplo);

Pues tu tienes:

#navigation {
font-size:0.7em;
text-align:center;
width:696px;
background-color:black;/*tu color*/
}

pero recuerda que css son estilos en cascada, por lo que la cascada "bañará" tus elementos de lo general a lo particular:
(Esto se conoce como herencia y te será útil buscarlo en google o libros.es )

Por ejemplo:

#navigation ul li a {
background-color:#339999;
}

es más particular que:

#navigation {
font-size:0.7em;
text-align:center;
width:696px;
}


Eel color verde de fondo(#339999) está en un último nivel pero si lo pondrías en #navigation esta propiedad se aplicaría también a #navigation ul li a ¿me explico?

:hover es una pseudo-clase, la tienes definida así:

#navigation ul li ul li a:hover {
position:relative;
/*modificala a tu gusto con la propiedad que quieras*/

}

Bueno, una respuesta general para una pregunta general, espero te sirva y no haberte aburrido.

Si quedan dudas pregunta y te ayudamos

Saludos!
  #5 (permalink)  
Antiguo 03/09/2009, 18:31
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problemas con el menu horizontal

como puede ser cuando empeze a escribir mayid no había respondido aún. Tendré que hacer un curso de esos de 3000 palabras por minuto
  #6 (permalink)  
Antiguo 03/09/2009, 18:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: problemas con el menu horizontal

hahaha no importa , pero gracias por tu respuesta tambn la tomare en cuenta para complementarla con la info de mayid

saludos y muchas gracias
  #7 (permalink)  
Antiguo 04/09/2009, 09:59
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problemas con el menu horizontal

ha-ha-ha (con risas de nelson) jaja, aca estaré para lo que pueda ayudarte WinderJerter

Saludos!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:35.