Foros del Web » Creando para Internet » CSS »

Ayuda con Menu hecho en CSS

Estas en el tema de Ayuda con Menu hecho en CSS en el foro de CSS en Foros del Web. Buenas tardes amigos desarrolladores: Estoy desarrollando una pagina web en la cual quiero implementar un tipo de menu que he visto en flash lo implemente ...
  #1 (permalink)  
Antiguo 10/06/2009, 17:45
 
Fecha de Ingreso: septiembre-2004
Mensajes: 9
Antigüedad: 13 años, 2 meses
Puntos: 0
Ayuda con Menu hecho en CSS

Buenas tardes amigos desarrolladores:

Estoy desarrollando una pagina web en la cual quiero implementar un tipo de menu que he visto en flash lo implemente con JavaScript & CSS, carga mucho mas rapido y es más facil de manipular pero estoy parado con un detalle que al igual y dicen es muy tonto pero no encuentro resolverlo. Quiero que cada elemento del menu tenga una viñeta y esta cambie con el evento hover
Lei algo en la web acerca de la propiedad list-style-image pero no consigo implementarlo ojala alguien pueda ayudarme anexo mi hoja de estilo para el menu y el menu pueden verlo en www .alzocalo .com aparecen los enlaces los efectos que quiero menos las viñetas saludos y ojala alguien pueda asesorarme o señalar mi error. GRACIAS DE ANTEMANO


HOJA DE ESTILO:
__________________________________________

/*Menu del portal*/
#menu
{
list-style-image:url(../imagenes/jpg/flecha.jpg);
margin:0;
padding:0;
top:30px;
}
#menu li a
{
/*Establecemos la decoracion*/
text-decoration:none;
/*cambiamos la viñeta por la adecuada para el evento*/
list-style-image:url(../imagenes/jpg/flecha.jpg);
/*Establecemos la tipografia a usar*/
font-family:Arial, Helvetica, sans-serif;
/*y el tamaño de la fuente*/
font-size:11px;
/*Establecemos el color*/
color:#000000;
}
#menu li a:hover
{
/*Establecemos el color*/
color:#FFFFFF;
/*Establecemos la decoracion*/
text-decoration:underline;
/*cambiamos la viñeta por la adecuada para el evento*/
list-style-image:url(../imagenes/png/vineta_on.png);
/*y el tamaño de la fuente*/
font-size:12px;
}

-------------------------------------------------------------------
MENU EN DOCUMENTO HTML:
__________________________________________

<div style="position:relative; width:1045; height:125px; top:45px; background-color:#ff9a2d;">
<img style="left:0px; top:20px; position:relative;" src="imagenes/png/logo.png">
<img style="left:390px; top:-50px; position:absolute;" name="icono1" src="imagenes/png/libro-gris.png">
<img style="left:360px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:555px; top:-50px; position:absolute;" name="icono2" src="imagenes/png/monos-gris.png">
<img style="left:530px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:745px; top:-50px; position:absolute;" name="icono3" src="imagenes/png/dados-gris.png">
<img style="left:700px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:905px; top:-50px; position:absolute;" name="icono4" src="imagenes/png/cara-gris.png">
<img style="left:870px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<ul style="position:absolute; left:390px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:560px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:730px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:900px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba5</a></li>
</ul>
</div>
  #2 (permalink)  
Antiguo 10/06/2009, 18:05
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Ayuda con Menu hecho en CSS

list-style-image, como su nombre lo dice, es una propiedad de las listas no de los enlace. Prueva con:

Código CSS:
Ver original
  1. #menu li{
  2.    list-style-image: url(../url);
  3. }
__________________
twitter: @imbuzu
  #3 (permalink)  
Antiguo 11/06/2009, 14:04
 
Fecha de Ingreso: septiembre-2004
Mensajes: 9
Antigüedad: 13 años, 2 meses
Puntos: 0
Exclamación Respuesta: Ayuda con Menu hecho en CSS

Ke onda muchas gracias por tu aporte pero ya lo he intentado y no funciona ojala alguien sepa como resolverlo
Gracias de antemano y espero puedan ayudarme, yo sigo leyendo y buscando pero no puedo resolverlo aun Gracias
  #4 (permalink)  
Antiguo 11/06/2009, 14:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda con Menu hecho en CSS

¿Has probado a colocar el fondo como fondo:
Código css:
Ver original
  1. #menu ul li a {display: block; background: url(tuimagen.ext);/*define el tamaño si fuera necesario*/}
  2. #menu ul li a:hover {background: url(tuimagen2.ext);}

De todas formas, tienes una estupenda colección de menús sólo css en este foro obra de Mikmoro de probada funcionalidad con múltiples navegadores (incluido ie6)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 11/06/2009, 14:31
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Ayuda con Menu hecho en CSS

humm... en que navegador te da los problemas? Probablemente dicho navegador no soporta la propiedad list-style-image por que en FF lo veo sin problemas.
__________________
twitter: @imbuzu
  #6 (permalink)  
Antiguo 11/06/2009, 20:49
 
Fecha de Ingreso: septiembre-2004
Mensajes: 9
Antigüedad: 13 años, 2 meses
Puntos: 0
Exclamación Respuesta: Ayuda con Menu hecho en CSS

Ke tal:

Gracias por sus aportes la propuesta de poner el fondo con las viñetas me va a hacer un poco mas lenta la descarga y cuando quiera anexar elementos tendria que editar el background cosa que no se me hace muy practica.
Efectivamente en FireFox si se ven las viñetas pero no realiza el efecto y en el estupendo Explorer no se ven ojala alguien pueda darme una mano saludos.
  #7 (permalink)  
Antiguo 12/06/2009, 03:54
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Ayuda con Menu hecho en CSS

Como te dije, el problema es que le estás asignando las viñetas a los enlaces y esa propiedad es de las listas. Agrega lo siguiente que te resolverá el problema en FF:

Código css:
Ver original
  1. #menu li:hover{
  2.    list-style-image: url(../imagenes/png/vineta_on.png)
  3. }

Eso seguirá sin funcionar en el amigo IE ya que IE no reconoce el :hover en nada que no sea un enlace. Desgraciadamente, y aun no entiendo por que, no hay forma de referir al padre de un elemento mediante CSS puro y estándar.

Ahora entremos en lios con el IE. Al parecer en IE la propiedad list-style-image no se hereda por lo que la tienes que asignar directamente a los li y no a la lista completa y mucho menos a los enlaces:

Código css:
Ver original
  1. #menu
  2. {
  3.  margin:0;
  4.  padding:0;
  5.  top:30px;
  6. }
  7. #menu li{
  8. list-style-image:url(../imagenes/jpg/flecha.jpg);
  9. }
  10. #menu li:hover{
  11.    list-style-image: url(../imagenes/png/vineta_on.png)
  12. }
  13. #menu li a
  14. {
  15.  text-decoration:none;
  16.  font-family:Arial, Helvetica, sans-serif;
  17.  font-size:11px;
  18.  color:#000000;
  19. }
  20. #menu li a:hover
  21. {
  22.  color:#FFFFFF;
  23.  text-decoration:underline;
  24.  font-size:12px;
  25. }

Ahora, si no me equivoco eso soluciona el problema con FF y con IE, aun que con IE6 sigue sin funcionar el cambio de viñeta. Para el cambio de viñeta en IE, creo que necesitarías Javascript, y claro, siempre puedes probar lo que dice Kseso? que la verdad no entendí tu razón para no usar esa opción.

Saludos, espero haber sido de ayuda.
__________________
twitter: @imbuzu
  #8 (permalink)  
Antiguo 12/06/2009, 04:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda con Menu hecho en CSS

Hola Tux.
¿Quieres ver un cambio de fondo de los enlaces con el añadido de cambiar también el tamaño de la imagen y sin demora ninguna?. Y cuando digo sin demora es sin nada de demora, 0.

Míra este "divertimento". Sencillo y rápido. Ya te adelanto, sólo utiliza a:hover {background-position:..}" y un sólo archivo para todas las imágenes. Y sólo css. Sin js. Y en caso de haber algún problema con la carga de las imágenes o del css sigue siendo funcional.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 14/06/2009, 01:27
 
Fecha de Ingreso: septiembre-2004
Mensajes: 9
Antigüedad: 13 años, 2 meses
Puntos: 0
Exclamación Respuesta: Ayuda con Menu hecho en CSS

Estimados kseso? y buzu:

Gracias por sus aportes me fueron de mucha utilidad a final de cuentas arregle el problema como lo comento kseso? cambiando el fondo de los enlaces entendi como era el pedo y lo implemente.
Gracias por su contribucion saludos
  #10 (permalink)  
Antiguo 14/06/2009, 04:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con Menu hecho en CSS

Hola:

Cita:
Iniciado por tux2003 Ver Mensaje
entendi como era el pedo
¿Sonoro? ¿Oloroso?

Saludos.

  #11 (permalink)  
Antiguo 14/06/2009, 05:24
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Ayuda con Menu hecho en CSS

Bien, bien me da gusto que lo hayas logrado. Kseso? buen aporte.
__________________
twitter: @imbuzu
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:14.