[resolu]Soulignement double

Bonjour,

Je voudrai faire apparaître sous certains mots, un soulignement double.
J'ai essayé avec cette méthode :

.souligne_double
{
border-bottom-style: double;
}

Le problème est que le soulignement est trop épais.
Si je modifie l'épaisseur (border-bottom-width) soit ou ne vois plus le double trait, sois c'est encore plus épais.

Existe t'il un autre moyen?
Peut-être avec un lien souligné en double, mais je n'ai pas trouvé comment faire.

Merci
Modifié par GuillaumeL (31 Aug 2006 - 10:33)

Salut.

Tu pourrais combiner le soulignement normal & une bordure :

HTML :
<span class="double">soulignement double</span>

Style :
span.double {
    text-decoration: underline;
    border-bottom: 1px solid #000;
}

En tous cas, sous Firefox & Opera ça fonctionne.

Salut SOPO,

Je n'avais pas pensé à cette solution.
Effectivement cela fonctionne bien sous Firefox, mais pas sous I.E, et comme 80% des utilisateurs sont sous I.E, ça pose pb.

Je ne deséspère pas, quelqu'un aura peut-être une autre idée.

Merci à toi
Guillaume

Je viens de regarder sous IE 6, et ça fonctionne

a écrit :
C'est un bug amusant, qui combine haslayout et position de l'élément en fin de contenu ou non

Mignon comme tout, effectivement
Modifié par Sopo (30 Aug 2006 - 20:11)

Sopo a écrit :
Mignon comme tout, effectivement

Tu sais, on s'y attache, à force, à ces petits bugs...

Oh oui, je sais, je commence à être contaminé par haslayout à mon tour. Et ce salon est un véritable foyer d'infection

En retestant avec le code de Laurent Denis, ça marche également sous I.E6.

Mais comme je n'y connais pas grand chose en css, pouvez-vous m'expliquer toutes ces suptilités

Merci pour votre aide

Une dernière question, (oui je sais, j'abuse)

est-ce faisable avec un lien ?

Oui, ça a l'air de fonctionner sans problème en remplaçant le span par un lien. Dans les mêmes conditions, évidemment

ça fonctionne sous Firefox, mais pas sous i.e6, comme tout à l'heure.

<style>
span.double {
    text-decoration: underline;
    border-bottom: 1px solid #000;
}

<a href="gers.htm" target="_blank">lien double</a>

mais comme le css m'a l'air très compliqué(je n'ai pas compris tous vos messages) ,
il doit sans doute y avoir une astuce.

Merci à vous
Modifié par GuillaumeL (30 Aug 2006 - 22:54)

Une astuce, je ne sais pas. Mais dans le code que tu donnes, il y a un problème de sélection : écrit comme cela, la règle CSS s'applique toujours aux spans avec la classe double.

Pour l'appliquer aux liens, il faut modifier aussi le CSS :

/* Règle CSS */
[b]a[/b].double {
    text-decoration: underline;
    border-bottom: 1px solid #000;
}

<!-- Code html -->
<a href="gers.htm" target="_blank" title="..." [b]class="double"[/b]>lien double</a>

Si tu souhaites utiliser ce soulignement double pour des liens & pour du texte simple, il suffit d'utiliser la classe sur des span & sur les liens, comme ceci :

/* Règle CSS */
.double {
    text-decoration: underline;
    border-bottom: 1px solid #000;
}

<!-- Code html -->

<!-- Texte simple -->
<p>Ici un morceau de texte <span class="double">souligné 2 fois</span>.</p>

<!-- Lien hypertexte -->
<a href="gers.htm" target="_blank" title="..." class="double">lien double</a>

Edit : pour que ça fonctionne sous IE 6, il faut que celui-ci soit en mode de rendu strict, ce qui implique que tu utilises un doctype correct et que tu renonces au prologue xml. Après, je te renvoie au post de Laurent ci-dessus
Modifié par Sopo (31 Aug 2006 - 00:45)

Je te remercie pour tes explications, le problème venait du Doctype.
Cela fonctionne parfaitement.

Merci de votre patience à toi et à Laurent