Positionnement d'une image à côté d'un titre [RESOLU]

Bonjour à tous,

Je voudrais positionner une image à droite de mon titre, et qu'elle aille jusqu'au bord droit du conteneur.

Le souci est que le texte du titre est de dimension variable.

La logique serait de placer l'image en flottant, mais si elle dépasse du conteneur, elle part à la ligne.

Je vois comment faire en javascript, mais je préfère une solution CSS seul s'il en existe.

Une idée ?


Modifié par migli (26 Nov 2007 - 14:30)

Ce n'est effectivement pas très clair.

Cependant, d'après le schéma l'image n'est qu'un simple bandeau de couleur unie (supposition personnelle).

Une idée qui me vient à l'esprit serait d'utiliser une balise Hx pour ton titre qui prendrait toute la largeur de ta page, et de placer un SPAN autour du texte, qui lui, prendrait uniquement la largeur du texte.

<hx>
  <span>Mon titre</span>
</hx>

Il suffirait alors de placer ton image comme image de fond du Hx et de mettre une couleur de fond blanche dans le SPAN ce qui masquerait l'image de fond au niveau du texte.

J'ai l'impression de ne pas avoir été très clair moi non plus.
Modifié par Sebastien D. (26 Nov 2007 - 13:10)

Désolé pour le manque de clarté ; j'avais placé l'image pour tenter de me faire comprendre. (cliquez dessus pour l'agrandir)

Le texte du titre peut varier (titre 1, titre2 plus long, ...).
A droite du titre, je veux une espèce de ligne, qui va jusqu'au bord droit du conteneur.

Le conteneur a une largeur fixe (930px).

Je pense que Sébastien tu as bien compris le problème. Effectivement j'ai pensé à ta solution, mais j'ai une objection : Sur le bord gauche de ma ligne, j'ai un rectangle noir (dans l'image), qui est différent des hachures qui le suivent.
Si je mets un span avec fond blanc, ça va masquer cette partie de l'image.

migli a écrit :

Effectivement j'ai pensé à ta solution, mais j'ai une objection : Sur le bord gauche de ma ligne, j'ai un rectangle noir (dans l'image), qui est différent des hachures qui le suivent.
Si je mets un span avec fond blanc, ça va masquer cette partie de l'image.

A la limite, en plus de la couleur de fond blanche, tente de mettre ces hachures en image de fond du span.
Modifié par Sebastien D. (26 Nov 2007 - 13:52)

Bonjour,

sinon on peut mettre le carré dans le span et la ligne dans le hx.

<hx>   [i]ligne en fond répétée horizontalement[/i]
  <span>   [i]carré en fond positionné a droite sans répetition, fond blanc[/i]
    titre
  </span>
</hx>

Necromantik a écrit :

sinon on peut mettre le carré dans le span et la ligne dans le hx.

C'est ce que j'essayais de dire juste au dessus
Modifié par Sebastien D. (26 Nov 2007 - 14:09)

Excellent !

Merci beaucoup. J'ai juste ajouté un padding à droite dans le span, et c'est parfait.

Je marque le sujet comme résolu.

Bonne journée

Pas de quoi.

Bonne journée également