couleur et soulignement d'un lien

DanielSorbier · Message par **DanielSorbier** » 11 août 2006, 17:38

Bonjour,
je ne trouve pas comment changer la couleur du texte d'un lien ni le soulignement qui va avec.
J'ai créé deux règles CSS. La première qui défini la position du fond (img gif) sous le texte (dont j'aurai voulu aussi changer la couleur) et la deuxième (hover) qui change la couleur du fond et celle du texte. Dans le deuxième cas cela fonctionne (A part le soulignement qui reste) mais si on ne pointe pas sur ce lien la couleur du texte reste bleue avec le trait de soulignement.
Je voudrai:
"Bonjour" écrit en orange sur fond bleu et
"Bonjour" écrit en bleu sur fond orange lors du survol
Ben voilà si qq peut m'aider ce serait cool.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

Message par **chinon37** » 11 août 2006, 17:50

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 12 April 2005), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
<style type="text/css">
  a { color: #ff6600;
    text-decoration: none;
    background-color: #000099;
    font-size: 20px;
    }

  a:hover { color: #000099;
    background-color: #ff6600;
    }


</style>
  </head>
  <body>
    <a href="#">bonjour</a>
  </body>
</html>

il suffit de définir une régle pour a (lien) et a:hover (survol du lien)

DanielSorbier · Message par **DanielSorbier** » 11 août 2006, 17:56

oui merci mais voilà mon code:
<style type="text/css">
.ma:hover { background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/bt.gif);
background-repeat: no-repeat;
width: 170px;
margin-bottom: 0px;
margin-left: 0px;
height: 20px;
max-height: 20px;
background-position: left bottom;
color: rgb(51, 51, 255) ! important;
font-family: Arial;
font-size: 13px;
line-height: 17px;
text-decoration: none;
margin-top: 0px;
}

.m { background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/bt.gif);
background-repeat: no-repeat;
width: 170px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
height: 20px;
max-height: 20px;
color: rgb(255, 102, 0);
font-family: Arial;
font-size: 13px;
line-height: 17px;
}
Serait-ce alors la partie qui suit que je dois rajouter ?

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

DanielSorbier · Message par **DanielSorbier** » 11 août 2006, 17:58

désolé Non je viens de voir que je l'avais aussi inscrite

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

Mongo Bob · Message par **Mongo Bob** » 12 août 2006, 08:43

Où se situe l'incompréhension, puisqu'il semble y avoir incompréhension?
Chinon37 a bien répondu : il suffit d'inverser les couleurs 1/ de police et 2/de fonds entre les propriétés des a et a:hover concernés.
Si a coul fonds x et coul police y

a:hover coul fonds y et coul police x, c'est simple.
Bon courage.

Oui, mais à la relecture, il semble que ce que tu veux soit + compliqué, la réponse donnée s'applique à :

Daniel Sorbier a écrit :Je voudrai:
"Bonjour" écrit en orange sur fond bleu et
"Bonjour" écrit en bleu sur fond orange lors du survol

En ce qui concerne ce que tu expliques au-dessus de ces quelques lignes, j'ai un peu de mal à suivre.

DanielSorbier · Message par **DanielSorbier** » 12 août 2006, 09:05

Merci de vous soucier de moi.

Le problème c'est que malgré le fait que j'aie défini deux couleurs différentes pour a: et ma:hover la couleur du texte de a reste bleue AVEC un soulignement au lieud 'être orange comme je l'ai demandé.
Lorsque je place la souris sur ce ien, la couleur du fond change, le texte aussi et je n'est pas de soulignement !
Donc m:hover est juste.

Revoilà mon code:
.ma:hover { background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/bt.gif);
background-repeat: no-repeat;
width: 170px;
margin-bottom: 0px;
margin-left: 0px;
height: 20px;
max-height: 20px;
background-position: left bottom;
color: rgb(51, 51, 255) ! important; font-family: Arial;
font-size: 13px;
line-height: 17px;
text-decoration: none;
margin-top: 0px;
}

.a { font-size: 13px;
line-height: 17px;
font-family: arial;
background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/bt.gif);
background-repeat: no-repeat;
width: 170px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
height: 20px;
max-height: 20px;
color: rgb(255, 102, 0) ! important;
text-decoration: none;
}

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

Mongo Bob · Message par **Mongo Bob** » 12 août 2006, 10:14

Alors ce n'est plus ".m" et ".ma:hover", tant mieux parce que c'était un peu louche. Mais ".a" et ".ma:hover" n'est pas mieux, il faut que le système comprenne à quoi il applique le ":hover".
Si tu as un seul style de liens dans tout le site, tu dois avoir "a" (et pas ".a") et "a:hover" en css, c'est tout.
Si tu as plusieurs styles de liens, pourquoi pas, tu crées id ou classe, pour le lien non survolé sous tel ou tel nom, et pour le nom de l'id ou classe du lien survolé tu prends le même nom auquel tu rajoutes strictement : ":hover", comme ça NVU sait marier les 2.
Ex.: "#toto" ou ".toto" avec "#toto:hover" ou ".toto:hover"
A partir de là, tu spécifies les couleurs de fonds et de police que tu veux pour chaque survolé et non survolé.
Je crois que tu peux pas modifier la couleur bleue, parce que NVU ne comprend pas à quoi il doit appliquer l'autre couleur que tu as spécifiée.
De plus, le fait de prendre ".a" comme nom de classe doit ajouter à la confusion par rapport à la balise "a" d'origine.

Message par **chinon37** » 12 août 2006, 10:39

attention!!! :hover n'est reconnu par IE que pour les liens (balise <a>)
donc #toto:hover ou .toto:hover ne sera pas reconnu par IE ( mais le sera par firefox)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

Mongo Bob · Message par **Mongo Bob** » 12 août 2006, 10:43

Si "#toto:hover" ou ".toto:hover" sont des propriétés de lien, ça marche bien sous IE?
Plus exactement :
html :

Code : Tout sélectionner

a id = toto

css :

Code : Tout sélectionner

#toto {...}
#toto:hover {...}

Marche pas sous IE?

Message par **chinon37** » 12 août 2006, 11:05

bonne question!

je n'ai pas testé. je le fais dès que j'ai un moment.... mais d'ici là, quelqu'un aura probablement répondu

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

Mongo Bob · Message par **Mongo Bob** » 12 août 2006, 11:11

Si, je l'ai fait chez moi, IE proteste pas, tu dois bien créer des id ou des classes pour les liens si tu veux différents styles de lien dans le même site.

Invité · Message par **Invité** » 12 août 2006, 11:18

Bon on recommence tout, je deviens fou.
J'ai tenté ce que tu m'as dis. Premier blème, lorsque je crée une règle et que je donne comme nom a il me place automatiquement un point devant. Ensuite je crée a:hover, mais lorsque je veux définir le lien A avec la classe a:hover, cette dernière n'apparaît pas dans la liste des classes existantes. Par contre si je nomme mes règles comme je l'ai fais avant elle est là. ???
Alors, j'avais réussi à créer cela avec mon premier site. Si je reprends (copier/Coller) les définitions de mes liens et que je change simplement le fond d'image, j'ai quand même toujours le texte en bleu et le soulignement.
Si tu regardes sur la page principale de mon site, tu verras que j'avais réussi à obtenir l'effet désiré.
"pos1" est pour l'effet non survolé et "pos1a" pour le survol
Oui je sais c'est fou mais je comprends plus.
Je me souviens que j'avais obtenu un renseignement pour cela il y a quatre mois, mais je ne retrouve plus cette aide.
J'ai mis la nouvelle page en ligne et ainsi tu peux regarder les codes des deux pages.
Celle qui fonctionne; www.money-turf.com
et celle qui ne fonctionne pas (encore):
www.money-turf.com/wfit/wfit.html
Merci encore de prendre du temps pour moi

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

Mongo Bob · Message par **Mongo Bob** » 12 août 2006, 11:21

Je regarde dés que je peux

Invité · Message par **Invité** » 12 août 2006, 11:21

J'ajoute que pour mon premier site avec les définitions que j'avais faites, cela tourne avec IE sans problèmes

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

DanielSorbier · Message par **DanielSorbier** » 12 août 2006, 11:24

Mes excuses à vous, j'avais oublié de me connecter

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

Geckozone

couleur et soulignement d'un lien

couleur et soulignement d'un lien

Qui est en ligne ?