Souligner les entêtes

Bonjours à tous et à toutes.

Je veux souligner mes h1, h2... par un trait assez gras et pointillé.
underline ne me donne aucun choix.
En utilisant border j'arrive à peu près à ce que je veux faire avec le soucis que mon trait se prolonge jusqu'a la fin de la boîte alors que j'aurais aimé qu'il ne s'arrête qu'au texte.

Si je met display:inline sur mon h1, ça me fait sauter toutes mes marges.

Quelqu'un as-t-il une idée ?

D'avance merci.

Bonjour et bienvenu sur le Forum ...

Comme tu l'as toi-même testé, underline ne se traduit que par un seul et unique syle : un trait fin continu de la couleur de la police. Ce n'est donc pas le bon choix.

La propriété border quant à elle te laisse un choix plus conséquent, qui correspond bien à ce que tu recherches. C'est donc cette propriété que tu vas utiliser.
Cependant, elle s'applique à l'ensemble du bloc que constitue tes titres : ils ont par défaut un rendu de type bloc, c'est à dire qu'ils occupent tout l'espace horizontal.

Le rendu inline ne sera pas pertinent, car il dit au composant de ce comporter comme un élément du texte, ce qui interdit toute marge, autre que latérale.

Il te reste donc deux solutions :
- Soit tu affectes un largeur fixe à te titres (width : 250px; par exemple), ce que je déconseillerais car tes titres n'auront certainement pas tous la même longueur...
- Soit et c'est ce que je privilégierais, tu donnes un comportement de flottant à tes titres (float:left;) et tu t'assures que les éléments qui suivent ne viendront pas s'aligner sur la même ligne même s'il y a de la place (clear:left;)

Voilà ...
Je pense que ça devrait te satisfaire
Modifié par Cygnus (06 May 2007 - 22:24)

Merci pour ton accueil et tes réponses pertinentes.

J'ai mis :

h1 {
	border-bottom: 2px dotted #999;
	margin-left: 0.5em;
	padding-left: 0.5em;
	margin-right:1em;
	float:left;
	clear:left;
}

Les éléments suivants viennent se caler à côté des titres, comme si le clear:left n'avait pas d'effet.

L'instruction clear:left; indique à l'élément que rien ne peut venir se placer à sa gauche.
Il ne s'agit donc pas de le mettre sur ton titre, mais sur l'élément qui suit (généralement un paragraphe). Cela l'obligera à se placer en-dessous, pour être tout à gauche.

Parfait !

Exactement ce que je cherchais.

Merci beaucoup Cygnus !

odr a écrit :
Parfait !

Exactement ce que je cherchais.

Ne manque donc plus qu'un petit [Résolu]
dans le titre du sujet ...

odr a écrit :
Merci beaucoup Cygnus !

Mais de rien du tout

Pour ma part j'aurais plutôt rajouté un span autour du texte du titre. Ça fait du code HTML en plus, mais une gestion des styles facilitée.