Problème SlideShow CSS3

Bonjour à tous.
Après avoir découvert le tuto de Geoffrey C pour un slideshow css,
qui est très chouette par ailleurs, j'ai eu le problème suivant:

Quand je clique sur un des liens "next" ou "prev", ma position par rapport à la page change.
Ainsi, avant de cliquer je vois le haut de ma page, un peu de texte, et en dessous mon slideshow.
Puis, après avoir cliqué, ma page remonte de telle sorte que mon slideshow se retrouve collé
en haut, masquant mon haut de page.

Voici le code du slideshow:

<div id="slideshow">
            <div id="s1">
                <div id="s2">
                    <div id="s3">
                        <div id="s4">
                            <div id="s5">
                                <div id="s6">
                                    <div id="s7">
                                        <div id="s8">
                                            <div id="s9">
                                                <div id="s10">
                                                    <a class="next next1" href="#s2"></a>
                                                    <a class="prev prev2" href="#s1"></a> - <a class="next next2" href="#s3"></a>
                                                    <a class="prev prev3" href="#s2"></a> - <a class="next next3" href="#s4"></a>
                                                    <a class="prev prev4" href="#s3"></a> - <a class="next next4" href="#s5"></a>
                                                    <a class="prev prev5" href="#s4"></a> - <a class="next next5" href="#s6"></a>
                                                    <a class="prev prev6" href="#s5"></a> - <a class="next next6" href="#s7"></a>
                                                    <a class="prev prev7" href="#s6"></a> - <a class="next next7" href="#s8"></a>
                                                    <a class="prev prev8" href="#s7"></a> - <a class="next next8" href="#s9"></a>
                                                    <a class="prev prev9" href="#s8"></a> - <a class="next next9" href="#s10"></a>
                                                    <a class="prev prev10" href="#s9"></a>
                                                    <ul id="sContent"> 
                                                        <li><img src="img/ss/animal_1.jpg" alt="animal1.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_2.jpg" alt="animal2.jpg"/></li><!-- 
                                                        --><li><img src="img/ss/animal_3.jpg" alt="animal3.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_4.jpg" alt="animal4.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_5.jpg" alt="animal5.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_6.jpg" alt="animal6.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_7.jpg" alt="animal7.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_8.jpg" alt="animal8.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_9.jpg" alt="animal9.jpg" /></li><!-- 
                                                        --><li><img src="img/ss/animal_10.jpg" alt="animal10.jpg" /></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

J'ai l'impression que ce peut être les liens vers mes classes (href="#sx") qui en soit la cause, mais comment résoudre ça?

Merci d'avance!

Bonjour,

Je suppose que ce code fait référence aux premières expérimentations de Geoffry (2010)
Pour pouvoir, éventuellement, vous dire ce qui cloche, il faudrait au minimum avoir l'entièreté de vos codes (HTML/CSS et/ou JavaScript) et dans l'idéal une page en ligne...

Geoffrey a, depuis lors, commis d'autres amusements, le dernier en date (2011), a ma préférence sur celui sus-mentionné :
Créer un slideshow automatique et contrôlable

Gardez en tête qu'il s'agit d'expérimentations, de ne pas l'utiliser si vous avez besoin de rétro-compatibilité, et de surtout lire les conseils, les mises en garde et autres informations de l'auteur (ainsi que les commentaires)

Sachez enfin, que le tutoriel commence un peu à dater (en temps web, c'est un ancêtre ) et que vous pourrez sans doute trouver d'autres slideshows sur la vaste toile, expérimentant les nouveautés des langages HTML5 et CCS3, ou utilisant d'autres techniques, ce choix se fera en fonction de vos besoins.

Bon courage.
Modifié par 6l20 (23 Jan 2014 - 16:48)