[Résolu] Bout d'image qui est masqué par le bord de son conteneur

Hello

Attention, je soupçonne une solution très difficile à trouver... me voici pour un problème dont je n'arrive pas à m'en sortir :

J'aide un ami à créer ce site (Joomla avec un template YooTheme)
Vous pouvez voir dans le module de droite qu'une image d'une bougie d'anniversaire doit dépasser de son conteneur. Oui, elle dépasse, mais malheureusement ce qui dépasse est "masqué" car les bords de son conteneur ne permet pas son affichage.

Ce bloc conteneur, a une valeur Overflow:Hidden qui, si je change en Visible résout le problème mais affiche une scrollbar horizontal énorme... !
Comment rendre toute l'image visible ?

ça c'est le css pour le bloc de l'image :

div.imageDeco {
	position: absolute;
	top: 85px;
	right: -45px;
	background-image: url(../../../images/stories/anniversaire1.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 90px;
	height: 90px;
	padding: 0; 
	margin: 0;
	z-index: 500;
}

et le html

<div class="wrapper">
    <div id="middle">   
        <div class="imageDeco"></div>
        .....
    </div>
</div>

Voilà pour ma question, je vous remercie
a+
Modifié par cevichero (13 Dec 2011 - 16:19)

Bonsoir,

A priori la scrollbar qui apparaît provient de la largeur de 200% de la <div> d'ID "middle-expand". Si on retire la règle width: 200%; en même temps qu'on passe la propriété overflow de la <div> d'ID "middle" à visible, aucune scrollbar à l'horizon. Par contre le mise en page en est affectée... J'avoue ne pas trop comprendre la raison de ce 200%...

Pour ne pas chambouler le template mais afficher l'image correctement, le plus simple serait sûrement de la placer relativement à la <div> d'ID "wrapper". Encore faut-il qu'elle garde la bonne position au redimensionnement de la fenêtre.

Merci de ta réponse,
Je pense comme toi, à quoi sert cette "double largeur" ? Bizarre...
Et placer le <div> par rapport à l'id Wrapper, j'avais déjà essayé et selon les résolutions d’écran, l'image bouge donc, ça ne va pas....

C’est pour ça que j'ai créé ce post, car je galère pas mal à ce niveau-là.
Je pense néanmoins qu'il doit être possible de faire quelque chose sans tout chambouler, enfin, j'espère !

Si quelqu'un a une idée, je suis preneur.
merci

Bon, avec l'aide d'un ami j'ai fini par trouver ^^
Il faut élargir le bloc conteneur de la taille de ce qui dépasse, puis supprimer le right négatif du bloc image. Pas si compliqué mais il fallait y penser !!