Souligner un texte mais que ce trait continu apres le texte

Bonjour,

Je cherche à tout simplement souligner un texte, mais que ce trait continu après le texte comme ici : http://www.developpez.net/forums/d29...e/#post5365794. Par contre, la distance qu'il y a entre la ligne et mon titre ne me convient pas (trop importante, je voudrais une distance beaucoup plus courte) mais je n'arrive pas à modifier cela.

Pour info, j'ai entouré mon <h2> d'un div spécial pour gérer cette longueur de ligne (qui elle me convient parfaitement)

Si vous avez une solution à proposer je suis preneur !

Merci d'avance :)

Je vois deux solutions mais toutes deux soumises aux problèmes liés aux différences entre les polices Windows et Mac, à tester donc pour que ton rendu soit bon un peu partout.

1/ une images de fond dans ton div : 1x1 px, de la couleur de ton choix, où tu vas devoir régler son placement en Y dans ton div :

Code:

---

1 2 3 4

.divTitre { background: url(souligne.gif) repeat-x 0px [placement en Y]px; }

---

2/ un <hr>, dont tu modifie la position en Y également :

Code:

---

1 2 3 4 5

.divTitre hr { position: relative; top: -[placement en Y]px; }

---

Un simple border-bottom sur ton h2 ne suffit pas ? (en réglant évidemment le padding-bottom du h2, plus il est élevé, plus le trait sera éloigné)

@eckerdecker : le coup du hr ne me convient pas, par contre la première idée proposée est presque ok.
J'ai juste remplacé les valeurs en pixel par "bottom left", comme ca je n'ai pas besoin de chercher la position exacte ^^ et le rendu est exactement celui souhaité, merci :)

@Bisûnûrs : j'ai bien essayé mais je n'arrivais pas à rapprocher la ligne du titre (il y avait à mon goût trop d'écart pour un soulignement, et des padding négatifs n'y changeaient rien)


Thank you for your help !

On peut avoir un exemple en ligne de ton problème ? Si ça se trouve tu as un autre style qui entre en conflit, et sans ça on peut pas le deviner.

a plus de problème, comme indiqué :

Citation:

---

par contre la première idée proposée est presque ok.
J'ai juste remplacé les valeurs en pixel par "bottom left", comme ca je n'ai pas besoin de chercher la position exacte ^^ et le rendu est exactement celui souhaité, merci

---

;)


Le topic n'est pas de moi par contre donc je ne peux pas le fermer :o

EDIT : bon c'est vrai qu'après relecture on dirait qu'il persiste je confirme donc qu'avec la modif que j'ai apportée c'est good (je préciserai même qu'il faut penser à donner au div la taille de la ligne qu'on souhaite ! )