[Ovillo] menú de listas anidadas en horizontal
Hola a todos:
Estoy haciendo un menú vertical con 2 niveles. Por lo tanto estoy usando listas
anidadas.
Pero no consigo controlar la posición de la lista-hija. La posición es
absoluta y en cuanto falta o se añade algún elemento en algún componente
anterior, se descoloca.
Yo lo que quiero es que siempre esté ahí.
Si no le pongo position:absolute; más o menos se queda bien pero el li padre
se hace tan grande como la ul que anida.
Bueno este es el CSS para ver si me podeis echar una mano:
#pestanias {
background-image: url(fondos/pestanias.gif);
background-repeat: repeat-x;
background-position: left top;
height: 58px;
width: auto;
}
#pestanias ul{
margin:0;
list-style:none;
padding: 8px 10px 0px 10px;
}
#pestanias ul li{
display:inline;
float: left;
margin: 0;
}
#pestanias ul li a{
font-weight: bold;
color: #3F3E41;
font-size: 0.9em;
background-color: #E0DFDF;
background-image: url(fondos/bot_menu.gif);
background-repeat: repeat-x;
background-position: left top;
display: block;
padding: 5px 7px;
border-top: 1px solid #696969;
border-right:1px solid #696969;
border-left: 1px solid #696969;
}
#pestanias ul li a:hover{
background-image: url(fondos/bot_menu_sobre.gif);
background-repeat: repeat-x;
background-position: left top;
}
#pestanias ul li ul{
background:none;
list-style:none;
margin-top:0px;
position: absolute;
left: 3px;
top:172px!important;
top:180px;
width: auto;
padding-top:15px;
}
#pestanias ul li ul li{
padding: 0px 2px;
}
#pestanias ul li ul li a.activo{
border:none;
float: left;
display: inline;
background-color:transparent;
background-image: url(fondos/bullet_submenu.gif);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 11px;
}
#pestanias ul li ul li a:hover{
color: #A4020B;
background-image: url(fondos/bullet_submenu2.gif);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 11px;
}
#pestanias ul li a.activo {
background-image: url(fondos/bot_menu_sobre.gif);
background-repeat: repeat-x;
background-position: left top;
}
Muchísimas gracias de antemano.
_
Express yourself instantly with MSN Messenger! Download today it's FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] menú de listas anidadas en horizontal
Hola hugo, no se si entiendo todo bien, quieres un menu se desplieble solo
con css jodidillo pero mira a ver estos links que tenia a mano
://www.htmldog.com/articles/suckerfish/example/http://www.htmldog.com/articles/suckerfish/example/
http://www.htmldog.com/articles/suckerfish/example/http://www.htmldog.com/articles/suckerfish/example/
http://www.cssplay.co.uk/menus/flyout5.html
solo has de estudiar un poco el codigo y asentarlo a tu gusto.
Jaume
2007/10/16, hugo sierra [EMAIL PROTECTED]:
Hola a todos:
Estoy haciendo un menú vertical con 2 niveles. Por lo tanto estoy usando
listas anidadas.
Pero no consigo controlar la posición de la lista-hija. La posición es
absoluta y en cuanto falta o se añade algún elemento en algún componente
anterior, se descoloca.
Yo lo que quiero es que siempre esté ahí.
Si no le pongo position:absolute; más o menos se queda bien pero el li
padre se hace tan grande como la ul que anida.
Bueno este es el CSS para ver si me podeis echar una mano:
#pestanias {
background-image: url(fondos/pestanias.gif);
background-repeat: repeat-x;
background-position: left top;
height: 58px;
width: auto;
}
#pestanias ul{
margin:0;
list-style:none;
padding: 8px 10px 0px 10px;
}
#pestanias ul li{
display:inline;
float: left;
margin: 0;
}
#pestanias ul li a{
font-weight: bold;
color: #3F3E41;
font-size: 0.9em;
background-color: #E0DFDF;
background-image: url(fondos/bot_menu.gif);
background-repeat: repeat-x;
background-position: left top;
display: block;
padding: 5px 7px;
border-top: 1px solid #696969;
border-right:1px solid #696969;
border-left: 1px solid #696969;
}
#pestanias ul li a:hover{
background-image: url(fondos/bot_menu_sobre.gif);
background-repeat: repeat-x;
background-position: left top;
}
#pestanias ul li ul{
background:none;
list-style:none;
margin-top:0px;
position: absolute;
left: 3px;
top:172px!important;
top:180px;
width: auto;
padding-top:15px;
}
#pestanias ul li ul li{
padding: 0px 2px;
}
#pestanias ul li ul li a.activo{
border:none;
float: left;
display: inline;
background-color:transparent;
background-image: url(fondos/bullet_submenu.gif);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 11px;
}
#pestanias ul li ul li a:hover{
color: #A4020B;
background-image: url(fondos/bullet_submenu2.gif);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 11px;
}
#pestanias ul li a.activo {
background-image: url(fondos/bot_menu_sobre.gif);
background-repeat: repeat-x;
background-position: left top;
}
Muchísimas gracias de antemano.
_
Express yourself instantly with MSN Messenger! Download today it's FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] menú de listas anidadas en horizontal
Hugo:
No lo he visto en detalle pero siempre que al padre le pongas
position:relative... a los hijos les puedes poner position:absolute, y
las coordenadas que le des lo colocarán siempre con respecto al padre.
Resumiendo:
Padre: position: relative;
Hijo: position:absolute;
Si el hijo lleva top: 0px; left:0px; Se colocará en las coordenadas 0,0
con respecto al padre, esté donde esté en la página
hugo sierra escribió:
Gracias Jaume, ya me conocía estos sitios. Pero muchas gracias.
A ver, otra cosa. El menú es horizontal, que en el cuerpo del mensaje decía
lo contrario, jeje.
Y bueno, llevará javascript. Pero me preocupa que con la posición absoluta
dependo del contenido anterior. Yo lo que quiero es que la lista anidada
siempre se coloque debajo de la padre, independientemente de lo que haya
antes.
Date: Tue, 16 Oct 2007 16:16:59 +0200
From: [EMAIL PROTECTED]
To: ovillo@lists.ovillo.org
Subject: Re: [Ovillo]menú de listas anidadas en horizontal
Hola hugo, no se si entiendo todo bien, quieres un menu se desplieble solo
con css jodidillo pero mira a ver estos links que tenia a mano
://www.htmldog.com/articles/suckerfish/example/http://www.htmldog.com/articles/suckerfish/example/
http://www.htmldog.com/articles/suckerfish/example/http://www.htmldog.com/articles/suckerfish/example/
http://www.cssplay.co.uk/menus/flyout5.html
solo has de estudiar un poco el codigo y asentarlo a tu gusto.
Jaume
2007/10/16, hugo sierra [EMAIL PROTECTED]:
Hola a todos:
Estoy haciendo un menú vertical con 2 niveles. Por lo tanto estoy usando
listas anidadas.
Pero no consigo controlar la posición de la lista-hija. La posición es
absoluta y en cuanto falta o se añade algún elemento en algún componente
anterior, se descoloca.
Yo lo que quiero es que siempre esté ahí.
Si no le pongo position:absolute; más o menos se queda bien pero el li
padre se hace tan grande como la ul que anida.
Bueno este es el CSS para ver si me podeis echar una mano:
#pestanias {
background-image: url(fondos/pestanias.gif);
background-repeat: repeat-x;
background-position: left top;
height: 58px;
width: auto;
}
#pestanias ul{
margin:0;
list-style:none;
padding: 8px 10px 0px 10px;
}
#pestanias ul li{
display:inline;
float: left;
margin: 0;
}
#pestanias ul li a{
font-weight: bold;
color: #3F3E41;
font-size: 0.9em;
background-color: #E0DFDF;
background-image: url(fondos/bot_menu.gif);
background-repeat: repeat-x;
background-position: left top;
display: block;
padding: 5px 7px;
border-top: 1px solid #696969;
border-right:1px solid #696969;
border-left: 1px solid #696969;
}
#pestanias ul li a:hover{
background-image: url(fondos/bot_menu_sobre.gif);
background-repeat: repeat-x;
background-position: left top;
}
#pestanias ul li ul{
background:none;
list-style:none;
margin-top:0px;
position: absolute;
left: 3px;
top:172px!important;
top:180px;
width: auto;
padding-top:15px;
}
#pestanias ul li ul li{
padding: 0px 2px;
}
#pestanias ul li ul li a.activo{
border:none;
float: left;
display: inline;
background-color:transparent;
background-image: url(fondos/bullet_submenu.gif);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 11px;
}
#pestanias ul li ul li a:hover{
color: #A4020B;
background-image: url(fondos/bullet_submenu2.gif);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 11px;
}
#pestanias ul li a.activo {
background-image: url(fondos/bot_menu_sobre.gif);
background-repeat: repeat-x;
background-position: left top;
}
Muchísimas gracias de antemano.
_
Express yourself instantly with MSN Messenger! Download today it's FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_
Express yourself instantly with MSN Messenger! Download today it's FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes
