jQuery Serialscroll Problème CSS

Question

J'ai un très gros problème avec une implémentation de serialscroll. Je l'ai défini de manière à ce que chaque élément de liste ait une largeur de 100%, pour que le diaporama se déroule en plein écran.

Vous pouvez consulter le code complet ici: http://www.reverenddan.net/so/

Le CSS est assez simple:

#slideshow { 
width: 100%; 
height:100%; 
margin: 0; 
padding: 0; 
position:absolute; 
overflow:hidden; 
} 

#slideshow ul { 
width: 800%; 
height:100%; 
margin: 0; 
padding:0; 
} 

#slideshow li { 
width:12.5%; 
height:100%; 
margin: 0; 
padding: 0; 
float:left; 
list-style: none; 
} 

et le code HTML correspondant:

<div id="slideshow"> 
       <ul> 
        <li id="slide1"><img class="centered" src="img/beetle.png" width="344" height="380" /></li> 
        <li id="slide2"><img class="centered" src="img/beetle.png" width="344" height="380" /></li> 
        <li id="slide3"><img class="centered" src="img/beetle.png" width="344" height="380" /></li> 
       </ul> 
      </div> 

Ce tout fonctionne un régal, mais Si vous redimensionnez la fenêtre sur la deuxième ou la troisième image, les éléments de la liste contenant les images semblent être redimensionnés à un rythme différent de celui de la fenêtre du navigateur ntered. J'ai utilisé un peu de jquery pour aligner verticalement les images, mais je pensais que le texte: align: center et 100% width serait suffisant pour les maintenir en place.

Toutes les pensées seraient grandement appréciées, je suis au bout de mes doigts!

Answer 1

Essayez de changer #slideshow d'utiliser une largeur fixe, positionnement relatif, et une marge automatique gauche et à droite, ce qui devrait avoir pour effet de centrage (et son contenu):

#slideshow{ 
    position: relative; 
    height: 100%; 
    width: 900px; 
    margin: 0 auto; 
    padding: 0; 
    overflow:hidden; 
} 

Changer la largeur 900px Je suggère ci-dessus quelque chose de plus petit si vous n'allez pas utiliser des images aussi larges.