Image dans le titre effet banderole.

[Hathorus]

Bonjour,

Après plusieurs essai et recherche je me (re)tourne vers vous pour essayé de trouver un solution
Voila mon problème: j'ai réussi a intégrer une image (background) dans le titre de mes articles mais le problème c'est qu'elle prend toute la longueur a la place de s'arrêter a la fin du titre
De plus est-il possible d'ajouter a la fin de cette image une autre image (qui ne se répète pas) pour avoir un effet banderole.

Merci.

[Hathorus]

Re : Image dans le titre effet banderole.

Voici un exemple de ce que j'essaye de faire:



J'ai volontairement mis un espace pour voir correctement les 2 image

PS: je travail sur joomla 2.5

[Hathorus]

Re : Image dans le titre effet banderole.

Petit up

[Hathorus]

Re : Image dans le titre effet banderole.

re petit up

[webcrea]

Re : Image dans le titre effet banderole.

trouve la classe de la div qui encapsule ton titre et supprime le width:100%

[Hathorus]

Re : Image dans le titre effet banderole.

Merci pour ta reponse:

trouve la classe de la div qui encapsule ton titre et supprime le width:100%

donc je viens de regarder avec Firebug mais il n'y a pas de div qui encapsule le titre avec un width:100% ... d'ailleurs c'est pour ca que j'ai dure a trouver une solution

[webcrea]

Re : Image dans le titre effet banderole.

tu as un lien vers ton site?

[Hathorus]

Re : Image dans le titre effet banderole.

oui le voici mon site ne fait pas attention je suis encore en cour de création

[lomart]

Re : Image dans le titre effet banderole.

Bonsoir,

Il va falloir faire un override des articles car la structure des titres ne permet pas de faire ce que tu veux.
Il faut quelque chose du style
<h2><span class="bordgauche"></span><span class="centre">titre</span><span class="borddroit"></span></h2>
avec les css qui correspondent
.bordgauche {width:30px; background:url("../images/bordgauche.png") no-repeat;}
.borddroit {width:30px; background:url("../images/borddroit.png") no-repeat;}
.centre {background:url("../images/centre.png") repeat-x;}