Menu Css

lissette22 · #1 (**permalink**) 22/02/2011, 12:11

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">Inicio</a></li>
<li class="nivel1"><a href="#" class="">¿Quienes somos?</a>
<ul>
<li><a href="#">Origen</a></li>
<li><a href="#">Ubicación </a></li>
<li><a href="#">Misión y objetivos</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Asociación</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">Servicios</a>
<ul>
<li><a href="#">Formació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">Hazte Socio</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">Noticias</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>

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

sanxuan · #2 (**permalink**) 22/02/2011, 15:33

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/

lissette22 · #3 (**permalink**) 22/02/2011, 16:35

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

kseso? · #4 (**permalink**) 22/02/2011, 17:17

Código CSS:

Ver originaldiv#menu li ul {
display: none;
}

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 originaldiv#menu ul li a:hover ul, div#menu ul li:hover ul {
display: block;
position: relative;
left: 0px;
}

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.

lissette22 · #5 (**permalink**) 22/02/2011, 17:33

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.

kseso? · #6 (**permalink**) 22/02/2011, 17:39

www.librosweb.es -> capítulo 5 ->posiciones
Ya hasta me lo se de memoria.

omarMusic · #7 (**permalink**) 23/02/2011, 09:57

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

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

Saludos!

lissette22 · #8 (**permalink**) 23/02/2011, 10:32

Gracias, si he visto los ejemplos pero no consigo solucionar lo que me pasa... seguré indagando, gracias por la ayuda

kseso? · #9 (**permalink**) 23/02/2011, 11:19

¿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.

lissette22 · #10 (**permalink**) 23/02/2011, 16:30

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

omarMusic · #11 (**permalink**) 23/02/2011, 16:46

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!

ArturoGallegos · #12 (**permalink**) 23/02/2011, 17:32

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 originaldiv#menu {
left:205px;
position:relative;
top:-32px;
}

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 originaldiv#menu li.nivel1 {
margin-right:4px;
font-weight:bold;
position:relative;
}

lissette22 · #13 (**permalink**) 24/02/2011, 01:51

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

ArturoGallegos · #14 (**permalink**) 24/02/2011, 02:37

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;
}

lissette22 · #15 (**permalink**) 24/02/2011, 03:04

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