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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Brotherhood le Dim 16 Sep 2012 - 22:59

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 Mr. Green


Dernière édition par Brotherhood le Mar 18 Sep 2012 - 22:44, édité 1 fois

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Lun 17 Sep 2012 - 22:46

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

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Lun 17 Sep 2012 - 22:53

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

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Lun 17 Sep 2012 - 22:55

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.

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Lun 17 Sep 2012 - 23:00

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.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Lun 17 Sep 2012 - 23:11

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

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Lun 17 Sep 2012 - 23:20

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.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Lun 17 Sep 2012 - 23:58

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

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Mar 18 Sep 2012 - 0:19

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

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Mar 18 Sep 2012 - 20:33

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.

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Mar 18 Sep 2012 - 20:46

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.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Mar 18 Sep 2012 - 21:07

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)


Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Mar 18 Sep 2012 - 21:14

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.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par Brotherhood le Mar 18 Sep 2012 - 22:43

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 Smile

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 What a Face

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Empecher message d'être déformée par une image

Message par no_way le Mar 18 Sep 2012 - 22:44

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

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum