CSS : Trait de soulignement de couleur différente du texte ? [Résolu]

Marsh Posté le 11-09-2002 à 11:43:29

Salut,
Comment feriez vous pour obtenir un texte d'une couleur souligné d'une autre couleur.
Exemple COUCOU ou le texte serez noir et le trait de soulignement rouge ...
Merci pour vos astuces
TZ

Message édité par tripanozoma le 11-09-2002 à 14:09:20

Reply

Marsh Posté le 11-09-2002 à 11:43:29

Reply

Marsh Posté le 11-09-2002 à 12:07:15

<html>
<head>

<style type="text/css">

a:link { color: black; text-decoration: none }
a:hover { border-bottom: 1px solid red }

</style>
</head>

<body>
<a href="ton_lien">coucou</a>
</body>

</html>

Message édité par LexTuhor le 11-09-2002 à 12:08:31

Reply

Marsh Posté le 11-09-2002 à 12:09:36

Bien vu, mais le problème c'est que le trait continue sur toute la ligne malgré la balise de fin.
...

Reply

Marsh Posté le 11-09-2002 à 12:11:14

il me semblait que seul Opera permettait un soulignement d'une couleur différente :??:
(parce qu'ici border-bottom s'applique au paragraphe plutôt qu'au lien lui-même, non ?)

Message édité par antp le 11-09-2002 à 12:11:37

Reply

Marsh Posté le 11-09-2002 à 12:14:01

TripanoZoma a écrit a écrit :

Bien vu, mais le problème c'est que le trait continue sur toute la ligne malgré la balise de fin.
...

Quoi ? :heink:

Comment ça il continue ?? montres ton code... :heink:

Message édité par LexTuhor le 11-09-2002 à 12:21:12

Reply

Marsh Posté le 11-09-2002 à 12:20:31

J'ai retesté, pas de problème même si le lien est entre plusieurs mots (testé avec IE 5.5, mozilla 1, et opera 6.04) :

<html>

<head>

<style type="text/css" media="screen">
a:link { color: black; text-decoration: none }
a:hover { border-bottom: 2px solid red }
a:visited { color: black; text-decoration: none }
</style>
</head>

<body>
<p>bon voici un <a href="ton lien">test</a> boudiou...</p>
</body>

</html>

Message édité par LexTuhor le 11-09-2002 à 12:21:01

Reply

Marsh Posté le 11-09-2002 à 12:25:19

ouais mais ça fait moche, le soulignement est pas le même que le text-decoration: underline

Reply

Marsh Posté le 11-09-2002 à 12:29:08

Ah ben ça c'est pas mon problème... :lol: On pose une question, j'y répond, mais après si c'est pas beau... [:turk182]

Reply

Marsh Posté le 11-09-2002 à 13:04:35

span {
color: black;
text-decoration: underline;
}

a {
color: red;
text-decoration: none;
}

<span><a href="ton_lien">coucou</a></span>

Reply

Marsh Posté le 11-09-2002 à 13:30:07

Merci pour vos codes... Mais le truc c'est que ça n'est pas un lien mon texte.
POur ce qui est des couleurs ce n'est qu'un exemple et puis ce n'est pas moi qui suis responsable de la charte graphique. (Texte : "navy" et Souligné : "Orange" ).

Pour lextuhor :
Voici mon code
<h4 style="border-bottom: 1px dashed orange">TEXTE</h4>
J'essaierai avec un DIV ou un SPAN de retour au boulot. (Code à destination uniquement pour IE 5 ou +, (intranet))

Reply

Marsh Posté le 11-09-2002 à 13:30:07

Reply

Marsh Posté le 11-09-2002 à 13:35:52

Ben tu peux adapter mon exemple à ce que tu veux :

h4 {
color: #ff9900;
text-decoration: underline;
}

h4 span {
color: navy;
}

<h4><span>TEXTE</span></h4>

Reply

Marsh Posté le 11-09-2002 à 14:10:34

Ayé, j'ai trouvé .. avec Span ça fonctionne .
<span style="border-bottom: 1px dashed orange">TEXTE</span>
Sinon avec les balises de paragraphes (Hx, P etc) ça souligne la ligne entière.
Merci pour vos aides précieuses.
TZ :hello:

Reply

Marsh Posté le 11-09-2002 à 14:24:02

Pour la solution avec border-bottom et pour que ça marche avec avec les <hX> il faut les redéfinir comme élément en-ligne.

h4 {
border-bottom: 1px dashed orange;
display: inline;
}

Reply

Marsh Posté le 11-09-2002 à 14:25:22

gm_superstar a écrit a écrit :

Pour la solution avec border-bottom et pour que ça marche avec avec les <hX> il faut les redéfinir comme élément en-ligne.

h4 {
border-bottom: 1px dashed orange;
display: inline;
}

Merci pour l'info, très interessant.
Sincèrement,
TZ

Reply

CSS : Trait de soulignement de couleur différente du texte ? [Résolu]

Sujets relatifs:

Leave a Replay