Problème avec mon CSS, a:active ne marche pas
Résolu
claradur
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention -
notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Css a:active
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Enlever le soulignage des lien. - Forum CSS
- Trait css ✓ - Forum CSS
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
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
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.
--
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;
}
/*************************************/
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 (-;
--
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
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
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
