Problème avec mon CSS, a:active ne marche pas
Résolu/Fermé
claradur
Messages postés
3
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
22 janvier 2008
-
22 janv. 2008 à 21:39
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 - 20 mars 2010 à 14:20
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 - 20 mars 2010 à 14:20
A voir également:
- Css a:active
- Enlever couleur lien css ✓ - Forum CSS
- Mettre une image à gauche css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
- Déplacer une image css - Forum CSS
- Css download - Télécharger - HTML
8 réponses
Bonjour, je me permet d'intervenir sur ce post, car on peut en CSS rendre un lien actif grace à une petite méthode toute simple dont je vais vous faire l'exemple.
Je vais prendre un bloc de code classique (un menu avec des balises ul, li, a) et développer :
on encapsule dans une balise div le bloc et on insère le menu (version html) :
<div id="trucmenu">
<ul class="navigation">
<li id="actif"><a href="truk.php">ACCUEIL</a></li>
<li><a href="truk2.php">truk2</a></li>
<li><a href="truk3.php">truk3</a></li>
</ul>
</div>
On définit les règles CSS inhérentes au menu :
*En premier la disposition générale des éléments
.navigation {
border: 1px solid #999;
border-top: none;
width:191px;
margin-left:4px;
text-align:center;
}
*La présentation globale affectée aux liens
.navigation li a{
display:block;
padding: 0px 20px 0 20px;
height: 20px;
text-decoration:none;
font-family: "Trebuchet MS";
font-size: 0.8em;
font-weight: bold;
letter-spacing:-0.03em;
color: #030;
}
*La présentation globale affectée aux liens survolés (grâce à la fonction HOVER)
.navigation li a:hover{
color: #030;
background: url(../IMG/backlia.jpg);
background-repeat:repeat-x;
}
*La présentation globale affectée au lien actif (sur la page en question)
.navigation #actif a{
color: #0F0;
background: url(../IMG/backliactif.jpg);
background-repeat:repeat-x;
}
Sur chaque page, on met le ID ACTIF sur le lien qui y correspond. Il faut juste appliquer la bonne ligne sur la bonne page. L'ID sur lien se met dans la balise <LI> pour cette proposition, mais à savoir qu'il est aussi possible de l'appliquer dans la balise <a> (<a href="#" [ID ou CLASS]="ACTIF">....</a>) mais il faut définir les classes en CSS et ne pas se mélanger.
Personnellement j'utilise une ID parce qu'une ID contrairement à une CLASS s'utilise de maniere UNIQUE.
Ca me permet de donner une apparence différente au lien actif suivant la page, si par exemple le code couleur change, pour rester dans une cohérence graphique.
Une class est définie pour s'employer sur une généralité (donc réutilisable plusieurs fois).
J'espère avoir répondu au mieux à la question.
A bientot
Je vais prendre un bloc de code classique (un menu avec des balises ul, li, a) et développer :
on encapsule dans une balise div le bloc et on insère le menu (version html) :
<div id="trucmenu">
<ul class="navigation">
<li id="actif"><a href="truk.php">ACCUEIL</a></li>
<li><a href="truk2.php">truk2</a></li>
<li><a href="truk3.php">truk3</a></li>
</ul>
</div>
On définit les règles CSS inhérentes au menu :
*En premier la disposition générale des éléments
.navigation {
border: 1px solid #999;
border-top: none;
width:191px;
margin-left:4px;
text-align:center;
}
*La présentation globale affectée aux liens
.navigation li a{
display:block;
padding: 0px 20px 0 20px;
height: 20px;
text-decoration:none;
font-family: "Trebuchet MS";
font-size: 0.8em;
font-weight: bold;
letter-spacing:-0.03em;
color: #030;
}
*La présentation globale affectée aux liens survolés (grâce à la fonction HOVER)
.navigation li a:hover{
color: #030;
background: url(../IMG/backlia.jpg);
background-repeat:repeat-x;
}
*La présentation globale affectée au lien actif (sur la page en question)
.navigation #actif a{
color: #0F0;
background: url(../IMG/backliactif.jpg);
background-repeat:repeat-x;
}
Sur chaque page, on met le ID ACTIF sur le lien qui y correspond. Il faut juste appliquer la bonne ligne sur la bonne page. L'ID sur lien se met dans la balise <LI> pour cette proposition, mais à savoir qu'il est aussi possible de l'appliquer dans la balise <a> (<a href="#" [ID ou CLASS]="ACTIF">....</a>) mais il faut définir les classes en CSS et ne pas se mélanger.
Personnellement j'utilise une ID parce qu'une ID contrairement à une CLASS s'utilise de maniere UNIQUE.
Ca me permet de donner une apparence différente au lien actif suivant la page, si par exemple le code couleur change, pour rester dans une cohérence graphique.
Une class est définie pour s'employer sur une généralité (donc réutilisable plusieurs fois).
J'espère avoir répondu au mieux à la question.
A bientot
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
22 janv. 2008 à 23:52
22 janv. 2008 à 23:52
Bonjour,
“:active” sert lorsque le bouton de la souris est enfoncé sur l'élément.
L'effet s'efface lorsqu'on relâche le bouton.
On ne peut pas faire ça avec les CSS.
Il faut que tu te tournes vers un langage de programmation.
--
“:active” sert lorsque le bouton de la souris est enfoncé sur l'élément.
L'effet s'efface lorsqu'on relâche le bouton.
On ne peut pas faire ça avec les CSS.
Il faut que tu te tournes vers un langage de programmation.
--
Utilisateur anonyme
22 janv. 2008 à 22:15
22 janv. 2008 à 22:15
volià un truc qui focntionne :
body {
font-family:'Trebuchet MS','Comics Sans MS','arial';
}
/****************************************/
#plandusite {
font-size: 1.1em;
list-style-type:none;
text-decoration: none;
color:#000000;
}
#plandusite a:link {
font-size: 1.1em;
text-decoration: none;
list-style-type:none;
color:#000000;
}
#plandusite a:visited {
font-size: 1.1em;
text-decoration: none;
list-style-type:none;
color:#000000;
}
/**********************************************/
#plandusite a:hover {
font-size: 1.1em;
text-decoration: none;
list-style-type:none;
color:#000000;
}
/*************************************/
body {
font-family:'Trebuchet MS','Comics Sans MS','arial';
}
/****************************************/
#plandusite {
font-size: 1.1em;
list-style-type:none;
text-decoration: none;
color:#000000;
}
#plandusite a:link {
font-size: 1.1em;
text-decoration: none;
list-style-type:none;
color:#000000;
}
#plandusite a:visited {
font-size: 1.1em;
text-decoration: none;
list-style-type:none;
color:#000000;
}
/**********************************************/
#plandusite a:hover {
font-size: 1.1em;
text-decoration: none;
list-style-type:none;
color:#000000;
}
/*************************************/
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
22 janv. 2008 à 23:46
22 janv. 2008 à 23:46
Bonjour giheller,
Relis bien ton code.
Tes 4 styles sont identiques.
Tu aurais pu écrire
++
Pense à ce bouton (-;
--
Relis bien ton code.
Tes 4 styles sont identiques.
Tu aurais pu écrire
#plandusite {
font-size: 1.1em;
list-style-type:none;
/*text-decoration: none; */
color:#000000;
}
#plandusite a:link {
font-size: 1.1em;
text-decoration: none;
/*list-style-type:none; */
color:#000000;
}
#plandusite a:visited {
}
/**********************************************/
#plandusite a:hover {
}
++
Pense à ce bouton (-;
--
claradur
Messages postés
3
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
22 janvier 2008
22 janv. 2008 à 22:55
22 janv. 2008 à 22:55
Merci pour ta réponse, mais ce n'este pas ça mon problème!
je veux que mon texte selectionné, change de couleur "une couleur de selection" et puis si je selectionne un autre texte, qu'il redevienne de son ancienne couleur, et que le nouveau sélectionné prenne la couleur de selection.
...
je veux que mon texte selectionné, change de couleur "une couleur de selection" et puis si je selectionne un autre texte, qu'il redevienne de son ancienne couleur, et que le nouveau sélectionné prenne la couleur de selection.
...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
claradur
Messages postés
3
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
22 janvier 2008
22 janv. 2008 à 23:55
22 janv. 2008 à 23:55
Bon! merci Gihef, jai la réponse a ma question, je vais arreter de chercher pour rien! et voir pour de la programmation, merci milles fois!
> je veux que mon texte sélectionne, change de couleur "une couleur de sélection" et puis si je sélectionne un autre texte, qu'il redevienne de son ancienne couleur, et que le nouveau sélectionné prenne la couleur de sélection.
Au clavier, je crois pas que ce sois possible, mais si l'utilisateur passe avec la souris dessus, tu peux utiliser a:hover
Au clavier, je crois pas que ce sois possible, mais si l'utilisateur passe avec la souris dessus, tu peux utiliser a:hover
aérosol 93
Messages postés
1
Date d'inscription
samedi 20 mars 2010
Statut
Membre
Dernière intervention
20 mars 2010
20 mars 2010 à 14:11
20 mars 2010 à 14:11
pour les liens actifs attention à la syntaxe !
c'est a.active
et non pas a:active
c'est a.active
et non pas a:active
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
20 mars 2010 à 14:20
20 mars 2010 à 14:20
N'importe quoi... .active est une classe, :active est une pseudo-classe. Rien à voir entre les 2.
http://www.w3schools.com/Css/pr_pseudo_active.asp
Pas la peine de déterrer un topic vieux de 2 ans pour dire des bêtises pareilles...
http://www.w3schools.com/Css/pr_pseudo_active.asp
Pas la peine de déterrer un topic vieux de 2 ans pour dire des bêtises pareilles...
