Foros del Web » Diseño web » CSS »

El menú no se mueve

Estas en el tema de El menú no se mueve en el foro de CSS en Foros del Web. Tngo este menu en la parte superior: Y éste es el código CSS: Cita: ul.menu { height: 20px; color: #ffffff; font-size: 20px; font-family:Tahoma, Geneva, sans-serif; ...
  #1 (permalink)  
Antiguo 01/09/2010, 13:15
Usuario no validado
 
Fecha de Ingreso: diciembre-2009
Mensajes: 37
Antigüedad: 4 años, 9 meses
Puntos: 0
El menú no se mueve

Tngo este menu en la parte superior:



Y éste es el código CSS:

Cita:
ul.menu
{
height: 20px;
color: #ffffff;
font-size: 20px;
font-family:Tahoma, Geneva, sans-serif;
margin: 0 0 0 0;

}
ul.menu li
{
position:relative;
width:120px;
font-size: 12px;
color: #000000;
padding: 2px 0px 1px 0px;
margin: 0 0 0 0 ;
}
ul.menu ul
{
position:relative;
left:0px;
top:50px;
width: 130px;
display:none;
padding: 2px 0px 2px 0px;
color: #ffffff;
}
ul.menu li:hover > ul
{
display:block;
background: #b8bfc5;
opacity: 0.6;


}

ul.menu li:hover
{
background: #b8bfc5;

}

ul.menu> li > ul
{
position:absolute;
left:0px;
top:-50px;
display:none;
list-style:none;
}
ul.menu > li
{
display:inline;
color: #ffffff;
font-size: 16px;
padding: 0px;
color: #ffffff;
}
No soy capaz de bajar el menú unos 150 píxeles más abajo. Haga lo que haga no se mueve. ¿En qué me estoy equivocando?

Muchas gracias.

Un saludo!

Última edición por tunait; 14/09/2010 a las 05:43 Razón: remover url a petición del autor
  #2 (permalink)  
Antiguo 01/09/2010, 13:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: El menú no se mueve

EDITO: creo que entendí mal qué quería desplazar
Porque no le está indicando posición a la lista que se despliega al :hover
Ajuste al gusto (px más o px menos) los valores top y left, tal que así:
Código CSS:
Ver original
  1. ul.menu li:hover > ul {
  2. background:none repeat scroll 0 0 #B8BFC5;
  3. display:block;
  4. opacity:0.6;
  5. top:10px;
  6. left:0;
  7. z-index:20;
  8. }

Corrijo mi apreciación inicial. Tiene múltiples selectores que le afectan. Uno de ellos en la línea 152 /ul.menu > li > ul/ donde le indica /top:-50px/


Debería optimizar y depurar un poco su css.
Declaraciones como
Código CSS:
Ver original
  1. body {
  2. background:url("imagenes/fondo.jpg") repeat-x scroll 0 0 #A09E92;
  3. margin:0 0 200px 200px;
  4.  
  5. }
  6. #centro {
  7. background-color:#FFFFFF;
  8. margin:7px 5px 20px 20px;
  9. width:727px;
  10. }

Puede que le arregle algo en una resolución muy concreta y precisa, pero en el resto de los casos, serán una fuente de problemas. Creo.

Última edición por kseso?; 01/09/2010 a las 13:57
  #3 (permalink)  
Antiguo 01/09/2010, 13:52
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 6 meses
Puntos: 101
Respuesta: El menú no se mueve

Esta es mi solución (aunque no creo que sea crossbrowser, porque al definir un margen de 160px puede haber divergencias):

Cita:
#cabecera {
position: relative;
background-image: url(imagenes/cabecera.jpg);
width:710px; height:190px; margin: 0 0 5px 7px;
}

#menu { position: absolute; margin-top: 160px;}
También habrías de poner un reseteo. Para no tener que quitarle a cada elemento el margin por defecto:
* {margin: 0, padding: 0}



Habrías de ver otras cosas. Tenes una doble llave en input.check . Me refiero a }}

En el mismo lugar, definis font-color. Eso no existe. Con que definas color ya alcanza:
font-color: #00C4F4;
color: #2B92DD;

Por último, Firebug me muestra que tenes un id repetido:
<div id="TextoInicio">
  #4 (permalink)  
Antiguo 01/09/2010, 14:02
Usuario no validado
 
Fecha de Ingreso: diciembre-2009
Mensajes: 37
Antigüedad: 4 años, 9 meses
Puntos: 0
Respuesta: El menú no se mueve

Sí, pero a eso no me refería.

Me refiero a mover el menú hacia abajo, no los submenús como me has explicado. Donde pone Inicio y eso, pues ponerlo en la parte inferior de la cabecera.

Espero haberme explicado bien.

Edito: Exacto mayid, a eso me refería.

Muchísimas gracias a los dos por vuestra ayuda. CSS no es mi fuerte, pero ahí intento aprender jejeje...

Un saludo!!
  #5 (permalink)  
Antiguo 01/09/2010, 14:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: El menú no se mueve

Creo que le hemos hecho un flaco favor, pues le hemos corregido una cuestión puntual, pero no hemos evitado que en el futuro, ante el mismo problema en una situación semejante, pueda comprender dónde radica y cómo actuar.
Así que le invito a leer este artículo, obra de Mikel Morote. Ya le enlazo la parte que aplica.

Atentamente
  #6 (permalink)  
Antiguo 01/09/2010, 14:39
Usuario no validado
 
Fecha de Ingreso: diciembre-2009
Mensajes: 37
Antigüedad: 4 años, 9 meses
Puntos: 0
Respuesta: El menú no se mueve

Gran artículo, añadido a mis favoritos.

No dudes que lo usaré, es muy bueno!!

De verdad, aunque no lo creais, me habéis ayudado mucho.

Un saludo!
  #7 (permalink)  
Antiguo 01/09/2010, 14:50
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.015
Antigüedad: 5 años, 6 meses
Puntos: 101
Respuesta: El menú no se mueve

@kseso: la solución que propuse tiene sus problemas. Firefox y Opera por no ir más lejos van a posicionar el menu a alturas distintas. No es así? Porque tienen una interpretación diferente de los pixeles, o algo por el estilo.

Me parece que el html del menú debería tener definido mas bien esto:
#menu { position: absolute; bottom: 2px;}

Y si, estoy completamente de acuerdo en que cada quien debería ser capaz de comprender lo que se le ofrece, y no solo hacer copy+paste.
  #8 (permalink)  
Antiguo 13/09/2010, 10:49
Usuario no validado
 
Fecha de Ingreso: diciembre-2009
Mensajes: 37
Antigüedad: 4 años, 9 meses
Puntos: 0
Respuesta: El menú no se mueve

Por favor, necesito eliminar este mensaje o que quiten la dirección web que sale a inicio, por favor.

Etiquetas: mueve
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 22:19.
SEO by vBSEO 3.3.2