Problème glissement image

[Masaru]

Bonjour à tous et à toutes !

Alors voilà j'ai un soucis sur ma P.A : en fait j'ai inséré une image qui glisse et qui laisse apparaître mon contexte, seulement l'image à beaucoup de difficulté à glisser dès qu'on bouge la souris à l'intérieur du cadre. C'est pas évident à comprendre donc voici le lien de mon forum sur lequel vous pourrait tester par vous-même :

http://chosen-light.forumactif.org/

J'ai regardé sur mon CSS d'où pouvait provenir le problème, j'ai essayé de modifier 2/3 trucs mais sans succès hélas...

Voici donc le CSS pour le glissement :

Spoiler:

Merci à vous !

Edit : je précise aussi que l'image ne glisse carrément pas sous firefox... ce qui du coup est encore plus gênant ^^'...

Encore merci !

[wilose]

Bonjour,
au lieu de corriger bêtement ton code j'ai décidé de te laisser te dépatouiller avec un tuto,
la recherche ma pris 27 sec..
bref, bon courage...
pfff!

[Masaru]

Merci.

J'ai tout lu et je ne trouve toujours pas là où le code gêne hélas... car il me semble que toutes les propriétés s'y trouvent, y compris concernant le soucis sous firefox.

Félicitation pour ta recherche très rapide en tout cas...  

Bref, si éventuellement quelqu'un pourrait m'indiquer où ça cloche, car je vois vraiment pas... ^^'.

Merci d'avance !

[Self]

Bonsoir ^^.

Je n'ais pas idée de la résolution générale du problème mais pour le problème de Firefox vous pouvez toujours essayer d'entourer votre code d'un hack firefox:

Code:

@-moz-document url-prefix(){
VOTRE CODE
}

Cordialement .

[Masaru]

Merci ^^

Je viens d'essayer d'utiliser ce code mais ça ne fonctionne pas, au contraire même sous chrome ça supprime l'effet slide : je l'ai placé de cette façon :

Code:

@-moz-document url-prefix(){

div.defile {
  position: relative;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  float: left;
}

div.defile:hover {
  left: -405px;  /* Ici tu dois mettre la largeur de l'image*/
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  }
 
div.texte {
  width: 400px;  /* Ici la largeur de l'image*/
  height: 380px;  /*Ici la hauteur de l'image*/
  position: absolute;
  z-index: 0;
  }

}

Peut-être que je me trompe non ? ^^'...

[Ellias It]

Salut,

Tu pourrais éventuellement mettre le HTML, pour reproduire le problème ailleurs ?

[Masaru]

Salut !

Excuse moi mais j'ai pas compris ta question ^^'... Comment ça reproduire le problème ailleurs ?

[Ellias It]

Hé bien, tu as donné le CSS, mais pas le HTML ... donc si je veux tester ton code chez moi (pour dépatouiller et essayer de trouver le problème), je peux pas x').

[Masaru]

Ah oui excuse moi je suis pas bien réveillé x)

Voilà le HTML :

Code:

<table width="100%"  bgcolor="#d3f4fd">
    <td colspan="3"><center><font size="6"><div class="haut">BIENVENUE</div></font></center></td>
  <tr>
    <td width="30%"><div class="fondpage"><div class="titrepa"><div class="haut">NAVIGATION</div></div><br>




</div> <br><div class="fondpage"><div class="titrepa"><div class="haut">STAFF</div></div>
<br>


</center></div>

    </td>
    <td width="40%"><div class="fondcontexte"><div class="fondpage"><div class="haut">Le Contexte</div></div><div class="defile"><img src="http://img11.hostingpics.net/pics/142476blabl.png" /></div><div class="texte">le soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est làle soucis est là le soucis est là</div>

</div>

    </td>
    <td width="30%"><div class="fondnouv"><div class="titrepa"><div class="haut"> NOUVEAUTÉS </div></div>
<br><marquee behavior="scroll" direction="up" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();" height="135">

</marquee></div>

<span style="font-size: 7px; line-height: normal">(c) Codage de la PA par <a href="http://epicode.bbactif.com">RITS-U</a>. Toute copie intégrale ou partielle est interdite.</span><div class="fondpage"><div class="titrepa"><div class="haut">Top - Sites</div></div><br>

<center>
</div>

    </td>
  </tr>
  <tr>
    <td colspan="3"><div class="fondpage"><div class="titrepa"><div class ="haut">PARTENAIRES</div></div><br>

<marquee> </marquee></div></td>
  </tr>
</table>

<br><br><br><br>

C'est la version test toute simple.

Et voici le reste du CSS pour la P.A :

Code:

.titrepa{
text-align:center;
  padding: 3px;
  background-color: #;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}
.fondpage {
  background-color: #
text-align:justify;
  padding: 5px;
  margin: 5px;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}

.fondnouv {
 height:200px;
text-align:justify;
  padding: 5px;
  margin: 5px;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}

.fondcontexte {
 height:400px;
  overflow:auto;
text-align:justify;
  padding: 5px;
  margin: 5px;
-moz-border-radius:8px; /* Arrondir cadre */
-webkit-border-radius:8px;
border-radius:8px;
border:3px solid #03a370;
}

Merci à toi !! =)

[Ellias It]

Bonsoir,

En remplaçant le CSS que tu nous as envoyé par celui-ci ça devrait aller mieux. Le code est quand même très, très chargé [sans ma modification, je n'ai fait que changer l'application du , et j'ai retirer des lignes de transitions inutiles], il y aurait moyen de condensé tout ça. Enfin ça marche, mais c'est chargé ^^".

NB- Petit détail, pense à utiliser des <br /> au lieu des <br>, c'est pas bien grave, mais c'est une question de sémantique.

Code:

div.defile {
  position: relative;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  float: left;
}
 
div.fondcontexte:hover .defile {
  left: -410px;   /* Ici tu dois mettre la largeur de l'image*/
  }
 
div.texte {
  width: 400px;  /* Ici la largeur de l'image*/
  height: 380px;  /*Ici la hauteur de l'image*/
  position: absolute;
  z-index: 0;

[Masaru]

D'accord super ça va parfaitement sous chrome ! Merci bien =)

Il y a juste sous firefox où l'image ne glisse pas ^^'...

Du coup si je comprend bien, c'est au niveau du hover où ça n'allait pas ? Il ne fallait pas mettre les :
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;

?

En tout cas merci beaucoup ! =)

[Self]

Bonsoir ^^.

Et si dans cette partie on met un !important comme cela:

Code:

div.fondcontexte:hover .defile {
  left: -410px !important;  /* Ici tu dois mettre la largeur de l'image*/
  }

Cordialement .

[Ellias It]

Alors, sous FireFox ça coulisse pas, parce que FireFox est pointilleux ... ._.

Si tu remplaces :

Code:

div.defile {
  position: relative;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  float: left;
}

Par :

Code:

div.defile {
  position: relative;
  left:0px;
  z-index: 10;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  float: left;
}

Ca devrait coulisser, sans avoir d'influences majeures. FireFox veut absolument que la condition sur laquelle il applique la transition (ici "left") soit indiquée en dure, les autres navigateurs sont plus permissifs (pas besoin de !important, en théorie).

Alors, concernant les lignes de transition que j'ai retiré. A la rigueur, elles n'étaient pas dérangeantes, mais elles ne sont pas nécessaires.
En fait, ton code fonctionné très bien, c'est juste que tu appliquais le :hover, sur le div qui contient l'image. Du coup quand tu pointes ta sourie sur l'image, elle commence à coulisser du coup la zone sur laquelle le :hover a une influence bouge aussi, ça fait interférence.
Donc, j'ai appliqué le :hover sur le bloc principal (avec la class fondcontexte), celui qui contient tout, à la fois le titre "Le contexte" et le contexte en question avec l'image. De fait, temps que ta sourie reste dans ce cadre la transition s'effectue et l'image reste hors du cadre.

[Masaru]

Ah d'accord je comprend mieux ! Merci pour les explications !

Merci beaucoup, ça fonctionne très bien ! =)

Bonne soirée à vous !