Foros del Web » Creando para Internet » CSS »

Menu Css

Estas en el tema de Menu Css en el foro de CSS en Foros del Web. Hola, Estoy aprendiendo Css, y estoy haciendo una página html con css y quería poner un menú desplegable, el caso es que cuando muestro el ...
  #1 (permalink)  
Antiguo 22/02/2011, 12:11
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Menu Css

Hola,

Estoy aprendiendo Css, y estoy haciendo una página html con css y quería poner un menú desplegable, el caso es que cuando muestro el menú me desplaza el contenido de la página hacia abajo y no logro ver que es lo que pasa.

Os dejo aqui el código que estoy utilizando por si alguno me puede echar una mano que estaría muy agradecida.
Cita:
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="activo"><span class="activo">Inicio</span></a></li>
<li class="nivel1"><a href="#" class=""><span>¿Quienes somos?</span></a>
<ul>
<li><a href="#"><span>Origen</span></a></li>
<li><a href="#"><span>Ubicaci&oacute;n</span> </a></li>
<li><a href="#"><span>Misi&oacute;n y objetivos</span></a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Asociaci&oacute;n</span></a>
<ul>
<li><a href="#">Listado de asociados</a></li>
<li><a href="#">Buscar comercios</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Servicios</span></a>
<ul>
<li><a href="#">Formaci&oacute;n</a></li>
<li><a href="#">Asesoramiento</a></li>
<li><a href="#">Ayudas y subvenciones</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Hazte Socio</span></a>
<ul>
<li><a href="#">Ser socios</a></li>
<li><a href="#">Ventajas</a></li>
<li><a href="#">¿Como hacerse socios?</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Noticias</span></a>
<ul>
<li><a href="#">Noticias más importantes</a></li>
<li><a href="#">Últimas noticias</a></li>
<li><a href="#">Foro</a></li>
</ul>
</li>
</ul>
</div> <!-- /menu principal -->
Cita:
div#menu {
left:205px;
position:relative;
top:-32px;

}

div#menu li.nivel1 {
margin-right:4px;
font-weight:bold;
}

div#menu li a {
padding: 11px 0px 10px 10px;
*padding: 0px 0 10px 10px;
text-decoration: none;
line-height:35px;
text-decoration: none;
overflow: hidden;
}
div#menu li a span {
padding: 11px 12px 10px 0px;
color:#000000;
overflow: hidden;
}

div#menu li a.activo, div#menu li a:hover {
background: transparent url(imagenes/menu_izq.png) no-repeat;
}
div#menu li span.activo, div#menu li span:hover {
background: transparent url(imagenes/menu_der.png) repeat-y right top;
color:#AA1428;
}

div#menu li ul {
display: none;
}
div#menu ul li a:hover ul, div#menu ul li:hover ul {
display: block;
position: relative;
left: 0px;
}
div#menu ul li ul{
background: transparent url("imagenes/menu_desplegable.png") no-repeat;
width: 165px;
padding: 0px 0px 10px 0px;

}
div#menu li li a {
background: none;
}

div#menu ul li ul span{
background: transparent url("imagenes/menu_nivel2_linea.png") no-repeat;
}
div#menu li:hover ul {
left: 0px;
z-index: 100;
}
Muchas gracias por vuestro tiempo y ayuda
  #2 (permalink)  
Antiguo 22/02/2011, 15:33
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Menu Css

Este enlace es de ayer mismo. Explica las dos formas que conozco en CSS de ocultar y mostrar elementos. Tu ya has descubierto una de ellas. No hagas caso de mi primer comentario porque hay errores en el CSS y sigue leyendo hasta el final.
Para encontrar soluciones en el foro conviene empezar por hacer una búsqueda en el recuadro que hay en el menú.
http://www.forosdelweb.com/f53/ayuda...egable-887789/
  #3 (permalink)  
Antiguo 22/02/2011, 16:35
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Menu Css

Ya he estado mirando los menus que hay en las FAQ,s asi como otros ejemplos, pero no consigo solucionar ¿Como podría subir el código o las imagenes para que se pueda ver?
Gracias
  #4 (permalink)  
Antiguo 22/02/2011, 17:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu Css

Código CSS:
Ver original
  1. div#menu li ul {
  2. display: none;
  3. }
display: none -> significa que ni el ojo lo ve (el navegador no lo muestra) ni los demás elementos lo sienten (se comportan como si no existiese)
Código CSS:
Ver original
  1. div#menu ul li a:hover ul, div#menu ul li:hover ul {
  2. display: block;
  3. position: relative;
  4. left: 0px;
  5. }
display: block + position: relative significa que el ojo lo ve y los demás elementos le tienen que hacer sitio.
Por lo tanto al mostrarse después que la página haya sido acomodada, el navegador tiene que mover todos los elementos para hacerle sitio.
Para que ello no ocurra, saque completamente esa lista (ul) del flujo cambiando el valor de position a absolute.

Y recuerde cuando modifique un código debería hacer sólo un cambio por vez y verificar.
  #5 (permalink)  
Antiguo 22/02/2011, 17:33
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Menu Css

Gracias, he visto que poniendo:
Cita:
div#menu ul li a:hover ul, div#menu ul li:hover ul {
display: block;
position: absolute;
}
Ya no me desplaza el contenido hacia abajo, pero siempre aparece en la misma posición, y yo quiero que aparezca debajo del item que se despliegue, que yo creo que eso se conseguia con la position: relative pero asi se me desplaza hacia abajo,

Muchas gracias poe vuestra ayuda.
  #6 (permalink)  
Antiguo 22/02/2011, 17:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu Css

www.librosweb.es -> capítulo 5 ->posiciones
Ya hasta me lo se de memoria.
  #7 (permalink)  
Antiguo 23/02/2011, 09:57
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: Menu Css

Ya viste éste ejemplo, tal vez es lo que quieres hacer

http://www.araudi.net/Desplegables/menu_desplegable7.html

Saludos!
  #8 (permalink)  
Antiguo 23/02/2011, 10:32
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Menu Css

Gracias, si he visto los ejemplos pero no consigo solucionar lo que me pasa... seguré indagando, gracias por la ayuda
  #9 (permalink)  
Antiguo 23/02/2011, 11:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu Css

¿Se molestó en ver el enlace proporcionado?
Aquí otra vez: http://www.librosweb.es/css/capitulo...onamiento.html
Si lo vio y tiene alguna duda de comprensión, no sea tímido, exponga sus dudas concernientes a su caso en concreto.
  #10 (permalink)  
Antiguo 23/02/2011, 16:30
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Menu Css

Si me he leido varias veces el capitulo del posicionamiento, pero no consigo ver el que necesito, creo que es el flotante... pero no se como hacer que con los mismos estilos me muestre el menú de forma correcta y sin usar el relative ya que necesita espacio para mostrar la nueva capa. Perdon si la pregunta es tonta pero llevo poco tiempo con las css.

Gracias
  #11 (permalink)  
Antiguo 23/02/2011, 16:46
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: Menu Css

Bueno te sugiero que te crees un espacio web por ejemplo en http://hosting.miarroba.es/, es facil de crear, para que puedas subir tu código y así se te pueda ayudar mejor, y para futuras consultas también.

Saludos!
  #12 (permalink)  
Antiguo 23/02/2011, 17:32
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Menu Css

después de ver los malabares que has echo y no das creo que lo que te falta es comprender que cuando usas position:absolute este se coloca en referencia al elemento padre que tenga especificado el atributo position: en cualquiera de sus presentaciones.

por ende si el elemento padre mas próximo con position es
Código CSS:
Ver original
  1. div#menu {
  2. left:205px;
  3. position:relative;
  4. top:-32px;
  5. }

es normal que se posicione en referencia de este, si necesitas que se coloque en base al elemento <li> que lo contiene deberás aplicarle a este un postion:relative

Código CSS:
Ver original
  1. div#menu li.nivel1 {
  2. margin-right:4px;
  3. font-weight:bold;
  4. position:relative;
  5. }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 23/02/2011 a las 17:38
  #13 (permalink)  
Antiguo 24/02/2011, 01:51
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Menu Css

Si pero si aplico posición relative cuando muestro el menú me desplaza el texto hacia abajo, dejando un espacio a lo nuevo, Lo he subido a miarroba os dejo la web por si me podeis ayudar que estoy desesperada,

http://pruebapaginacurs.webcindario.com/


Gracias
  #14 (permalink)  
Antiguo 24/02/2011, 02:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Menu Css

y si vuelve a leer lo que le indique?

notara que usted cambio de positon:absolute a relative en:
div#menu ul li a:hover ul, div#menu ul li:hover ul{}

yo le dije que lo colocara en el elemento padre
div#menu li.nivel1 {}

su código debería quedar:

Cita:
div#menu li.nivel1 {
margin-right:4px;
font-weight:bold;
position:relative;
}

div#menu ul li a:hover ul, div#menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #15 (permalink)  
Antiguo 24/02/2011, 03:04
 
Fecha de Ingreso: septiembre-2006
Mensajes: 114
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Menu Css

Muchas gracias, asi funciona correctamente, perdona pero antes no había entendio el mensaje anterior.

Etiquetas: Ninguno
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 16:32.