Decalage et superposition d'images
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Decalage et superposition d'images
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 :
Et le CSS qui le complète
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
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
Dernière édition par Brotherhood le Mar 25 Sep 2012, 16:58, édité 1 fois
Re: Decalage et superposition d'images
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 */
Re: Decalage et superposition d'images
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
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
Re: Decalage et superposition d'images
Bon, je vais mettre en résolu, tant pis pour l'explication.
Merci quand même !
Merci quand même !
Sujets similaires
» Décalage de la dernière catégorie, comparée aux autres + décalage des forums à l'intérieur des catégories.
» Superposition de Background
» Problème de superposition d'images
» Superposition de 2 adresses mail
» Superposition de deux image
» Superposition de Background
» Problème de superposition d'images
» Superposition de 2 adresses mail
» Superposition de deux image
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum