Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu image

Hover et active

    2 mars 2011 à 22:44:33

    Bonjour,

    J'ai fait un menu entièrement en image seulement le hover et le active bugent : l'image s'affiche mais au survol et au clique la nouvelle image ne s'affiche pas...

    Code CSS :

    .menu {
    	margin-left: 330px;
    	padding: 0;
    	list-style: none;
    }
    .menu li {
    	padding: 0;
    	margin: 0;
    	height: 39px;
    	margin-right: 1em;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    .menu li a, .menu li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -1000px;
    	height: 50px;
    	background-repeat: no-repeat;
    }
    
    .galerie a {
           background-image: url(images/galerie.png);
           width: 73px;
    }
    
    .galerie a:hover {
          background-image: url(images/galerie_on.png);
          width: 73px;
    }
    
    .galerie a:active {
          background-image: url(images/galerie_on.png);
          width: 73px;
    }
    


    Code HTML :

    <ul class="menu">
    	<li class="galerie"><a href="#">Galerie</a></li>
    	<li class="about"><a href="#">About</a></li>
    	<li class="services"><a href="#">Services</a></li>
    	<li class="contact"><a href="#">Contact</a></li>
    </ul>
    


    Merci d'avance,
    Le Dépeceur.
    • Partager sur Facebook
    • Partager sur Twitter
      3 mars 2011 à 5:16:20

      Vérifie tes chemins! hover et active ont la même image, si donc elle n'apparait sur aucun de ces deux états c'est peut-être que le chemin n'est pas bon...

      Si c'est bien un problème de chemins:

      -> soit le nom de l'image n'est pas correct
      -> soit elle est à un autre emplacement
      -> ou peut-être encore qu'elle n'existe tout simplement pas.
      • Partager sur Facebook
      • Partager sur Twitter
        3 mars 2011 à 14:27:23

        Salut,

        Merci tout d'abord de ta réponse ! J'ai pourtant bien vérifié le chemin en faisant des tests mais cela ne fonctionne pas... A mon avis j'ai du me tromper ailleurs.
        • Partager sur Facebook
        • Partager sur Twitter
          3 mars 2011 à 15:13:28

          Bonjour,
          CStef a raison. Ton image de fond pour hover et active est exactement la même, donc forcément au clique tu ne verras pas de différence...
          • Partager sur Facebook
          • Partager sur Twitter
            3 mars 2011 à 18:08:29

            Oui je sais mais j'ai précisé que la nouvelle image (survol et clic) ne s'affiche pas que ce soit la même image ou pas.

            Edit : Bon j'ai rectifié un peu les erreurs : le a:hover fonctionne mais le a:active ne fonctionne pas :(

            .menu {
            	margin-left: 330px;
            	padding: 0;
            	width: 150px;
            	list-style: none;
            }
            .menu li {
            	padding: 0;
            	margin: 0;
            	height: 14px;
            	list-style: none;
            	background-repeat: no-repeat;
            }
            .menu li a, .menu li a:visited {
            	display: block;
            	text-decoration: none;
            	text-indent: -9999px;
            	height: 14px;
            	background-repeat: no-repeat;
            }
            
            .galerie a {
                    background-image: url(images/galerie.png);
            	height: 14px;
            	width: 73px;
            }
            
            .galerie a:hover {
                    background-image: url(images/galerie_on.png);
            	height: 14px;
            	width: 73px;
            }
            
            .galerie a:active {
                    background-image: url(images/galerie_on2.png);
            	height: 14px;
            	width: 73px;
            }
            


            <ul class="menu">
                <li class="galerie"><a href="#">Galerie</a></li>
            </ul>
            
            • Partager sur Facebook
            • Partager sur Twitter
              3 mars 2011 à 19:21:27

              a:active ça défini ce qu'il se passe QUE au moment du clic on est bien d'accord ? ( Je te pose la question simplement parce que dans 90% des problèmes avec :active c'est juste parce que les gens ne comprennent pas bien à quoi il sert)

              Après s'il y a un problème d'affichage de l'image c'est forcément un problème de chemin ou de nom comme le disait Cstef..je ne vois que ça.
              • Partager sur Facebook
              • Partager sur Twitter
                3 mars 2011 à 19:39:03

                Ok je viens de comprendre... Si je garde le clique enfoncé ça reste actif si je relâche ça s'enlève...
                • Partager sur Facebook
                • Partager sur Twitter
                  3 mars 2011 à 20:26:28

                  Exactement ! C'est le principe de :active.

                  Ce que tu voulais, toi, j'imagine c'est que le bouton reste avec la nouvelle image lorsque tu es sur la page liée à ce bouton ?

                  Si c'est ça, il faut que tu créé une nouvelle class genre "boutonactif", que dans le css tu mettes à cette classe la nouvelle image en fond et que dans ton HTML à chaque page, tu mets la class class="boutonactif" au bouton qui lui correspond
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Menu image

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown