Problème avec une slideshow

[Sparadra]

Bonjour à vous tous !

Je vous écris ce petit message car je suis totalement perdue. J'ai un modèle de slideshow qui est le suivant :

Code:

 /* SLIDESHOW */

@keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px; /*idem pour attente*/
    }
    100% {
        left: 0px;
    }
}

@-moz-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}

@-webkit-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}

@-o-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}
@-khtml-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -260px;
    }
    35% {
        left: -260px; /*idem pour attente*/
    }
    50% {
        left: -520px;
    }
    60% {
        left: -520px; /*idem pour attente*/
    }
 75% {
        left: -780px; /*idem pour attente*/
    }
 95% {
        left: -780px;
    }
    100% {
        left: 0px;
    }
}
#slideshow {
    position: relative;
    width: 260px;
    height: 260px;
    margin:  20px auto;
  border: 5px solid #ffffff;
    overflow: hidden;
border-style:solid;
border-width:5px;
-webkit-box-shadow: 0px 0px 3px #7a93a4;
-moz-box-shadow: 0px 0px 3px #7a93a4;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=15, Color='#656565', Positive='true');
zoom:1;
box-shadow: 0px 0px 3px #7a93a4;
}
#sContent li {
    display: inline;
}
#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    margin: 0;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
 -webkit-animation-name: AutoSlide;
 -o-animation-name: AutoSlide;
 -khtml-animation-name: AutoSlide;
 -moz-animation-name: AutoSlide;
    animation-duration: 20s;
-webkit-animation-duration: 20s;
 -o-animation-duration: 20s;
 -khtml-animation-duration: 20s;
 -moz-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
 -o-animation-iteration-count: infinite;
 -khtml-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
-webkit-timing-function: ease-in-out;
 -o-timing-function: ease-in-out;
 -khtml-timing-function: ease-in-out;
 -moz-timing-function: ease-in-out;
}

Modèle que j'ai adaptée y intégrer mes deux images de 260x260px :

Code:

<div id="slideshow">
  <ul id="sContent"><!--      
         --><li><img src="http://img1.imagilive.com/0414/Event1.png" alt="Image bleue" /></li><!--    
             --><li><img src="http://img1.imagilive.com/0414/DesignV4.png" alt="Image verte" /></li><!--      
           --><li><img src="http://img1.imagilive.com/0414/Event1.png" alt="Image brune" /></li><!--      
             --><li><img src="http://img1.imagilive.com/0414/DesignV4.png" alt="Image brune" /></li>
  </ul>
</div>

Hors voici le résultat que j'obtiens : http://hikaru-graph-test.forumgratuit.org/t6-header-new#8

Une âme charitable pourrait-elle m'éclairer sur la nature du problème ? ;w;

En vous remerciant par avance pour votre aide !

[Neptunia]

Bonjour ^^


Je ne comprends pas grand chose à votre code mais si j'ai bien compris vous avez 4 images de 260 pixels et votre CSS comporte

#sContent {
position: absolute;
top: 0;
left: 0;
width: 800px;
margin: 0;
padding: 0;
...

Si vous modifiez la largeur (1040 px par exemple) je pense que votre problème sera résolu.

[Sparadra]

Hu, c'était ça. Un grand merci pour ton aide AoF-Neptune ! **

C'était tout bête ;_;