[Résolu] Superposition d'images

Bonjour,

J'ai moi-même réalisé mon site web mais j'ai un problème de design que je ne suis pas arrivé à résoudre malgré tout ce que j'ai pu lire.

J'utilise sur ma page d'accueil une sorte d'encart pour décrire le contenu d'un rectangle de couleur. Je me suis inspiré des bulles de bandes dessinées qui rattachent un texte à un personnage.

Dans mon cas, je souhaite faire en sorte que la hampe de la bulle (une image issue d'un sprite) soit affichée au-dessus du rectangle de couleur, de façon à joindre le remplissage de la hampe avec le remplissage du rectangle.


Dans l'image ci-dessus, je souhaite faire passer le petit triangle au-dessus du rectangle violet pour que le liséré foncé donne l'impression de faire le tour du rectangle et du triangle.

Je suis conscient qu'il n'est pas évident de décrire le problème et qu'il faut visiter la page et utiliser Firebug ou un équivalent pour voir de quoi il retourne, mais si un expert CSS pouvait me dire où j'ai fauté, ça me serait grandement utile.

Merci bien.
Modifié par vodoomoth (08 Feb 2012 - 23:40)

J'ai cherché bien dix minutes avant de comprendre le bug. J'étais sûr que tu avais utilisé du positionnement absolu pour tes triangles, parce que c'est tout simplement la chose à faire, et je ne comprenais pas pourquoi tu avais du top:-54px pour placer un triangle en haut de son parent. En fait tu as utilisé du positionnement relatif.

Donc:
- Le positionnement absolu serait plus adapté ici.
- Il faudra positionner le conteneur (#bubble_container) en relatif si qu'il serve de référent pour positionner les triangles.
- Le conteneur est en overflow:hidden. Lorsque tes images dépassent en haut du conteneur, la partie qui dépasse est masquée comme demandée, ce qui t'empêche d'obtenir ton effet visuel.

Alléluia! Ça marche! Merci infiniment. Si jamais tu as un besoin de traduction ou de relecture, refais-moi signe!

Bon, il est évident que je viens d'étaler mon ignorance de toutes les subtilités de CSS, mais j'en suis bien content.

En fait, il aura suffit d'enlever le "overflow:hidden" et de rajouter 2 pixels à la hauteur du conteneur.
Modifié par vodoomoth (08 Feb 2012 - 23:44)