Background image passe sous un float

Bonjour,

J'ai la structure suivante:

<div>
  <img ..... />
  <h2>xxxxxxx</h2>
  <p>xxxxxxxxx</p>
</div>

Mon image est en float:left
Mon H2 a une puce en background-image

Je constate que la puce n'est pas décalée en meme temps que le texte du H2 et reste sous l'image.

Quelle solution avons nous pour cela ?

Merci par avance

Peut-être un h2 passé en display:inline ? Vous travaillez en local je pense ? Sans une vision du code c'est difficile à dire...

Bonsoir,

En effet, le display inline corrige mon probleme.
du coup, je perds les valeurs des marges mais le inline-block me permet d'avoir tous les aspects qui m’intéressent.

Je ne travaille pas en local mais sur une url de préprod que je ne souhaite pas diffuser sur les forums pour éviter qu'elle soit aspirée par les spiders
Par contre je peux la donner en privé si nécessaire

Je vais valider la solution sur les différents navigateurs mais à première vue, le pb est résolu.

Merci et bonne soirée.

Salut,

tu as pensé à clear à la fin de la boite de contenu ?

Salut,

Un clear ne me servirait pas dans ce cas, je souhaite que le h2 et sa puce subissent le float, c'est dire soient décalés

La solution donnée plus haut me semble la meilleure

Merci pour vos suggestions.

idem, avec un cms (contao) qui permet (comme tous) de positionner une image en float left à coté d'un texte. Ce texte commence par un H3 avec une puce en background avec une marge gauche négative.

Seul le contenu du h3 est poussé à droite de l'image, la puce restant à gauche du bloc h3 sous l'image… normal.

Solutions testées
- inline = plus de margin ni padding (normal)

- display:inline-block = presque parfait mais si le titre h3 est long, il passe en dessous de l'image, comme si il n'y avait plus de retour à la ligne.

- margin-left sur h3 et p = impossible car nous ne connaissons pas à l'avance la taille de l'image de gauche (cms oblige)

- overflow:hidden sur h3 marche nickel sur FF mais sur chrome/safari, le h3 passe en dessous de l'image ??

Ah en fait ça marche partout avec l'overflow si j'enlève la marge négative sur le h3

…là ça me va mais si quelqu'un à une explication sur ce comportement par rapport la marge négative et ou une autre idée ?
merci
Modifié par gabou (11 May 2013 - 16:14)