Decalage et superposition d'images

2 participants

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

Résolu Decalage et superposition d'images

Message par Brotherhood Dim 23 Sep 2012, 17:11

Bonsoir !

Me revoila, avec un problème de codage dans mon message pour mes scénarios de postes vacants.
Voici un lien pour un premier aperçu :
http://brotherhood.forumactif.fr/t1-votre-1er-sujet#4 (3eme message du sujet)
Jusque là j'avais réglé tous mes problèmes de superpositions d'images et d'image de fond pour que tout fonctionne bien. Seulement, depuis que j'ai rajouté des éléments (en l’occurrence, du texte), j'ai remarqué que je n'arrivais plus à "remonter" mon gif et mon image de pompons après qu'ils se soient décalés vers le bas. Même quand j'ai rajouté un élément situé en dessous de lui (alors qu'on aurait pu penser que c'était le problème). Au début, j'étais obligée de régler à chaque fois dans le CSS afin de les redécaler (sauf que maintenant, j'en suis arrivée à un point où les margin ne fonctionne plus).

Bref, je ne sais pas si le problème vient de mes div, de mon css ou des valeurs que je donne à mes nouveaux éléments mais j'espère que vous verrez rapidement ma bêtise.

Voici mon code html pour le message :

Code:
<div class="theta" >
<img id="img_1" class="thetasup" src="http://img15.hostingpics.net/pics/822724theta1.png" alt="..." />

<p style="position:absolute;z-index:11;top:52px;left:170px;height:5px;" class="pvlibre">Ce personnage est [color=green][b][u]LIBRE[/u][/b][/color]</p>

<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="..." / >

<p style="position:absolute;z-index:13;top:360px;left:240px;height:10px;">Adison Connor </p>


</div>



Et le CSS qui le complète

Code:
/* Postes vacants */

.theta {
  position: relative;
      height:700px;
}
img.thetasup {
  position: absolute;

}
#img_1 {
    height:700px;
  z-index: 2;

}
#img_2 {
  z-index: 3;
  height: 175px; width: 330px;
  position: absolute;

  margin-bottom:-725px;
  margin-left:95px;
          -webkit-transform: rotate(-9deg);
          -moz-transform: rotate(-9deg);
          -ms-transform: rotate(-9deg);
          -o-transform: rotate(-9deg);
          transform: rotate(-9deg);
}
#img_3 {
  z-index: 4;
  position: absolute;
    margin-bottom:-800px;
  height:102px;
  width:126px;
}


.pvlibre{
            -webkit-transform: rotate(-9deg);
          -moz-transform: rotate(-9deg);
          -ms-transform: rotate(-9deg);
          -o-transform: rotate(-9deg);
          transform: rotate(-9deg);
          font-family:Times New Roman,Georgia,Verdana,serif;

}

/* fin */

J'ai essayé de varier les valeurs de marges etc (margin-top, margin-bottom négatif, tailles limitées des éléments) mais rien à faire...

Merci d'avance, en espérant avoir une réponse rapide Smile



Dernière édition par Brotherhood le Mar 25 Sep 2012, 16:58, édité 1 fois
Brotherhood

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: Decalage et superposition d'images

Message par Scoubifitz Lun 24 Sep 2012, 10:02

bonjour,

Code:
<div class="theta" ><p class="pvlibre">Ce personnage est [b]LIBRE[/b]</p><img id="img_2" src="http://24.media.tumblr.com/tumblr_m8cc6fY9Zz1rasb9co1_500.gif" alt="..." /><img id="img_3" src="http://img15.hostingpics.net/pics/936535pompon.png" alt="..." / ></div>
[center]Adison Connor[/center]

Code:
/* Postes vacants */
.theta {
position: relative;
background: #C6E38D url(http://img15.hostingpics.net/pics/822724theta1.png) top left no-repeat;
height:300px;
}
#img_2 {
height: 170px;
width: 330px;
position: absolute;
margin-top:70px;
margin-left:95px;
}
#img_3 {
position: absolute;
margin-top:90px;
height:102px;
width:126px;
}
#img_2,.pvlibre{
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
transform: rotate(-9deg);
font-family:Times New Roman,Georgia,Verdana,serif;
}
.pvlibre {
position:absolute;
top:20px;
left:140px;
}
.pvlibre strong {
text-decoration:underline ;
color:green;
}
/* fin */
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Decalage et superposition d'images

Message par Brotherhood Lun 24 Sep 2012, 10:39

Bonjour !

Tout d'abord merci pour la réponse.

J'ai remplacé mes codes par ceux-là mais malheureusement ça n'a pas changé. J'ai agrandi la hauteur à 700 px de la class "theta" car l'image était coupée. Cela dit ça ne règle pas le problème : je ne peux toujours plus bouger l'image "3" et de plus, maintenant l'image de fond se répète

EDIT: et le texte "Adison Connor" ne doit pas sortir de la div vu qu'il doit être superposé à l'image de fond également...

EDIT2: en fait, il faut décaler l'image 3 avec un "top : 50px" (exemple) et non un margin-top. Pourtant l'image 2 est déplacée par une marge. Pourquoi cela varie entre les deux images ?
Du coup, mon problème est résolu, mais pouvez-vous m'expliquer brièvement vos modifications dans le CSS afin de comprendre si je dois rajouter des éléments et que le problème recommence ?

Sinon pour le fond répété, en fait ce n'était pas ça le problème. C'est juste que la couleur de fond n'était pas exactement la bonne Smile
Brotherhood

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: Decalage et superposition d'images

Message par Brotherhood Mar 25 Sep 2012, 16:58

Bon, je vais mettre en résolu, tant pis pour l'explication.

Merci quand même !
Brotherhood

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.

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

- Sujets similaires

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