Foros del Web » Creando para Internet » CSS »

problema con menu css horizontal en img dos estados

Estas en el tema de problema con menu css horizontal en img dos estados en el foro de CSS en Foros del Web. No me funciona el cambio de imagen en un menú css horizontal con varias imágenes de dos estados cada una( cada sección de la web ...
  #1 (permalink)  
Antiguo 24/04/2013, 04:04
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 15 años, 2 meses
Puntos: 1
problema con menu css horizontal en img dos estados

No me funciona el cambio de imagen en un menú css horizontal con varias imágenes de dos estados cada una( cada sección de la web tiene dos imágenes)

Código HTML:
Ver original
  1. <div id="menu">
  2.             <ul>
  3.                 <li><a class="inicio" href="index.php?page=home" ><span><img src="imagenes/botones/inicio.png"></span></a></li>
  4.              
  5.             </ul>
  6.         </div>

Código css:

Código CSS:
Ver original
  1. /* css del menu*/
  2. #menu
  3. {
  4.     margin-top: 60px;
  5.      width: 940px;
  6.      height: 50px;
  7.  
  8. }
  9.  
  10. #menu li
  11. {
  12.    display: inline;
  13.    text-align: center;
  14.    margin: 0 10px 0 0;
  15. }
  16. /*#menu li.inicio{}*/
  17. }
  18. .inicio span:hover{ background-image: url(imagenes/botones/inicio2.png);}
  19.  
  20. /* Fin css del menu*/


He probado varias cosas y no me funciona ninguna, el codigo lo he copiado de una web que tiene el menu distribuido por el header (no esta en linea ni horizontal ni verticalmente). pero ahora al ponerlo yo horizontal en linea... he cambiado el codigo por que si no lo pongo como lo tengo ahora ni siquiera se veria la imagen de "inicio" del menu. ahora se ve la imagen pero no cambia al pasar el raton por encima....
  #2 (permalink)  
Antiguo 24/04/2013, 04:22
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: problema con menu css horizontal en img dos estados

Ya lo he solucionado dejo el codigo:

Código CSS:
Ver original
  1. /* css del menu*/
  2. #menu
  3. {
  4.    
  5.      width: 940px;
  6.      height: 60px;
  7.      margin-top: 55px;
  8.  
  9. }
  10.  
  11. #menu a
  12. {
  13.     position: relative;
  14. }
  15.  
  16. #menu li a span
  17. {
  18.     position: absolute;
  19.     top: 0;
  20.     left: 0;
  21.     background-repeat: no-repeat;
  22.     cursor: pointer;
  23.  
  24.     display: inline;
  25.  }
  26.  
  27.  
  28.  
  29. .inicio
  30. {
  31.     top: 15px; left: 5px;
  32. }
  33.  
  34.  
  35.  
  36. .inicio span
  37. {
  38.     width: 100px;
  39.     height: 44px;
  40.     background-image: URL(imagenes/botones/inicio.png);
  41. }
  42.  
  43. .inicio span:hover
  44. {
  45.        background-image: URL(imagenes/botones/inicio2.png);
  46. }
  47.  
  48. /* Fin css del menu*/


Código HTML:
Ver original
  1. <div id="menu">
  2.             <ul>
  3.                 <li><a class="inicio" href="index.php?page=home"><span></span></a></li>
  4.            
  5.             </ul>
  6.         </div>

Etiquetas: estados, horizontal, hover, imagenes, img, php
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 08:21.