28173 sujets

CSS et mise en forme, CSS3

Bonjour !

A plusieurs endroits dans ma page, je désire que des liens aient une couleur différente des liens normaux de la page. Alors j'ai créé, comme je le fais d'habitude, un style spécial pour ces liens, que j'ai nommé en l'occurence "crea" : j'ai donc dans ma feuille css ".crea:link { [ma couleur]}, et je l'appelle dans ma page par : class="crea".

J'avais déjà fait ça sur un autre site, ça marchait. Mais là le problème c'est que ça marche sur la page quand je la regarde dans Dreamweaver, mais dès que demande l'aperçu, que ça soit sur mon ordinateur qu'une fois transféré sur le site, ça ne me prend pas mon lien crea, mais le lien normal de la page. ?Qué pasa?...

Voici ma page : http://www.crea-sites.fr/millesimes/, et voici mon css : http://www.crea-sites.fr/millesimes/style.css.

J'ai essayé de faire ce lien "crea" dans deux endroits, ligne 38 puis ligne 77 de ma page index.html.

Le problème viendrait-il du fait que j'ai précisé avant le lien une classe pour <p> ? (exemple : "<p class="crea-sites" ...><a href="..." class="crea">) ????
Peut-être que le 2ème "class" n'est pas vu à cause du 1er ?

Merci d'avance,

Judith.
Bonsoir,
a écrit :
Le problème viendrait-il du fait que j'ai précisé avant le lien une classe pour <p> ?
Non, aucun problème avec ça. Smiley cligne

Dans la feuille de style, il faut bien respecter l'ordre LoVe-HAte pour écrire le comportement des liens : a:link (lien par défaut), a:visited (lien visité), a:hover (au survol), a:active (lien actif, quand on clique).
Mieux vaut l'écrire ainsi : a.classe, ou a:état.classe :

a.lien { /* par défaut */
	color: red;
	text-decoration: none;
	}
a:visited.lien { /* lien visité */
	color: blue;
	}
a:hover.lien { /* au survol */
	color: green;
	text-decoration: underline;
	}
("a.lien" est identique à "a:link.lien")
(L'écriture inverse serait .lien a:link, .lien a:hover, etc.)

Pour regrouper plusieurs états, il convient de tout répéter :

[#orange]NON[/#]
a:hover visited active {(...)}

[#orange]OUI[/#]
a:hover, a:visited, a:active {(...)}



On peut également agir sur des liens sans leur attribuer de classe spécifique, en les ciblant d'après un élément parent (un élément qui les "contient" : un div, une liste, un span, un paragraphe...)
Imaginons ces exemples :

[#orange]BALISAGE[/#]
<div id="truc">
   <a href="url" title="">bla bla bla</a>
</div>

[#orange]Pour agir sur le lien :[/#]
#truc a , #truc a:visited {
   (...)
   }
#truc a:hover {
   (...)
   }

[#orange]BALISAGE[/#]
<p class="machin">bla bla bla bla<a href="url" title="">ici un lien</a></p>


[#orange]Pour agir sur le lien :[/#]
p.machin a , p.machin a:visited {
   (...)
   }
p.machin a:hover {
   (...)
   }

Modifié par Smiley neko (26 Apr 2006 - 23:22)
Merci. J'ai essayé de modifier selon ce que tu m'as dit, à partir de mes données ; mais ça ne marche pas...

J'ai mis ceci :
.crea:link {
color: #BF8202;
}
.crea:visited .crea:hover .crea:active {
color: #6B391F;
}

J'ai essayé d'autres solutions, ça ne marche pas non plus. ???
Il manque deux, trois choses : "a" et des virgules.
Ceci devrait fonctionner :

a.crea {
   color: #BF8202;
   }
a:visited.crea, a:hover.crea, [#gray]a:active.crea[/#] {
   color: #6B391F;
   }
Link n'est pas nécessaire. Il faut séparer les états regroupés par des virgules. L'état "actif" n'est pas nécessaire si on ne change pas son comportement
Modifié par Smiley neko (27 Apr 2006 - 20:32)
Youpii !!! Ca marche !!!
En fait ta réponse d'avant donnait pas mal de détails, mais je n'ai pas forcément vu exactement comment la reproduire dans ma situation à moi.

Je te remercie beaucoup. Je vais essayer de retenir cela... Smiley cligne

Merci beaucoup !! Smiley ravi