Empecher message d'être déformée par une image

[Brotherhood]

Bonsoir !

Alors voici mon problème ! Je suis en train de créer une de mes fiches de personnages pour mon forum et j'ai décidé de lui faire une base en image. Celle-ci marche principalement par un système d'images superposées.
Problème dès le début de mon codage, je rencontre une déformation de mes messages. L'image globale qui constitue ma fiche passe par dessus tout ce qui se trouve "sous elle", au lieu d’agrandir bêtement le message.
Une image valant mieux que des explications approximatives :

Spoiler:

Voici un lien plus visible vers le sujet : http://brotherhood.forumactif.fr/t1-votre-1er-sujet#3

J'ai préféré laissé les images telles quelles (dès que j'ai rencontré le problème en fait, qui m'empêche de prévisualiser mon message).

Voici mon code de message :

Code:

<div id="theta">
<img id="img_1" class="thetasup" src="http://img4.hostingpics.net/pics/636667theta1pom.png" alt="..." />
  <img id="img_2" class="thetasup" src="http://24.media.tumblr.com/tumblr_m8cc6fY9Zz1rasb9co1_500.gif" alt="..." />
  <img id="img_3" class="thetasup" src="http://img15.hostingpics.net/pics/936535pompon.png" alt="..." />


</div>



Et le css appliqué :

Code:

.theta {
  position: relative;
}
img.thetasup {
  position: absolute;
}
#img_1 {
    height:700px;
  z-index: 10;
}
#img_2 {
  z-index: 11;
  height: 172px; width: 330px;
}
#img_3 {
  z-index: 12;
}

Je suppose que la solution est bête et méchante et qu'elle ne m'a pas sauté aux yeux (un simple oubli ou un truc que je ne connaissais pas) mais merci d'avance

[Brotherhood]

Up (urgent svp, dernière étape avant réouverture de notre forum )

[no_way]

Bonsoir votre message utilise 3 images, puis-je avoir une description assez précise de ce que vous souhaitez ?

[Brotherhood]

L'image qui "déforme le message" serait en sorte l'image de structure du message ! J'y intègre des images superposées à l'aide de z-index.

Ici par exemple, le gif se retrouverait dans le cadre "vide" et l'image des pompons se mettrait par dessus le gif et le cadre. Mais la disposition n'est pas mon problème... Je ne l'ai juste pas encore faite.

[no_way]

Ah oui je viens de comprendre, votre souci est donc le texte passant sous votre image.
La déformation est due à cette définition:

Code:

img.thetasup {
position: absolute;
}

Un élément passé en positionnement absolu sort du flux.

[Brotherhood]

Mais si je change cette propriété, est-ce que je vais pouvoir malgré ça placer mes images comme je le souhaite ?

[no_way]

oui l'astuce consiste à mettre une div en positionnement relatif et à en indiquer les dimensions, enfin les images pourront, elles, utiliser le positionnement absolu à l'intérieur de la div.

[Brotherhood]

Hummm en fait je dois changer plein de choses dans mes codes ?

[no_way]

Commencez par donner les dimensions de votre grande image à votre div, vous trouverez les choses beaucoup plus faciles après normalement.

[Brotherhood]

Bon alors! Est-ce que j'indique la taille dans la div directement dans le message ou bien dans le CSS (dans la classe "theta") ?
J'ai ensuite mis une position relative dans le CSS à "img.thetasup" et une position absolute pour chacune des images. Mais plus du superposition.

[no_way]

Bon je vous fais une petite explication:
Premièrement, vous n'avez pas donné la classe "theta" à votre div, mais un identifiant nommé "theta".

Les images ayant pour identifiants "img_2" et "img_3" doivent voir leur position réglée en absolu, pas en relatif ! c'est votre div qui doit avoir un positionnement relatif.

donc exit:

Code:

img.thetasup {
position: relative;
}

Si vraiment vous bloquez je vous ferai le code.

[Brotherhood]

Ah oui, mince j'avais oublié (je me mélange rapidement.... Dois-je la changer en classe du coup ? Plutôt qu'en identifiant

Eh bien, j’avais bien déjà mis la position absolue aux deux images et la position relative à la div (on a du mal se comprendre dans le message précédent)

[no_way]

Préférez les classes aux identifiants si vous souhaitez pouvoir mettre plusieurs fois ce cadre dans une même page.

Non votre code css mettait vos images en position relative:

Code:

img.thetasup {
position: relative;
}

Qui plus est aucune instruction de positionnement (left,top...) ne leur est appliquée ex:

Code:

#img_2 {
height: 172px;
margin-top: -45px;
width: 330px;
z-index: 11;
}

Nous nous sommes sans doute mal compris.

[Brotherhood]

Ohlala, on s'est enfin compris ! Ca marche !
L'image ne dépasse plus du message !

Et les positionnements, je me débrouillerai, ça marche en tout cas

Merci beaucoup en tout cas! Comme quoi j'ai encore pas mal d'entrainement à avoir pour du codage simple.

Merci, je crois bien que le problème est résolu

[no_way]

Je t'en prie, bon courage pour la suite alors