[Résolu]Supprimer le saut de ligne après une ballise h

Bonjour,

Je souhaites pouvoir baliser un sous titre avec une balise h mais qu'il n'y ai pas de saut de ligne après pour que le paragraphe qui suit ce sous-titre commence simplement à la ligne suivante mais pas à la deuxième ligne suivant.

Exemple :

<h3>Suspendisse imperdiet justo nec diam</h3><p>Sed suscipit lacus sit amet orci. Cras lacinia purus sit amet nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta, massa pretium venenatis dictum, elit dui pretium ipsum, sit amet hendrerit urna neque varius lacus. Aenean enim diam, imperdiet a, eleifend sit amet, vulputate eu, nisi. Donec adipiscing odio sed tellus. Fusce quis tellus. Nulla interdum est non risus. Aliquam at felis vel nisi semper vestibulum. Vivamus odio pede, egestas vitae, lacinia euismod, varius vitae, nibh. Donec accumsan lacinia purus. Aliquam posuere purus laoreet risus congue feugiat. Aenean nec diam. Sed hendrerit, massa quis varius sagittis, nulla purus gravida ipsum, ullamcorper tempor lacus urna ac tellus.</p>

Est-ce possible ?

Merci d'avance.
Modifié par hapax (17 Jan 2007 - 14:38)

Salut,

Si j'ai bien compris, il te suffit d'appliquer la règle CSS suivante :

h3 {margin-bottom: 0;}

Modifié par Julien Royer (17 Jan 2007 - 13:27)

S'il s'agit d'une question d'écart (jugé trop important) entre le titre et le paragraphe, il faudra effectivement supprimer ou diminuer les marges du titre ET du paragraphe. Tous les deux devraient avoir une marge par défaut de 1em, ce qui correspond bien visuellement à une ligne de texte.

Si tu veux supprimer tout retour à la ligne après le titre, il faut procéder ainsi :

h3 {display: inline;}

Merci à vous.

La seule chose qui à marché c'est de mettre 0 au margin-bottom du titre et 0 au margin-top du paragraphe.

Le inline ne fonctionne pas et le 1em laisse un espace trop important. En tout cas c'est résolu, merci encore.

hapax a écrit :
Le inline ne fonctionne pas

Voilà qui m'étonne...

hapax a écrit :
et le 1em laisse un espace trop important

Justement, il est possible d'avoir un espace moins important, mais de conserver un léger retrait. Exemple :

h3 {margin-bottom: .2em;}
p.apres-h3 {margin-top: .3em;}

Petite subtilité pour les braves : au lieu d'utiliser une classe "apres-h3" pour identifier le paragraphe qui suit directement le titre, on peut utiliser le sélecteur d'enfants adjacents (pas supporté par Internet Explorer 6, il me semble que ça passe avec IE7) :

h3 {margin-bottom: .2em;}
h3 + p {margin-top: .3em;}

Florent V. a écrit :

Petite subtilité pour les braves : au lieu d'utiliser une classe "apres-h3" pour identifier le paragraphe qui suit directement le titre, on peut utiliser le sélecteur d'enfants adjacents (pas supporté par Internet Explorer 6, il me semble que ça passe avec IE7) :

h3 {margin-bottom: .2em;}
h3 + p {margin-top: .3em;}

Ca c'est puissant ! Dommage que ce sélecteur d'enfants adjacent ne fonctionne pas avec IE6 (qui représente encore 70% de mes visites parmis les IExplorateurs) car ça ouvre de superbes perspectives.

hapax a écrit :
Ca c'est puissant ! Dommage que ce sélecteur d'enfants adjacent ne fonctionne pas avec IE6 (qui représente encore 70% de mes visites parmis les IExplorateurs) car ça ouvre de superbes perspectives.

Mais pour de la gestion fine de design typographique, c'est sympa. On peut choisir de présenter la version « qui va bien » pour IE6, et exploiter les possibilités des autres navigateurs pour leur présenter une version « qui va mieux ».