Menu CSS et :active
Résolu
moonlight-angel
Messages postés
92
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
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
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
A voir également:
- Menu en css
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
5 réponses
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 <li> correspondant à la page en cours et tu ajoutes une règle dans tes styles.
en HTML :
en CSS :
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;
}
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.
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 ?
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);
}
Une idée ?
a#lien1:selected {
background-repeat: no-repeat;
width: 100px;
height: 30px;
background-image: url(images/menu/accueil_o.gif);
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question