Problème glissement image

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

Résolu Problème glissement image

Message par Masaru le Jeu 12 Sep 2013 - 17:28

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:

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.defile:hover {
  left: -410px;   /* 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;

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 !


Dernière édition par Masaru le Ven 13 Sep 2013 - 1:51, édité 1 fois

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par wilose le Jeu 12 Sep 2013 - 21:11

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!

wilose
Nouveau membre

Messages : 5
Inscrit(e) le : 25/08/2011

http://no-stress.ogameunivers.com/
wilose a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Masaru le Jeu 12 Sep 2013 - 21:51

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... Mais oui 

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

Merci d'avance !

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Self le Jeu 12 Sep 2013 - 22:00

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 Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Masaru le Jeu 12 Sep 2013 - 22:14

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 ? ^^'...


Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Ellias It le Jeu 12 Sep 2013 - 22:14

Salut,

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

Ellias It
*

Messages : 43
Inscrit(e) le : 30/08/2013

http://forum.forumactif.com
Ellias It a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Masaru le Jeu 12 Sep 2013 - 22:19

Salut !

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

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Ellias It le Jeu 12 Sep 2013 - 23:03

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').

Ellias It
*

Messages : 43
Inscrit(e) le : 30/08/2013

http://forum.forumactif.com
Ellias It a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Masaru le Jeu 12 Sep 2013 - 23:48

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 !! =)

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Ellias It le Ven 13 Sep 2013 - 0:48

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;


Dernière édition par Ellias It le Ven 13 Sep 2013 - 1:11, édité 1 fois

Ellias It
*

Messages : 43
Inscrit(e) le : 30/08/2013

http://forum.forumactif.com
Ellias It a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Masaru le Ven 13 Sep 2013 - 1:11

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 ! =)

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Self le Ven 13 Sep 2013 - 1:16

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 Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Ellias It le Ven 13 Sep 2013 - 1:22

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.

Ellias It
*

Messages : 43
Inscrit(e) le : 30/08/2013

http://forum.forumactif.com
Ellias It a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème glissement image

Message par Masaru le Ven 13 Sep 2013 - 1:51

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

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

Bonne soirée à vous !

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru 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