Menu CSS et :active
Résolu
Bonjour,
Hier, j'ai créé un menu en CSS et HTML, contenant différentes images, avec chacune leur propre :hover, mais voilà, j'aimerais aussi créer à chaque image son propre :active
Voici mon code :
a#lien1 {
background-position: left top;
background-repeat: no-repeat;
width: 100px;
height: 30px;
background-image: url(images/menu/accueil.gif);
}
a#lien1:hover {
background-repeat: no-repeat;
width: 100px;
height: 30px;
background-image: url(images/menu/accueil_o.gif);
}
Je pense qu'il suffirait d'ajouter une ligne comme ça : a#lien1:active
Non ?
Si c'est le cas, je coince juste au moment de la mise en forme HTML :
<li><a id="lien1" href="index.php"><br>
</a></li>
Où et comment mettre mon :active ?
Merci d'avance, Moonlight-Angel
--
Dans Windows, il y a une petite application qui est là pour "réparer" celles qui ont plantés.
Celle ci s'appelle Dc Watson. Seul problème : Dc Watson plante aussi...
Hier, j'ai créé un menu en CSS et HTML, contenant différentes images, avec chacune leur propre :hover, mais voilà, j'aimerais aussi créer à chaque image son propre :active
Voici mon code :
a#lien1 {
background-position: left top;
background-repeat: no-repeat;
width: 100px;
height: 30px;
background-image: url(images/menu/accueil.gif);
}
a#lien1:hover {
background-repeat: no-repeat;
width: 100px;
height: 30px;
background-image: url(images/menu/accueil_o.gif);
}
Je pense qu'il suffirait d'ajouter une ligne comme ça : a#lien1:active
Non ?
Si c'est le cas, je coince juste au moment de la mise en forme HTML :
<li><a id="lien1" href="index.php"><br>
</a></li>
Où et comment mettre mon :active ?
Merci d'avance, Moonlight-Angel
--
Dans Windows, il y a une petite application qui est là pour "réparer" celles qui ont plantés.
Celle ci s'appelle Dc Watson. Seul problème : Dc Watson plante aussi...
Configuration: Windows XP Firefox 3.0.8
5 réponses
-
Contributeurje cherche effectivement le mot (ou code) qui sert à différencier dans le menu, la page affichée actuellement
tu ajoutes une classe ou un identifiant au <li> correspondant à la page en cours et tu ajoutes une règle dans tes styles.
en HTML :<li id="selected"><a id="lien1" href="index.php"><br></a></li>
en CSS :li#selected a{ color:red; } -
Contributeursalut,
Je pense qu'il suffirait d'ajouter une ligne comme ça : a#lien1:active
c'est ça, tu le codes codes comme le :hover et tu le places APRÈS :hover dans la CSS.
mais :active c'est le moment où tu cliques sur le lien (en maintenant le bouton enfoncé), ça ne permet pas de différencier dans le menu la page affichée actuellement.
-
Merci de ta réponse
Oui, je me suis trompé =D
J'ai un trou de mémoire, je cherche effectivement le mot (ou code) qui sert à différencier dans le menu, la page affichée actuellement...
Merci d'avance
PS: Comment je mets le code : ...... dans la parite HTML ? Où le placer et comment ? -
Ok, je te remercie, et une dernière question, la règle dans le CSS, je la mets comment, vu que je voudrais un "selected" différent pour chaque image.
Une idée ?
a#lien1:selected {
background-repeat: no-repeat;
width: 100px;
height: 30px;
background-image: url(images/menu/accueil_o.gif);
}
-
Contributeur
li#selected a#lien1 { background-repeat: no-repeat; width: 100px; height: 30px; background-image: url(images/menu/accueil_o.gif); } li#selected a#lien2 { background-repeat: no-repeat; width: 100px; height: 30px; background-image: url(images/menu/autre_image.gif); }
