Re: [Ovillo] Navegación con pestañas verticales
Hola Reynier, Te mando una dirección en la que encontrarás lo que necesitas usando unicamente css, espero que te sirva. http://www.cssplay.co.uk/menu/index.html Saludos -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Reynier Perez Mira Enviado el: lunes, 04 de septiembre de 2006 16:59 Para: Ovillo, la lista de CSS en castellano Asunto: [Ovillo] Navegación con pestañas verticales Hola lista: Ante todo buenas a algunos que hacía algún tiempo no me veían por aquí y a otros que si nunca me habían visto. Estaba algo perdido porque anduve dos meses de vacaciones y recién he vuelto a la Universidad a cursar mi 5to año y a preparar mi trabajo de graduación. Bueno el caso es que tengo que hacer algo como un menú de navegación vertical. Me explico con un sencillo gráfico: |--|-| | | | | Img1 | | | | | |--| | | | | | Img2 |Area para mostrar| | | | |--| | | | | | Img3 | | | | | |--|-|-- Bien todo hasta ahí? Ahora cuando pase el mouse por encima de Img1, que es una imagen, se debe mostrar en el area de muestra el contenido correspondiente al item Img1. No se si me entienden bien. El hecho es que no tengo ni idea de cómo hacerlo. Alguna ayuda ? Salu2 ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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 ___ 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] Navegación con pestañas verticales
From: Reynier Perez Mira
[EMAIL PROTECTED]
Subject: [Ovillo] Navegación con pestañas verticales
Bueno el caso es que tengo que hacer algo como un
menú de navegación vertical.
El ejemplo que mandaba Gonzalo Alonso es muy ingenioso
y básicamente se puede resumir en lo siguiente:
La estructura es un div invisible dentro de un li. Hay
que crear una regla que haga visible el div y que sea
aplicable a un div que esté dentro de un li:hover.
Mando un ejemplo parecido:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0
Transitional//EN
html
head
titleMouseOver con CSS/title
style
img {
display: none;
position: absolute;
top: 70px;
left: 200px;
width: 300px;
}
div:hover img {
display: inline;
}
div:hover {
background-color: yellow;
}
/style
/head
body
h1MouseOver con CSS/h1
table
trtddiv class=tituloPaul Newmanimg
src=http://i.imdb.com/Photos/Mptv/1396/0070_2352.jpg;/div/td/tr
trtddiv class=tituloMarylin Monroeimg
src=http://i.imdb.com/Photos/Mptv/1385/0758_0995.jpg;/div/td/tr
trtddiv class=tituloClark Gable img
src=http://i.imdb.com/Photos/Mptv/1396/0025_2348.jpg;/div/td/tr
/table
/body
/html
Sólo lo he hecho funcionar en Firefox 2 y en Opera 8.
Para IE supongo que bastará con cambiar los div por
a.
¡Buen trabajo de grado!
Santiago.
__
LLama Gratis a cualquier PC del Mundo.
Llamadas a fijos y móviles desde 1 céntimo por minuto.
http://es.voice.yahoo.com
___
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] Navegación con pestañas verticales
Muchas gracias a todos. Exactamente era lo que buscaba. Ahora estoy leyendo el código a ver si lo comprendo y dentro de unas horas quizás publique una solución a ver si la prueban en IE pues me preocupa este más que Firefox. Salu2 -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. -Mensaje original- De: [EMAIL PROTECTED] [mailto:ovillo- [EMAIL PROTECTED] En nombre de Maite Capalleja Enviado el: 05 September, 2006 2:03 AM Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Navegación con pestañas verticales Hola Reynier, Te mando una dirección en la que encontrarás lo que necesitas usando unicamente css, espero que te sirva. http://www.cssplay.co.uk/menu/index.html Saludos -Mensaje original- De: [EMAIL PROTECTED] [mailto:ovillo- [EMAIL PROTECTED] En nombre de Reynier Perez Mira Enviado el: lunes, 04 de septiembre de 2006 16:59 Para: Ovillo, la lista de CSS en castellano Asunto: [Ovillo] Navegación con pestañas verticales Hola lista: Ante todo buenas a algunos que hacía algún tiempo no me veían por aquí y a otros que si nunca me habían visto. Estaba algo perdido porque anduve dos meses de vacaciones y recién he vuelto a la Universidad a cursar mi 5to año y a preparar mi trabajo de graduación. Bueno el caso es que tengo que hacer algo como un menú de navegación vertical. Me explico con un sencillo gráfico: |--|-| | | | | Img1 | | | | | |--| | | | | | Img2 |Area para mostrar| | | | |--| | | | | | Img3 | | | | | |--|-|-- Bien todo hasta ahí? Ahora cuando pase el mouse por encima de Img1, que es una imagen, se debe mostrar en el area de muestra el contenido correspondiente al item Img1. No se si me entienden bien. El hecho es que no tengo ni idea de cómo hacerlo. Alguna ayuda ? Salu2 ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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 ___ 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 ___ 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] Navegación con pestañas verticales
Yo esto lo suelo hacer con el dreamweaver, te explico: 1º - Te creas 3 div donde quieras mostrar la información, ocultos los 3. 2º - Pinchas sobre una imagen (ponlas nombres para que te aclares) y despues tienes en el dreamweaver en la pestaña de ventana-Comportamientos una pestañita de +, bien pues ahi tienes una opcion de mostrar-ocultar capas, es muy sencillo solo le tienes que decir que capa quieres mostrar (ponlas nombres tambien) y que capa ocultar, eso lo tienes que hacer con las 3 imagenes. Despues ya eres tu mismo si quieres mostrarla cuando hagan click o cuando pasen por encima de la imagen. Espero haberme explicado porque es muy sencillo de hacer. Un saludo Edu - Original Message - From: Reynier Perez Mira [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Monday, September 04, 2006 4:59 PM Subject: [Ovillo] Navegación con pestañas verticales Hola lista: Ante todo buenas a algunos que hacía algún tiempo no me veían por aquí y a otros que si nunca me habían visto. Estaba algo perdido porque anduve dos meses de vacaciones y recién he vuelto a la Universidad a cursar mi 5to año y a preparar mi trabajo de graduación. Bueno el caso es que tengo que hacer algo como un menú de navegación vertical. Me explico con un sencillo gráfico: |--|-| | | | | Img1 | | | | | |--| | | | | | Img2 |Area para mostrar| | | | |--| | | | | | Img3 | | | | | |--|-|-- Bien todo hasta ahí? Ahora cuando pase el mouse por encima de Img1, que es una imagen, se debe mostrar en el area de muestra el contenido correspondiente al item Img1. No se si me entienden bien. El hecho es que no tengo ni idea de cómo hacerlo. Alguna ayuda ? Salu2 ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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 __ NOD32 1.1738 (20060904) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com ___ 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] Navegación con pestañas verticales
Gracias Edu, esa opción la conocía pero eso requiere Javascript, creo sino me equivoco, que es lo que no quiero usar porque entonces que pasa si el usuario tiene desactivado el uso de JS? Quiero hacerlo con CSS puro si es que se puede Salu2 -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. -Mensaje original- De: [EMAIL PROTECTED] [mailto:ovillo- [EMAIL PROTECTED] En nombre de Eduardo Ayllón Enviado el: 04 September, 2006 10:16 AM Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Navegación con pestañas verticales Yo esto lo suelo hacer con el dreamweaver, te explico: 1º - Te creas 3 div donde quieras mostrar la información, ocultos los 3. 2º - Pinchas sobre una imagen (ponlas nombres para que te aclares) y despues tienes en el dreamweaver en la pestaña de ventana-Comportamientos una pestañita de +, bien pues ahi tienes una opcion de mostrar-ocultar capas, es muy sencillo solo le tienes que decir que capa quieres mostrar (ponlas nombres tambien) y que capa ocultar, eso lo tienes que hacer con las 3 imagenes. Despues ya eres tu mismo si quieres mostrarla cuando hagan click o cuando pasen por encima de la imagen. Espero haberme explicado porque es muy sencillo de hacer. Un saludo Edu - Original Message - From: Reynier Perez Mira [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Monday, September 04, 2006 4:59 PM Subject: [Ovillo] Navegación con pestañas verticales Hola lista: Ante todo buenas a algunos que hacía algún tiempo no me veían por aquí y a otros que si nunca me habían visto. Estaba algo perdido porque anduve dos meses de vacaciones y recién he vuelto a la Universidad a cursar mi 5to año y a preparar mi trabajo de graduación. Bueno el caso es que tengo que hacer algo como un menú de navegación vertical. Me explico con un sencillo gráfico: |--|-| | | | | Img1 | | | | | |--| | | | | | Img2 |Area para mostrar| | | | |--| | | | | | Img3 | | | | | |--|-|-- Bien todo hasta ahí? Ahora cuando pase el mouse por encima de Img1, que es una imagen, se debe mostrar en el area de muestra el contenido correspondiente al item Img1. No se si me entienden bien. El hecho es que no tengo ni idea de cómo hacerlo. Alguna ayuda ? Salu2 ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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 __ NOD32 1.1738 (20060904) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com ___ 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 ___ 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] Navegación con pestañas verticales
Reynier, te aconsejo que mires por aquí. Los ejemplos son de texto, pero los puedes adaptar a tus propósitos, creo: http://www.positioniseverything.net/css-flyout.html http://www.seoconsultants.com/css/menus/vertical/ Un saludo, Gonzalo - Original Message - From: Reynier Perez Mira [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Monday, September 04, 2006 5:20 PM Subject: Re: [Ovillo] Navegación con pestañas verticales Gracias Edu, esa opción la conocía pero eso requiere Javascript, creo sino me equivoco, que es lo que no quiero usar porque entonces que pasa si el usuario tiene desactivado el uso de JS? Quiero hacerlo con CSS puro si es que se puede Salu2 -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. -Mensaje original- De: [EMAIL PROTECTED] [mailto:ovillo- [EMAIL PROTECTED] En nombre de Eduardo Ayllón Enviado el: 04 September, 2006 10:16 AM Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Navegación con pestañas verticales Yo esto lo suelo hacer con el dreamweaver, te explico: 1º - Te creas 3 div donde quieras mostrar la información, ocultos los 3. 2º - Pinchas sobre una imagen (ponlas nombres para que te aclares) y despues tienes en el dreamweaver en la pestaña de ventana-Comportamientos una pestañita de +, bien pues ahi tienes una opcion de mostrar-ocultar capas, es muy sencillo solo le tienes que decir que capa quieres mostrar (ponlas nombres tambien) y que capa ocultar, eso lo tienes que hacer con las 3 imagenes. Despues ya eres tu mismo si quieres mostrarla cuando hagan click o cuando pasen por encima de la imagen. Espero haberme explicado porque es muy sencillo de hacer. Un saludo Edu - Original Message - From: Reynier Perez Mira [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Monday, September 04, 2006 4:59 PM Subject: [Ovillo] Navegación con pestañas verticales Hola lista: Ante todo buenas a algunos que hacía algún tiempo no me veían por aquí y a otros que si nunca me habían visto. Estaba algo perdido porque anduve dos meses de vacaciones y recién he vuelto a la Universidad a cursar mi 5to año y a preparar mi trabajo de graduación. Bueno el caso es que tengo que hacer algo como un menú de navegación vertical. Me explico con un sencillo gráfico: |--|-| | | | | Img1 | | | | | |--| | | | | | Img2 |Area para mostrar| | | | |--| | | | | | Img3 | | | | | |--|-|-- Bien todo hasta ahí? Ahora cuando pase el mouse por encima de Img1, que es una imagen, se debe mostrar en el area de muestra el contenido correspondiente al item Img1. No se si me entienden bien. El hecho es que no tengo ni idea de cómo hacerlo. Alguna ayuda ? Salu2 ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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 __ NOD32 1.1738 (20060904) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com ___ 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 ___ 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 ___ 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] Navegación con pestañas verticales
On 9/4/06, Reynier Perez Mira [EMAIL PROTECTED] wrote:
Gracias Edu, esa opción la conocía pero eso requiere Javascript, creo sino
me equivoco, que es lo que no quiero usar porque entonces que pasa si el
usuario tiene desactivado el uso de JS? Quiero hacerlo con CSS puro si es
que se puede
no lo sé, pero sospecho que con css puro no se va a poder ver en IE.
lo que puedes hacer es mostrar toda la información directamente:
img 1
divtexto de img 1/div
img 2
div texto de img 2/div
img 3
divtexto de img 3/div
en css, pones algo así:
div.muestra {
position: absolute;
top: x;
left: y;
}
div.hide {
display: none;
}
y luego, le pones el javascript:
window.onload = function() {
coge_los_divs_y_aplicales_esta_clase(hide);
coge_las_imagenes_y_en_el_mouse_over_haz_que_apliquen_esta_clase_al_div_asociado(muestra);
}
espero q te hagas una idea de lo que quiero decir ;-)
--
Si no puedes deslumbrar con tu inteligencia,
desconcierta con tus gilipolleces
___
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] Navegación con pestañas verticales
En Yahoo tambien lo hacen con Javascript En/na Reynier Perez Mira ha escrit: Eso sería casi lo mismo que me propone Edu, solo que el lo hace hacienda uso de DW para facilitarse el trabajo con Javascript, imagino yo. Ahora tienes algún ejemplo funcional del Javascript que me propones? Nota: Si se fijan en el nuevo Portal de Yahoo ellos lo usan en la zona donde dice: Correo, Messenger, Tiempo pero estuve chequeando su página y no logro encontrar como lo hacen Salu2 -- :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: Marta Martínez Ribas :: coordinació de projectes :: [EMAIL PROTECTED] argus.net TECNOLOGIA CREATIVA creant en la web des de 1995 www.argus.net | tel: 932 92 41 00 | fax: 932 92 42 25 | [EMAIL PROTECTED] Avgda. Marquès de Comillas, 13 (Poble Espanyol) | 08038 | Barcelona ___ 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] Navegación con pestañas verticales
LO imagine pero el problema es que no encuentro por ningún lado, lo viste tú ... -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. -Mensaje original- De: [EMAIL PROTECTED] [mailto:ovillo- [EMAIL PROTECTED] En nombre de Marta Martínez | ARGUS.net Enviado el: 04 September, 2006 11:42 AM Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Navegación con pestañas verticales En Yahoo tambien lo hacen con Javascript En/na Reynier Perez Mira ha escrit: Eso sería casi lo mismo que me propone Edu, solo que el lo hace hacienda uso de DW para facilitarse el trabajo con Javascript, imagino yo. Ahora tienes algún ejemplo funcional del Javascript que me propones? Nota: Si se fijan en el nuevo Portal de Yahoo ellos lo usan en la zona donde dice: Correo, Messenger, Tiempo pero estuve chequeando su página y no logro encontrar como lo hacen Salu2 -- :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: Marta Martínez Ribas :: coordinació de projectes :: [EMAIL PROTECTED] argus.net TECNOLOGIA CREATIVA creant en la web des de 1995 www.argus.net | tel: 932 92 41 00 | fax: 932 92 42 25 | [EMAIL PROTECTED] Avgda. Marquès de Comillas, 13 (Poble Espanyol) | 08038 | Barcelona ___ 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 ___ 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] Navegación con pestañas verticales
On 9/4/06, Reynier Perez Mira [EMAIL PROTECTED] wrote: Eso sería casi lo mismo que me propone Edu, solo que el lo hace hacienda uso de DW para facilitarse el trabajo con Javascript, imagino yo. Ahora tienes algún ejemplo funcional del Javascript que me propones? el ejemplo que te he hecho es totalmente funcional y funciona, solo hace falta programar ese par de funciones js. Con solo css o solo javascript, se ve todo el contenido, por lo tanto es accesible. y con css y js, se ve el efecto que andabas buscando. -- Si no puedes deslumbrar con tu inteligencia, desconcierta con tus gilipolleces ___ 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] Navegación con pestañas verticales
Hola Carlos: Se que el código es funcional pero que no tengo idea de cómo programarlo, lo que busco son algunos Tips que me ayuden porque comprendi el algoritmo que me planteas pero no se como programarlo -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. -Mensaje original- De: [EMAIL PROTECTED] [mailto:ovillo- [EMAIL PROTECTED] En nombre de carlos campderrós Enviado el: 04 September, 2006 11:54 AM Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Navegación con pestañas verticales On 9/4/06, Reynier Perez Mira [EMAIL PROTECTED] wrote: Eso sería casi lo mismo que me propone Edu, solo que el lo hace hacienda uso de DW para facilitarse el trabajo con Javascript, imagino yo. Ahora tienes algún ejemplo funcional del Javascript que me propones? el ejemplo que te he hecho es totalmente funcional y funciona, solo hace falta programar ese par de funciones js. Con solo css o solo javascript, se ve todo el contenido, por lo tanto es accesible. y con css y js, se ve el efecto que andabas buscando. -- Si no puedes deslumbrar con tu inteligencia, desconcierta con tus gilipolleces ___ 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 ___ 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
