Re: [Ovillo] Re: Menu css
On 3/17/06, Federico MP [EMAIL PROTECTED] wrote:
De http://www.estandaresweb.es/pruebas/menu.html
li ul { display: none; width: 80px; }
li:hover ul, li.over ul { display: inline; }
Si UL va a ser inline, el width está de más. ;)
Estube mirando y pensando lo que comentas ...
Segun el codigo inicial:
ul { list-style: none; margin:0; padding:0; width:300px;}
ul li { display: inline; }
li ul { display: none; }
a { text-decoration: none; color: blue; }
li:hover ul, li.over ul { display: inline; }
Fijate que la primera linea dice que todos los ul tienen un ancho de
300px, y además digo que los li tiene un comportamiento inline (linea 2)
¿Porque ese codigo hace que el explorer salte la linea y coloque la segundo
lista de elementos debajo?
A mi entender, porque tenemos una lista dentro de la otra, ambas con un
width de 300px, pero los 300px de la segunda lista no caben dentro de la
primera, de ahi que el Explorer haga el salto.
Visto esto inconscientemente hice el siguiente codigo:
ul { list-style: none; margin:0; padding:0; width:300px;}
ul li { display: inline; }
li ul { display: none; width: 80px; }
a { text-decoration: none; color: blue; }
li:hover ul, li.over ul { display: inline; }
Como se puede ver, reduzco el ancho de la segunda lista, y ahora si cabe
todo dentro de los 300 px. Es decir, estoy redefiniendo el width de la
primera linea. Y asi finalmente se visualiza bien en I.Explorer.
Pero no queda ahi, si eliminamos los width y dejamos que sean auto, todo
funciona tambien correctamente, quedandonos el siguiente codigo:
ul { list-style: none; margin:0; padding:0; }
ul li { display: inline; }
li ul { display: none; }
a { text-decoration: none; color: blue; }
li:hover ul, li.over ul { display: inline; }
Se puede ver todo mas claro en:
http://www.estandaresweb.es/pruebas/menu.html
Saludos !
--
Federico MP
http://511.dabomb.com.ar
___
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://ovillo.org/mailman/listinfo/ovillo
--
David Castelló
www.estandaresweb.es
___
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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
Hola Federico !
Gracias por tus sugerencias.
Yo queria que todo fuese horizontal. El I.Explorer lo sacaba debajo porque
no le di suficiente width al ul interior, de ahí que saltara la linea.
Simplemente añadiendo al codigo CSS un width al la linea li ul es
suficiente. Y quedaría así:
ul { list-style: none; margin:0; padding:0; width:300px;}
ul li { display: inline; }
li ul { display: none; width: 80px; }
a { text-decoration: none; color: blue; }
li:hover ul, li.over ul { display: inline; }
La solucion está en: http://www.estandaresweb.es/pruebas/menu.html
Tengo intencion de hacer una breve explicación de los pasos para llegar
hasta ahí.
Saludos!
On 3/16/06, Federico MP [EMAIL PROTECTED] wrote:
David: En la página de la explicación [1] decis:
(...) en el Explorer el submenu se despliega horizontalmente, pero _debajo
del padre y no al lado_.
Si no me equivoco, lo correcto _es que aparezca al lado_.
Fijate tu código:
ul id=nav /* Block por defecto */
li /* Inline por ul li {display: inline;} */
a href=#Opciones/a /* Inline por defecto */
ul /* Inline por li:hover ul {display: inline} */
li /* Inline por ul li {display: inline;} */
a href=uno/a /* Inline por defecto */
Son todos inline. Se supone que aparezcan en la misma linea. La única
razón
por la que en Opera e IE el enlace tres aparece debajo es porque se
acaba
el espacio horizontal (#nav tiene un ancho de 160px)
Si querés que #nav ul aparezca debajo cambialo a li:hover ul {display:
block
[1] http://www.estandaresweb.es/pruebas/menu.html
--
Federico MP
http://511.dabomb.com.ar
___
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://ovillo.org/mailman/listinfo/ovillo
--
David Castelló
www.estandaresweb.es
___
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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
De http://www.estandaresweb.es/pruebas/menu.html
li ul { display: none; width: 80px; }
li:hover ul, li.over ul { display: inline; }
Si UL va a ser inline, el width está de más. ;)
--
Federico MP
http://511.dabomb.com.ar
___
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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
En el caso de UL sin id #nav, los LI se hacen visibles por el li:hover. IE sólo implemento :hover para los enlaces. On 3/16/06, David Castelló [EMAIL PROTECTED] wrote: He conseguido que funcione en firefox la idea que tenia en mente, pero en I.E. falla ... Podeis ver un ejemplo en: http://www.estandaresweb.es/pruebas/menu.html Al pasar por encima de un link del menu principal (hover), me muestra el submenu a la derecha y en horizontal, y desaparece el submenu cuando salgo de la zona. Pero en I.E. no lo hace bien. ¿Podeis dar alguna idea? -- Federico MP http://511.dabomb.com.ar ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
Gracias por la respuesta Federico !! Ya esta solucionado, y esta explicado en el ejemplo: http://www.estandaresweb.es/pruebas/menu.html Saludos ! On 3/16/06, Federico MP [EMAIL PROTECTED] wrote: En el caso de UL sin id #nav, los LI se hacen visibles por el li:hover. IE sólo implemento :hover para los enlaces. On 3/16/06, David Castelló [EMAIL PROTECTED] wrote: He conseguido que funcione en firefox la idea que tenia en mente, pero en I.E. falla ... Podeis ver un ejemplo en: http://www.estandaresweb.es/pruebas/menu.html Al pasar por encima de un link del menu principal (hover), me muestra el submenu a la derecha y en horizontal, y desaparece el submenu cuando salgo de la zona. Pero en I.E. no lo hace bien. ¿Podeis dar alguna idea? -- Federico MP http://511.dabomb.com.ar ___ 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://ovillo.org/mailman/listinfo/ovillo -- David Castelló www.estandaresweb.es ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
El soporte que da IE a las seudos clase de vinculo tipo :hover es realmente bajo. Y como bien dice federico solo funciona 100% en enlaces. Puedes buscar otras alternativas, como crear los nodos hijos y luego elimianrlos. O con el uso de display: block, y display:none con ello pones y quitas. Ciao Federico MP escribió: En el caso de UL sin id #nav, los LI se hacen visibles por el li:hover. IE sólo implemento :hover para los enlaces. On 3/16/06, David Castelló [EMAIL PROTECTED] wrote: He conseguido que funcione en firefox la idea que tenia en mente, pero en I.E. falla ... Podeis ver un ejemplo en: http://www.estandaresweb.es/pruebas/menu.html Al pasar por encima de un link del menu principal (hover), me muestra el submenu a la derecha y en horizontal, y desaparece el submenu cuando salgo de la zona. Pero en I.E. no lo hace bien. ¿Podeis dar alguna idea? -- Federico MP http://511.dabomb.com.ar ___ 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://ovillo.org/mailman/listinfo/ovillo -- Saludos: Quasi ;) www.aurea.es ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
Hola ! La solucion fue crear una funcion javascript, que añade una clase over al hacer onmouseover, y deja vacia la clase al hacer onmouseout. La idea esta sacada de: http://www.alistapart.com/articles/horizdropdowns/ Y la implementacion definitiva con su codigo, por si os sirve: http://www.estandaresweb.es/pruebas/menu.html Ahora se produce un ligero parpadeo en I.E., cuando se hace onmouseover, que no se como solucionar. Saludos ! On 3/16/06, Quasi [EMAIL PROTECTED] wrote: El soporte que da IE a las seudos clase de vinculo tipo :hover es realmente bajo. Y como bien dice federico solo funciona 100% en enlaces. Puedes buscar otras alternativas, como crear los nodos hijos y luego elimianrlos. O con el uso de display: block, y display:none con ello pones y quitas. Ciao Federico MP escribió: En el caso de UL sin id #nav, los LI se hacen visibles por el li:hover. IE sólo implemento :hover para los enlaces. On 3/16/06, David Castelló [EMAIL PROTECTED] wrote: He conseguido que funcione en firefox la idea que tenia en mente, pero en I.E. falla ... Podeis ver un ejemplo en: http://www.estandaresweb.es/pruebas/menu.html Al pasar por encima de un link del menu principal (hover), me muestra el submenu a la derecha y en horizontal, y desaparece el submenu cuando salgo de la zona. Pero en I.E. no lo hace bien. ¿Podeis dar alguna idea? -- Federico MP http://511.dabomb.com.ar ___ 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://ovillo.org/mailman/listinfo/ovillo -- Saludos: Quasi ;) www.aurea.es ___ 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://ovillo.org/mailman/listinfo/ovillo -- David Castelló www.estandaresweb.es ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Re: Menu css
David: En la página de la explicación [1] decis:
(...) en el Explorer el submenu se despliega horizontalmente, pero _debajo
del padre y no al lado_.
Si no me equivoco, lo correcto _es que aparezca al lado_.
Fijate tu código:
ul id=nav /* Block por defecto */
li /* Inline por ul li {display: inline;} */
a href=#Opciones/a /* Inline por defecto */
ul /* Inline por li:hover ul {display: inline} */
li /* Inline por ul li {display: inline;} */
a href=uno/a /* Inline por defecto */
Son todos inline. Se supone que aparezcan en la misma linea. La única razón
por la que en Opera e IE el enlace tres aparece debajo es porque se acaba
el espacio horizontal (#nav tiene un ancho de 160px)
Si querés que #nav ul aparezca debajo cambialo a li:hover ul {display:
block
[1] http://www.estandaresweb.es/pruebas/menu.html
--
Federico MP
http://511.dabomb.com.ar
___
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://ovillo.org/mailman/listinfo/ovillo
