[Résolu]Liens de couleurs différentes dans code

Bonjour,
En insérant du code dans ma page html, j'ai essayé de faire deux classes css; .liensnoirs et .liensblancs, afin que deux calques contiennent des liens d'attributs différents.
Au résultat, ceux intitulés "liens blancs" (dans la rubrique "liens") fonctionnent, mais pas ceux intitulés "liens noirs"(dans la rubrique "partenaires"). En effet, ces derniers se comportent comme s'ils étaient des liens blancs, alors que les attributs, dans le code, sont bien différents ! Voici les codes des liens :

}
}
.liensnoirs {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}
a:link {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #000000;
}
body,td,th {
	color: #000000;
}
.liensblancs {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a:link {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: underline;
	color: #000000;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
body,td,th {
	color: #FFFFFF;
}

Peut être le souci vient-il de cette dernière ligne "body,td,th" (je ne sais pas bien à quoi elle correspond).
Voici la page où se rendre pour visualiser mon problème.:http://www.anonimateatro.com/pages/crea_liens.html
Merci beaucoup à tous ceux qui pourront me filer un petit coup de pouce...!!

Modifié par hoapo (28 Jan 2009 - 18:29)

Salut Hoapo,

C'est ta declaration CSS qui est mauvaise.
Il ne s'agit pas de creer une classe sur un lien pour que les lignes suivantes correspondent a la classe citee plus haut.

Je m'explique : lorsque tu ecris

a:link {
	text-decoration: none;
	color: #000000;
}

Cela est traduit par : tous les liens sont noirs (independemment de ce que tu as defini plus haut), donc lors que tu rajoutes plus bas

a:link {
	text-decoration: none;
	color: #FFFFFF;
}

Cela ecrase la precedente declaration : tous les liens sont blancs.

Ce que tu veux faire toi sera de ce format la :

a.liensnoirs:link {
	text-decoration: none;
	color: #000000;
}

a.liensblancs:link {
	text-decoration: none;
	color: #FFFFFF;
}

Quand a la derniere ligne, elle informe que le contenu textuel (non liens) dans la page et les cellules des tableaux sera de couleur blanche, mais ca n'a pas de rapport et puis la declaration de classe a priorite sur la declaration generique.

Pour plus d'informations :http://openweb.eu.org/articles/cascade_css

Salut hoapo,

Euh.. vu comment tu présente tes CSS, on dirait que tu as pas compris comment utiliser les class.. mais bon c'est peut etre juste ta présentation des CSS qui va pas (ou moi qui suis trop fatigué pour lire correctement).

Dans le css que tu as donné tu défini une fois tes balise "a" avec une couleur noir et une deuxième fois plus bas avec une couleur blanche... donc forcément le navigateur prend la dernière version c'est à dire blanche...

concrètement si tu veux définir des liens noirs et des liens blanc, tu n'as pas besoin de

a:link {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}

a:active {
	text-decoration: none;
	color: #000000;
}

Même si c'est bien d'y avoir pour que les liens qui n'ont pas de classe soit quand même personalisé.

Donc se qu'il faut que tu fasse c'est soit tu définit les liens que tu souhaite en blanc avec <a class="liensblancs"> et ceux que tu souhaite en noir avec <a class="liensnoirs ">, soit liensblancs et liensnoirs sont des div différent dans ce cas il faut que tu définisse les couleurs des liens qui sont dans les div en écrivant :

.liensnoirs a {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}

.liensblancs a {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}

Voilà, pour le body,th,tr sa n'a rien a voir.... Je serai toi je lirais quelques tuto sur les css parce que cette notation est très utile et importante pour comprendre certaine manière d'écrire les css (a défaut de tuto, le bouquin de Raphael explique tout ça très très bien )

See you
Modifié par Mikerob (28 Jan 2009 - 00:11)

Super, merci pour vos réponses rapides !
Juste une dernière question; ce que vous me proposez va effectivement faire que les liens blancs soient blancs et les noirs noirs. Mais si je veux rajouter une propriété, à savoir en survol (hover), les liens blancs sont noirs & surlignés et les liens noirs sont blancs & surlignés ? Voilà ce que j'ai mis dans mon code, mais ça ne fonctionne pas, au contraire, les liens deviennent violets (?)

}
a.liensnoirs:link {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
	}
a.liensnoirs:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a.liensblancs:link {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.liensblancs:hover {
	text-decoration: underline;
	color: #000000;
}
body,td,th {
	color: #FFFFFF;

Merci !!!

la couleurs violette est la couleur de base des liens "visited".

Comme tu n'as pas prévu de comportement pour les liens visités, c'est celui de base qui est appliqué.

Je suis désolée, mais je ne comprends toujours pas comment encoder ma demande...
J'ai mis les liens noirs et blancs visited en couleurs dans mon code, afin qu'il ne soient plus activés par défault (violet). Voici mon nouveau code (qui ne marche pas, d'aileurs les liens sont toujours violets...) :

}
a.liensnoirs:link {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
	}
a.liensnoirs:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a.liensblancs:visited {
	text-decoration: none;
	color: #000000;
}
a.liensblancs:link {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.liensblancs:hover {
	text-decoration: underline;
	color: #000000;
}
a.liensblancs:visited {
	text-decoration: none;
	color: #FFFFFF;
}
body,td,th {
	color: #FFFFFF;
}

Je débute en code... Peut être y a-t-il une erreur qui crève les yeux mais qui ne m'apparaît pas...
Merci pour votre aide... Je sens que j'y suis presque !

Ceci :

a.liensnoirs{
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
	}
a.liensnoirs:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a.liensblancs {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.liensblancs:hover {
	text-decoration: underline;
	color: #000000;
}

devrait suffire pour faire ce que tu souhaite.

Avec la pseudo classe ":link" tu limite le comportement défini au liens qui ne sont pas survolés, activés, ou déjà visité. Si tu ne précise pas de pseudo classe (donc "a" tout seul) tu vise tous les comportements des liens et peux ensuite définir les comportements spéciaux (":hover" dans ton example).
Modifié par Laurie-Anne (28 Jan 2009 - 12:15)

merci pour ta réponse, mais cela ne marche toujours pas... J'ai codé selon ton conseil, en rajoutant deux lignes pour "visited" sur le même exemple, afin de ne pas avoir de liens violets :

a.liensnoirs{
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}
a.liensnoirs:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a.liensnoirs:visited {
	text-decoration: none;
	color: #000000;
}
a.liensblancs {
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.liensblancs:hover {
	text-decoration: underline;
	color: #000000;
}
a.liensblancs:visited {
	text-decoration: none;
	color: #FFFFFF;
}

Mais les liens violets restent présents, et les liens blancs ne fonctionnent pas...

Est-ce qu'il serait possible de voir une page en ligne ?

P'tite piqure de rappel, l'ordre de déclaration des balises A est important

D'après le site http://www.w3schools.com/CSS/css_pseudo_classes.asp

l'ordre est :

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

Je suppose que sa devrait résoudre ton pb.. sinon tu peux fournir un p'tit bout de code html ou tu utilise tes CSS ? mais il devrait pas y avoir besoin

Bien sûr :
http://www.anonimateatro.com/pages/crea_liens.html
J'ai remodifié l'ordre de déclaration des balises a (merci mikerob), mais le résultat est toujours le même....
merci !

Pour être encore plus précise par rapport à l'image, je voudrais que :
- les liens situés en dessous de la rubrique "liens" soient tout le temps en blancs (actifs, visités...), sauf quand ils sont survolés, alors qu'ils soient noirs et surlignés.
- les liens situés en dessous de la rubrique "partenaires" soient tout le temps noirs, sauf quand ils sont survolés, alors qu'ils soient blancs et surlignés.
merci !

OK

Le problème viens très certainement du reste de ta page HTML.

Donc en priorité, faire le ménage, il y a beaucoup de code en trop, répéter les classes 3 fois pour cibler le même éléments ça ne sert à rien. Pour la partie de tes liens, comme il s'agit d'un groupe de liens :

.liensnoirs a{
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}
.liensnoirs a:visited {
	text-decoration: none;
	color: #000000;
}
.liensnoirs a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
.liensblancs a{
	font-family: Eurostile, Verdana, "Arial Narrow";
	font-size: 16px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
}
.liensblancs a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
.liensblancs a:hover {
	text-decoration: underline;
	color: #000000;
}

 <div class="liensnoirs">
    <a href="http://www.cg34.fr/loisirs/index.html">Conseil G&eacute;n&eacute;ral de l&rsquo;H&eacute;rault </a><br />
    <a href="http://www.theatreclermontlherault.fr/">Th&eacute;&acirc;tre de Clermont l&rsquo;H&eacute;rault</a><br />
    <a href="http://charte.lodevoislarzac.fr/">Charte du Lod&eacute;vois-Larzac</a><br />
    <a href="#">Espace Culturel de L&eacute;zignan-Corbi&egrave;res</a><br />
    <a href="http://theatrelavista.free.fr/">Th&eacute;&acirc;tre de la Vista</a><br />
    <a href="http://www.fol48.org/">F.O.L. de Loz&egrave;re</a></div>
</div>

<div>
  <div class="liensblancs">
    <p><a href="http://www.poingdesinge.com/">cie du poing de singe</a><br />
      <a href="http://www.laluneatics.org/">cie lune &agrave; tics</a><br />
      <a href="#">cie fatta morgana</a><br />rita pedram<br />
      <a href="http://www.detoxinfos.net/carton_a_dessins/uzitof">uzitof</a><br />
      <a href="#">josef karom</a><br />
      <a href="http://www.lescaillouxsauvages.com/">cie des cailloux sauvages</a><br />
      <a href="#">bastien authi&eacute;</a></p>
  </div>

MAIS, je te conseille fortement de lire les tutoriels présents sur le site et sur d'autres pour revoir les bases du HTML et du CSS.

super, ça fonctionne enfin !!
Merci beaucoup pour le temps passé avec moi là dessus.
Je vais me mettre à apprendre un peu plus le code, afin de m'autonomiser.
Encore un grand merci !!