bug position image sur Firefox

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

Résolu bug position image sur Firefox

Message par XxSven le Ven 29 Juin 2012 - 23:13

Bonsoir,

Je suis actuellement en train de faire un menu sur ce forum d'essai :
Nintendo'Play essai

J'ai finis de placer une image par dessus du texte pour le tableau crédit, et l'image s'enlève bien au survol de la souris comme je le voulais pour afficher le texte sur google chrome.

Mais problème, l'image sur Firefox est déplacé sur la droite :
Firefox


Google Chrome



Le code qui m'a permis de faire ça :

CSS
Code:
 .translate {
  height: 139px;
  width: 182px;
  background: #CECECE;
  overflow: hidden;
  position:relative;
 }
 
 .translate img {
        -moz-transition: all 1s ease-in-out;
  -webkit-transition: all1s ease-in-out;
  transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
    position:absolute;
  top:0px;
  }
 
.translate:hover img {
  -moz-transform: translate(182px, 139px); /* XX=largeur de ton image pour un  déplacement horizontal; YY=hauteur de l'image pour déplacement vertical */
  -webkit-transform: translate(182px, 139px);
  -o-transform: translate(182px, 139px);
  -ms-transform: translate(182px, 139px);
  transform: translate(182px, 139px);
}

HTML
Code:
 <table class="inform"><tr><td><div class="translate">
<img src="http://i.imgur.com/dRKpA.png">
<p>

<h3><blockquote>Nintendo'Play</blockquote></h3>
<ul>
<li>Forum fondé par Nano</li>
<li>Menu créé par XxSven</li>
<li>Traite principalement de<br/>
l'actualité Nintendo.</li>
<li> Forum optimisé pour <br/>Google Chrome
et Firefox.</li>
<li>Tous droits réservés.</li></ul>

</p>
</div>
</td></tr></table>


Merci d'avance pour votre aide o/


Dernière édition par XxSven le Dim 1 Juil 2012 - 0:43, édité 1 fois

XxSven
*

Masculin
Messages : 49
Inscrit(e) le : 06/06/2012

http://nintendo-play.pro-forums.fr/
XxSven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bug position image sur Firefox

Message par Milouze14 le Sam 30 Juin 2012 - 10:11

Salut XxSven ,

modifies ta feuille de style il y a un caractère en trop Wink .

Code:
.translate:hover img {
-moz-transform: translate(182px, 139px); /* XX=largeur de ton image pour un  déplacement horizontal; YY=hauteur de l'image pour déplacement vertical */
-webkit-transform: translate(182px, 139px);
 -o-transform: translate(182px, 139px);
-ms-transform: translate(182px, 139px);
transform: translate(182px, 139px);
}

Dans le commentaire suivant:
Code:
 /* XX=largeur de ton image pour un  déplacement horizontal;
YY=hauteur de l'image pour déplacement vertical */

Supprimes le
Code:
;
Wink



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4561
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bug position image sur Firefox

Message par XxSven le Sam 30 Juin 2012 - 15:23

ça ne marche pas ^^'

J'ai enlevé le ; mais un commentaire ne peut affecter le code non?

XxSven
*

Masculin
Messages : 49
Inscrit(e) le : 06/06/2012

http://nintendo-play.pro-forums.fr/
XxSven a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: bug position image sur Firefox

Message par Milouze14 le Sam 30 Juin 2012 - 20:18

Re,
désolé pour le retard Embarassed .

J'ai enlevé le ; mais un commentaire ne peut affecter le code non?

Wink et bien si tu peux toujours avoir une mauvaise interprétation du style Wink .

Tu attribues une position inutile à ton image dans ta feuille de style Wink .
Code:
position:absolute;
  top:0px;

Ta css valide :
Code:
.translate {
height: 139px;
width: 182px;
background: #CECECE;
overflow: hidden;
position:relative;
  -webkit-border-radius: 6px;
border-radius: 6px;
}
       
.translate img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
  -webkit-border-radius: 6px;
border-radius: 6px;

}
       
.translate:hover img {
-moz-transform: translate(182px, 139px);
-webkit-transform: translate(182px, 139px);
-o-transform: translate(182px, 139px);
-ms-transform: translate(182px, 139px);
transform: translate(182px, 139px);
}

Pour un désign j'ai ajouté des bordures de 6px :
Code:
-webkit-border-radius: 6px;
border-radius: 6px;

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4561
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bug position image sur Firefox

Message par XxSven le Dim 1 Juil 2012 - 0:41

@Milouze14 a écrit:

Tu attribues une position inutile à ton image dans ta feuille de style Wink .
Code:
position:absolute;
  top:0px;


Merci!

c'est bien ça qui faisait tout bugger, j'ai rectifier avec un left: 0px; mais je suppose qu'on pouvait aussi tout simplement effacer le top: 0px; ...
Pour le design je vais voir ce que ça donne Razz

Encore merci pour avoir pris du temps pour mon problème je mets résolu o/

XxSven
*

Masculin
Messages : 49
Inscrit(e) le : 06/06/2012

http://nintendo-play.pro-forums.fr/
XxSven 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