Webmaster Hub > CSS: changer la couleur du lien au passage de la souris

Version complète: sur le forum Webmaster Hub : CSS: changer la couleur du lien au passage de la souris

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Charger

dimanche 13 août 2006 à 09:31

Voilà, j'ai essayé maintes fois d'insérer un code html, dans ma page, de ce type:

CODE

<STYLE TYPE="text/css">

A:hover {color:#0555FA;}
-->
</STYLE>

Mais rien n'y fait, les liens ne changent toujours pas de couleur au passage de la souris. Le plus bizarre étant que même en créant une page vierge avec Frontpage 2003 et en ayant inséré ce code entre <head> et </head>, les liens que je crée ensuite ne produisent toujours pas l'effet voulu.

Savez-vous d'où peut venir le problème?

Merci d'avance.

petit-ourson

dimanche 13 août 2006 à 09:59

Pourquoi le contenu est mis en commentaire " ??

Monique

dimanche 13 août 2006 à 11:04

Bonjour,

Pour définir l'apparence des liens, on utilise des pseudo-formats qui doivent être absolument dans cet ordre :

a:link => liens vers les pages qui n'ont pas encore été visitées
a:visited => liens vers les pages qui ont déjà été visitées
a:hover => liens survolés avec la souris
a:active => liens en train d'être cliqués
a:focus => liens qui deviennent actifs (lors de la navigation au clavier, par exemple)

Les deux derniers ne sont pas obligatoires mais a:focus est très utile pour se repérer dans une page quand on se déplace de liens en liens (clavier ou aide technique).

bidibul

dimanche 13 août 2006 à 16:18

normalement en écrivant ça, ça devrait marcher :

<style type="text/css">


</style>

bon j'ai mis n'importe quoi comme couleur à toi de changer et pour focus, je n'ai jamais essayé, mais en suivant la même logique ça devrait marcher, mais bon, je ne suis pas certaine enfin pour le reste c'est sur.

voilà, en espérant t'avoir un peu aidé, bonne journée.

CITATION(petit-ourson @ dimanche 13 août 2006, 10h59)

Pourquoi le contenu est mis en commentaire " ??

parce quà mon avis il doit avoir mis son code css directement dans sa feuille html et non en ficher css externe.

Dudu

mardi 15 août 2006 à 02:56

Salut

CITATION(Charger @ dimanche 13 août 2006, 10h31)

CODE

-->

Code HTML boiteux. Un commentaire HTML ne peut pas ni inclure un autre commentaire HTML, ni être inclus dans un autre, ni comporter 2 tirets simultanés (--) dans son contenu.

Certainement la cause de ton problème. Supprime-les carrément sauf si tu tiens réellement à faire un support actif pour Netscape 3.0 et inférieur

Encore mieux: mets la feuille de style en externe et lie-là via une balise <link> et là pas besoin de mettre de commentaires HTML ce sera nickel pour tout le monde, même pour Mozaïc s'il le faut

Charger

jeudi 17 août 2006 à 10:26

Merci pour vos réponses mais même après avoir suivi vos conseils, ça ne fonctionne pas. Le problème doit alors sans doute venir de la page. Je stagne sur ce problème depuis un bon moment, je sais que ça ne suit pas trop la règle du jeu du forum, mais quelqu'un pourrait il analyser ma page, en privé, pour voir d'où vient le problème, je nage vraiment là... Merci de votre aide.

J'écrirai quand même la solution à mon problème (si on la trouve...) pour donner suite à ce topic.

Raphael

jeudi 17 août 2006 à 10:33

Hello,

Le plus simple serait de donner l'url de ta page, ça se résoudrait en 5min

Charger

jeudi 17 août 2006 à 18:26

En fait, je suis en train de faire la nouvelle version de mon site, elle n'est donc pas encore en ligne. Mais je viens de mettre la page en question sur le serveur pour que vous puissiez y jeter un oeil: http://v8live.free.fr/accueil3.htm

Merci de votre aide.

Au passage, je ne sais pas si c'est lié mais je n'arrive pas non plus à insérer de lien "page de démarrage".

captain_torche

vendredi 18 août 2006 à 08:47

Bon, dans ta page, je ne vois pas de feuille de style.
Par contre, sur chacun de tes liens textuels, tu as un

HTML

Forcément, étant à l'intérieur de la balise "a", son code sera interprété prioritairement à celui attribué aux liens.

xpatval

vendredi 18 août 2006 à 12:02

CITATION(Charger @ dimanche 13 août 2006, 10h31)

...
Mais rien n'y fait, les liens ne changent toujours pas de couleur au passage de la souris. Le plus bizarre étant que même en créant une page vierge avec Frontpage 2003 et en ayant inséré ce code entre <head> et </head>, les liens que je crée ensuite ne produisent toujours pas l'effet voulu.

Savez-vous d'où peut venir le problème?

Merci d'avance.

Frontpage est déjà un premier problème. La génération du code n'est pas forcément propre. D'ailleurs, en regardant la source de la page que tu donnes en lien, plusieurs remarques s'imposent:

Tu n'as pas de balise <DOCTYPE ...>.
Tu utilises une balise <font> devenue obsolète, et non reconnue.
Chaque fois que tu utilises les propriétés css dans les balises (avec style="..."), tu dois clore avec un ";" (ex: style="text-decoration: none;")

Concernant les css, et puisque tu souhaites les inclure dans ton site (ce qui est bien), il serait préférable des les "externaliser", comme dit précédemment, dans une feuille de style externe, et d'ajouter dans la partie <head></head>:

CODE

où feuille.css sera ta feuille de style.

Enfin, une (tentative de) validation du code html, et des styles css te permettra de voir les erreurs de ta page.
Pour le html, c'est ici.
Pour les css, c'est là.

Bon courage,

xpatval

ghost

vendredi 18 août 2006 à 13:15

Bonjour,

Emplatre sur jambe de bois : mets ton style="text-decoration: none" non pas sur le <span> mais sur <a href="http://ww... C'est a dire :

<a style="text-decoration: none" href="http://ww...

Bon courage

captain_torche

vendredi 18 août 2006 à 13:17

Je me demande surtout ce que viennent faire dans le code, ces text-decoration: none.

PotatoesJunky

vendredi 18 août 2006 à 15:29

CITATION(captain_torche @ vendredi 18 août 2006, 05h17)

Je me demande surtout ce que viennent faire dans le code, ces text-decoration: none.

Je vais peut-être dire une bêtise, mais en appliquant un text-decoration=none, le lien n'apparaît donc pas souligné. Or, comme Charger veut une couleur de soulignement différente de la couleur du lien, ça me semble être la bonne démarche, non ?

Charger

samedi 19 août 2006 à 12:50

J'ai là encore tout essayer mais ça ne donne rien...

ou alors je m'y prend mal.

Quelqu'un accepterait de modifier ma page pour y parvenir? J'ai encore beaucoup à apprendre en HTML et je découvre très vite mes limites. C'est un langage que je suis encore loin de maîtriser. Merci.

Charger

lundi 28 août 2006 à 09:38

J'ai finalement recréer ma page de A à Z mais cette fois-ci sur Dreamweaver et... ça n'a rien à voir! Le code généré est bien plus propre et je n'ai eu aucune difficulté à appliquer l'effet souhaité (voir titre du topic), Dreamweaver le générant lui même très bien en allant dans les propriétés de la page.

Merci encore de vos conseils.

PS: Il me reste cependant deux derniers petits détails à régler : le lien "page de démarrage" qui ne fonctionne pas et un tableau dont les proportions sont différentes selon que la page soit affichée sous Internet Explorer et Firefox. Puis-je en parler dans ce topic ou dois-je en créer deux autres

Jan

lundi 28 août 2006 à 14:14

CITATION(Charger @ lundi 28 août 2006, 10h38)

Il me reste cependant deux derniers petits détails à régler : le lien "page de démarrage" qui ne fonctionne pas et un tableau dont les proportions sont différentes selon que la page soit affichée sous Internet Explorer et Firefox. Puis-je en parler dans ce topic ou dois-je en créer deux autres

Le script de ton lien "page de démarrage" renvoie vers la page http://v8live.free.fr/accueil.html ... qui n'existe pas. ta page est http://v8live.free.fr/accueil.htm (sans le "l" final)
Attention, il me semble que ce script ne marche que sous internet explorer.

Pour ton problème de mise en page des tableaux, je te conseille de créer une nouvelle discussion, le sujet étant très différent de celui de ce topic.

Charger

lundi 28 août 2006 à 15:33

J'ai recréé une nouvelle page sous Dreamweaver dans laquelle le lien indiqué est bien "http://www.v8live.com/accueil.htm". Malheureusement, ça ne fonctionne pas. Quand je clique dessus, rien ne se produit, je reviens en haut de page.

Voici le code en question:

CODE

<a href="#" class="Style6" onClick="this.style.behavior='url #default#homepage)';this.setHomePage('http://www.v8live.com/accueil.htm');"> Page de démarrage</a>

Pour le tableau, je créerai un topic plus tard.

Merci.

Jan

lundi 28 août 2006 à 16:23

Il doit manquer une paranthèse ouvrante dans ton code:

CODE

<a href="#" class="Style6" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.v8live.com/accueil.htm');"> Page de démarrage</a>

Charger

mardi 29 août 2006 à 08:44

Merci!

En effet, il manquait une parenthèse ouvrante avant "#default#homepage)" et il y avait un espace en trop (je ne sais pas si ça joue...). En tout cas, merci de m'avoir ouvert les yeux là dessus.

Je finissai vraiment par croire que c'est moi qui avait encore conçue une page mal programmée et qui n'acceptait alors pas un tel code.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.