Menu CSS et :activeRésolu/Fermé

Question

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 :

Où et comment mettre mon :active ? Merci d'avance, Moonlight-Angel

Dalida · Answer

salut,

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.

moonlight-angel · Answer

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 ?

Dalida · Answer

je 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

correspondant à la page en cours et tu ajoutes une règle dans tes styles. en HTML :

en CSS : li#selected a{ color:red; }

moonlight-angel · Answer

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);
}

Dalida · Answer

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);
}

Menu CSS et :active

5 réponses

Discussions similaires

Newsletters