Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1604 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Débordement d'une image en dehors de l'écran

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Débordement d'une image en dehors de l'écran

n°2212421
Eagles Eye​s
Posté le 02-12-2013 à 20:38:20  profilanswer
 

Salut,
Je souhaiterais faire une animation à l'ouverture de mon site (portes qui coulissent), j'ai utilisé la fonction jquery animate mais quand les portes s'ouvrent dès qu'elles atteignent le bord de la fenêtre l'une d'elle va à la ligne. Je souhaiterais savoir s'il était possible de faire en sorte qu'elles restent sur la même ligne mais que la partie qui sort soit masquée ?  
Si vous voulez voir le problème c'est ici => http://ygleseyes.no-ip.org puis cliquez sur l'image.
 
Merci
 
Eagles ;)


Message édité par Eagles Eyes le 02-12-2013 à 20:39:02
mood
Publicité
Posté le 02-12-2013 à 20:38:20  profilanswer
 

n°2212425
czh
Posté le 02-12-2013 à 22:09:58  profilanswer
 

Les img sont dans le flux du span. Le padding-right de la première porte interfère sur la deuxième porte. Le span est de largeur max "la largeur de l'écran", et les 2 portes + leur padding font au moins plus de 1,1 la largeur de l'écran, donc il y a un saut de ligne dans le flux lorsque les 2 portes ne tiennent plus sur la ligne.
On peut voir le phénomène avec l'inspecteur de code de Google Chrome par exemple.
 
De plus lorsque l'on déplace des éléments dans des positions exotiques, il vaut qu'ils soient en position absolute.
 
J'ai essayé ces modifications du code qui ont l'air de fonctionner :

Code :
  1. function openDoors() {
  2.             $('#leftDoor').animate({marginLeft: "-=512px"}, 2000);
  3.             $('#rightDoor').animate({marginLeft: "+=512px"}, 2000);
  4.         }
  5. <div style="overflow:hidden;width:100%">
  6.  <span class="entrance" onclick="openDoors();">
  7.   <img id="leftDoor" class="entrance" src="img/PorteLeft.png" style="position: absolute; margin-left: -512px;">
  8.   <img id="rightDoor" class="entrance" src="img/PorteRight.png" style="position: absolute; margin-left: 0px;">
  9.  </span>
  10. </div>


Message édité par czh le 02-12-2013 à 22:22:10
n°2212437
Eagles Eye​s
Posté le 02-12-2013 à 23:44:10  profilanswer
 

C'est nickel merci pour ton aide


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Débordement d'une image en dehors de l'écran

 

Sujets relatifs
Menu CSS bouge si changement de résolution d'écran ou zoom[résolu] Mapping d'image sous Zend
texte dans image à écrire en bas de celle-ci [résolu]FPDF : image exactement à 18cm
faire onduler une imageProbléme IMAGE pour mon site
convertir un fichier image raw en format lisibleForcer un plein-écran sans gros avertissement ?
enregistrer image dans BDDcss mettre image en fond d’écran sur tout la page
Plus de sujets relatifs à : Débordement d'une image en dehors de l'écran


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR