[résolu] Placement texte et titre hX par rapport à une image flottante

Bonjour,

j'ai une image flottante à droite, et ensuite un cadre dans lequel on trouve un h3 et un p. Le p s'adapte bien à l'image et respecte la marge que j'ai donné à l'image, par contre j'ai un border-bottom sur mon h3, qui vient se coller à l'image :

http://tof.canardpc.com/preview/f75cee85-7904-4f55-8b08-75b90a9471f4.jpg

Y a-t-il un moyen de faire en sorte que ce border ne vienne pas se coller à l'image et respecte la marge comme le texte dans le paragraphe dessous ? (Sans passer par une largeur fixe bien sûr)

Merci !
Modifié par gmic7 (04 Nov 2010 - 09:32)

Bonsoir,

gmic7 a écrit :
Le p s'adapte bien à l'image et respecte la marge que j'ai donné à l'image

Non, pas vraiment. Tu peux le constater en appliquant une couleur de fond à ton paragraphe, par exemple. Ton image flottante ne repousse pas les limites du paragraphe lui-même. Seul le texte est repoussé. Il se passe exactement la même chose avec ton titre: seul le texte est repoussé.

gmic7 a écrit :
Y a-t-il un moyen de faire en sorte que ce border ne vienne pas se coller à l'image et respecte la marge comme le texte dans le paragraphe dessous ?

Oui, il faut forcer le titre à adapter sa largeur au flottant. On peut faire ça avec un contexte de formatage. Pour créer un contexte de formatage au niveau de ton titre en CSS, tu peux utiliser la propriété overflow, par exemple avec la valeur hidden.
Modifié par Florent V. (03 Nov 2010 - 19:09)

Exact, j'ai vu ça pour le background après avoir posté.

Merci pour le overflow: hidden, c'est bon.