Saut de ligne conditionnel

Bonjour,

j'ai le pb suivant :
un titre h1 de longueur variable et un h2 itou

je voudrais que si les deux peuvent tenir sur la largeur du contenant ils soient sur la mm ligne, sinon un saut de ligne entre les deux, quelque soit celui qui fait dépasser.

Pour l'instant si je met mes titres en display inline le h2 commence à la fin du h1 et se poursuit sur la ligne suivante et je ne trouve pas ça esthétique.

merci pour vos conseils

Hello.

Un float:left sur tes titres ne fait pas l'affaire?

merci mais non ça le fait pas mon image d'arrière plan disparait c'est une des raisons qui fait que je préfère éviter de sortir du flux

Bonjour, pour ton problème d'image de fond, la vérité est ailleurs. Il faut Empêcher les flottants de dépasser de leur conteneur

Ensuite tout fonctionnera Nickel. Elle est pas belle la vie?

oui pour l'image ça marche très bien, j'avais pas encore utilisé ce truc d'overflow c'est super efficace merci j'ai encore appris qq chose

maintenant autre problème qui survient : le h1 est en rockwell 44px et le h2 en georgia italic 28px et du coup quand ils sont sur la mm ligne le h2 n'est pas sur la mm ligne horizontale que le h1

j'ai testé des vertical align, line-height mais j'arrive pas à un résultat correct, et je veux éviter les marges pour pas avoir un truc moche si ça passe à la ligne

à part les marges je ne vois pas. Pour une fois que la fusion des marges servirait à quelque chose .

/edit : bah si: réduire la hauteur sur le h1, et tout descendre grâce à un padding du parent?
Modifié par kustolovic (16 Mar 2012 - 13:13)

Hello,

Ça va être difficile avec du float.

Solutions:
1. display:inline-block et white-space:nowrap. Pas terrible si jamais un titre est plus large que la ligne.
2. display:inline-table.

Le deuxième a l'air nickel. À noter que ça a l'air d'empêcher la fusion des marges (comme inline-block?), donc on fera gaffe aux marges utilisées mais ça devrait pas être rédhibitoire.