Re: [Ovillo] menú de listas anidadas en horizontal

2007-10-16 Por tema Javier Prieto 
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 
>>> 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;
>>> }
>>>
>>>
>

Re: [Ovillo] menú de listas anidadas en horizontal

2007-10-16 Por tema jaume op 
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.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 
> 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

[Ovillo] menú de listas anidadas en horizontal

2007-10-16 Por tema hugo sierra 

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