Slideshow en CSS3 - diplsay:inline qui ne fonctionne pas.

Bonjour a tous,

Je suis entrain de suivre le tuto du site a cette adresse:
http://www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html

Je suis conscient que c'est tout bete.
Le probleme est que le display:inline ne fonctionne pas dans mon cas.
Les images du slideshow se mettent les unes en dessous des autres.
Quelqun aurait il une idée d'ou cela peut venir?

Merci d'avance.

<div id="slideshow">
    <ul id="sContent">
        <li><img src="./Ressources/Images/test1.jpg" alt="test"/></li>
        <li><img src="./Ressources/Images/test2.jpg" alt="test" /></li>
        <li><img src="./Ressources/Images/test3.jpg" alt="test" /></li>
    </ul>
</div>

Le CSS ressemble a ca:

#slideshow {
    position: relative;
    width: 1000px;
    height: 300px;
    /*margin:  20px auto;*/
    /*overflow: hidden;*/
    margin : 10px;
}

#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    margin: 0;            
    padding: 0;
    /*
    animation-name: AutoSlide;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

    -webkit-animation-name: AutoSlide;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    */
}

#sContent li {
    display: inline;
    float : left;
}

@-webkit-keyframes AutoSlide {
    0% {
        left: 0px;
    }
    15% {
        left: 0px;
    }
    35% {
        left: -1000px;
    }
    50% {
        left: -1000px;
    }
    70% {
        left: -2000px;
    }
    85% {
        left: -2000px;
    }
    100% {
        left: 0px;
    }
}


@keyframes AutoSlide {
    0% {
        left: 0px;
    }
    15% {
        left: 0px;
    }
    35% {
        left: -1000px;
    }
    50% {
        left: -1000px;
    }
    70% {
        left: -2000px;
    }
    85% {
        left: -2000px;
    }
    100% {
        left: 0px;
    }
}

Rien de bien folichon en somme, les commentaires ne sont la uniquement parceque j'ai désactivé les animations pour ne pas les voir défiler pendant que je travaillais dessus.
Je bosse sous Chrome actuellement.

salut,
il faut déjà savoir que "float:left" combiner à "display:inline" ne veut pas dire grand chose car le "float" écrasera dans ce cas le "display".
Peut être que tes images sont juste trop grandes ou que tout simplement le "overflow:hidden" que tu as désactivé ne joue plus son rôle.

Bonjour,

Merci de cette réponse.
Le float:left n'était qu'un test pour voir si ca changerait quelquechose mais apparemment pas.
Le overflow est mis en commentaire juste histoire d'etre sur que les images sont les unes en dessous des autres et pas a la meme place...
Je seche completement la dessus.

Pas très normal effectivement..
Sans une page en ligne ou le code de la page il va être difficile de répondre.

J'ai trouvé le probleme, c'était tout bete.
En définissant une taille fixe a sContent, j'empechais les 3 images de se mettre cote a cote.
En supprimant les marges entre les images et en mettant ne largeur de 3000px, les 3 images se sont positionnées cote a cote.

Désolé pour ce post bete du coup.