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

Auteur
migli	# 26 Nov 2007 - 12:54:49
64 Posts	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)
64 Posts
Benjamin D.C.	# 26 Nov 2007 - 12:57:42
Modérateur 2650 Posts	C'est quoi comme genre d'image? Un motif? Une photo? Et que se passe-t-il lorsque le texte change de taille? L'image devrait se rétrécir? Une partie serait cachée? Bref, pas clair tout ça… This is the way, step inside.
Modérateur 2650 Posts
Sebastien D.	# 26 Nov 2007 - 13:05:26
89 Posts	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)
89 Posts
migli	# 26 Nov 2007 - 13:39:57
64 Posts	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.
64 Posts
Sebastien D.	# 26 Nov 2007 - 13:52:39
89 Posts	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)
89 Posts
Necromantik	# 26 Nov 2007 - 14:00:22
244 Posts	Bonjour, sinon on peut mettre le carré dans le span et la ligne dans le hx. <hx> ligne en fond répétée horizontalement <span> carré en fond positionné a droite sans répetition, fond blanc titre </span> </hx> ob_end_flush();
244 Posts
Sebastien D.	# 26 Nov 2007 - 14:05:12
89 Posts	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)
89 Posts
migli	# 26 Nov 2007 - 14:29:22
64 Posts	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
64 Posts
Sebastien D.	# 26 Nov 2007 - 15:15:56
89 Posts	Pas de quoi. Bonne journée également
89 Posts

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles