bug position image sur Firefox
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
bug position image sur Firefox
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
HTML
Merci d'avance pour votre aide o/
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
Re: bug position image sur Firefox
Salut XxSven ,
modifies ta feuille de style il y a un caractère en trop .
Dans le commentaire suivant:
Supprimes le
a++
modifies ta feuille de style il y a un caractère en trop .
- 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:
;
a++
Invité- Invité
Re: bug position image sur Firefox
ça ne marche pas ^^'
J'ai enlevé le ; mais un commentaire ne peut affecter le code non?
J'ai enlevé le ; mais un commentaire ne peut affecter le code non?
Re: bug position image sur Firefox
Re,
désolé pour le retard .
et bien si tu peux toujours avoir une mauvaise interprétation du style .
Tu attribues une position inutile à ton image dans ta feuille de style .
Ta css valide :
Pour un désign j'ai ajouté des bordures de 6px :
a++
désolé pour le retard .
J'ai enlevé le ; mais un commentaire ne peut affecter le code non?
et bien si tu peux toujours avoir une mauvaise interprétation du style .
Tu attribues une position inutile à ton image dans ta feuille de style .
- 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++
Invité- Invité
Re: bug position image sur Firefox
Milouze14 a écrit:
Tu attribues une position inutile à ton image dans ta feuille de style .
- 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
Encore merci pour avoir pris du temps pour mon problème je mets résolu o/
Sujets similaires
» Position d'image dans un post
» Mauvaise position du texte sur une image.
» Position d'une image à côté de la description d'un forum
» Double barre de navigation
» Script "pluie d'image" ne fonctionne pas sous firefox
» Mauvaise position du texte sur une image.
» Position d'une image à côté de la description d'un forum
» Double barre de navigation
» Script "pluie d'image" ne fonctionne pas sous firefox
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum