Couleur sur un lien d'une liste
indiana-81
Messages postés
5
Statut
Membre
-
giheller -
giheller -
Bonjour,
J'ai une liste dans un page html où chaque élément de la liste est un lien, je souhaite attribuer à chaque lien une couleur spécifique: j'ai donc écris ce code:
<div id="listing" style="left: 23%">
<ul>
<div id="arq"><li><a href="zones_lescure.html"/>Lescure</li></div>
<div id="mad"><li><a href="zones_madeleine.html"/>La Madeleine</li></div>
<div id="can"><li><a href="zones_cantepau.html"/>Cantepau</li></div>
<div id="pis"><li><a href="zones_piscine.html"/>La Piscine</li></div>
<div id="sai"><li><a href="zones_saint-martin.html"/>Saint-Martin</li></div>
<div id="cen"><li><a href="zone centre ville Albi commerces.html"/>Centre Ville</li></div>
<div id="mal"><li><a href="zones_maladrerie.html"/>La Maladrerie</li></div>
<div id="rac"><li><a href="zones_rachoune.html"/>La Rachoune</li></div>
<div id="ray"><li><a href="zones_rayssac.html"/>Rayssac</li></div>
<div id="roc"><li><a href="zones_rocade.html"/>Rocade</li></div>
<div id="seq"><li><a href="zones_séquestre.html"/>Le Séquestre</li></div>
<div id="puy"><li><a href="zones_puygouson.html"/>Puygouson</li></div>
</ul>
et ce code dans ma page css:
#arq {
color: #02cb51;
}
#seq {
color: #3148d7;
}
#ray {
color: #be6926;
}
#mal {
color: #13d701;
}
#cen {
color: #f22e28;
}
#rac {
color: #68f73d;
}
#sai {
color: #e3e122;
}
#pis {
color: #12d7e0;
}
#can {
color: #f7890a;
}
#mad {
color: #e112b7;
}
#roc {
color :#460734;
}
#puy {
color :#c8c943;
}
Malheureusement seul la puce de chaque élément de la liste s'affiche dans la couleur demandé, pas le texte du lien... quelqu'un pourrait il m'aider dans la rédaction html et css pour colorisé le lien en entier.
Merci
J'ai une liste dans un page html où chaque élément de la liste est un lien, je souhaite attribuer à chaque lien une couleur spécifique: j'ai donc écris ce code:
<div id="listing" style="left: 23%">
<ul>
<div id="arq"><li><a href="zones_lescure.html"/>Lescure</li></div>
<div id="mad"><li><a href="zones_madeleine.html"/>La Madeleine</li></div>
<div id="can"><li><a href="zones_cantepau.html"/>Cantepau</li></div>
<div id="pis"><li><a href="zones_piscine.html"/>La Piscine</li></div>
<div id="sai"><li><a href="zones_saint-martin.html"/>Saint-Martin</li></div>
<div id="cen"><li><a href="zone centre ville Albi commerces.html"/>Centre Ville</li></div>
<div id="mal"><li><a href="zones_maladrerie.html"/>La Maladrerie</li></div>
<div id="rac"><li><a href="zones_rachoune.html"/>La Rachoune</li></div>
<div id="ray"><li><a href="zones_rayssac.html"/>Rayssac</li></div>
<div id="roc"><li><a href="zones_rocade.html"/>Rocade</li></div>
<div id="seq"><li><a href="zones_séquestre.html"/>Le Séquestre</li></div>
<div id="puy"><li><a href="zones_puygouson.html"/>Puygouson</li></div>
</ul>
et ce code dans ma page css:
#arq {
color: #02cb51;
}
#seq {
color: #3148d7;
}
#ray {
color: #be6926;
}
#mal {
color: #13d701;
}
#cen {
color: #f22e28;
}
#rac {
color: #68f73d;
}
#sai {
color: #e3e122;
}
#pis {
color: #12d7e0;
}
#can {
color: #f7890a;
}
#mad {
color: #e112b7;
}
#roc {
color :#460734;
}
#puy {
color :#c8c943;
}
Malheureusement seul la puce de chaque élément de la liste s'affiche dans la couleur demandé, pas le texte du lien... quelqu'un pourrait il m'aider dans la rédaction html et css pour colorisé le lien en entier.
Merci
Configuration: Windows Vista Internet Explorer 7.0
5 réponses
-
Bonjour,
les couleurs des liens sont paramétrables par les attributs
link, vilink, alink
il faut donc ajouter cela dans voos CSS -
Pouvez vous me donner un exemple de balise css pourle premier lien par exemple ( sachant que la couleur est différente pour chaque lien de la liste)
Merci bcp-
oui je peux
dans cet exemple ils changent en fonction de lien ou de evenements
c'est typiquement ce que vous faites
/****************************************/
.liens {
font-size: 0.9em;
list-style-type:none;
text-decoration: none;
color:#FFFFFF;
}
.liens a:link {
font-size: 0.9em;
text-decoration: none;
list-style-type:none;
color:#FFFFFF;
}
.liens a:visited {
font-size: 0.9em;
text-decoration: none;
list-style-type:none;
color:#FFFFFF;
}
/**********************************************/
.liens a:hover {
font-size: 0.9em;
text-decoration: none;
list-style-type:none;
color:#FF0000;
}
/*************************************/
.liens a:active {
font-size: 0.9em;
text-decoration: none;
list-style-type:none;
color:#FFFFFF;
}
/*************************************/
/*************************************/
/****************************************/
.evenements {
font-size: 1.0em;
list-style-type:none;
text-decoration: none;
color:#00FF00;
}
.evenements a:link {
font-size: 1.0em;
text-decoration: none;
list-style-type:none;
color:#00FF00;
}
.evenements a:visited {
font-size: 1.0em;
text-decoration: none;
list-style-type:none;
color:#00FF00;
}
/**********************************************/
.evenements a:hover {
font-size: 1.0em;
text-decoration: none;
list-style-type:none;
color:#FFFFFF;
}
-
-
Merci beaucoup de m'avoir expliquer...malheureusement je dois être empoté je marque :
#arq a:link{
list-style-type:none;
text-decoration: none;
color: #02cb51;
}
#seq a :link{
list-style-type:none;
text-decoration: none;
color: #3148d7
}
Mais rien ne change... avez vous une idée svp Merci -
Ok pouvez je viens d'effectuer les modifications ( je n'avais pas saisi l'emplacement de span maintenant j'ai effectuer le remplacement:
dans le html :
<span class="arq"><li><a href="zones_lescure.html">Lescure</a></li></span>
<span class="mad"><li><a href="zones_madeleine.html">La Madeleine</a></li></span>
et dans le css:
.arq a:link{
list-style-type:none;
text-decoration: none;
color: #02cb51;
}
.seq a :link{
list-style-type:none;
text-decoration: none;
color: #3148d7;
}
Mais cela ne fonctionne pas... je pense à une erreur de syntaxe mais où....
merci -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Ok merci beaucoup je viens de réussir avec #id a:link{ color: #131654}
Merci beaucoup de votre patience.
Amicalement
Indiana