5542 sujets

Sémantique web et HTML

Bonjour à tous !
Je ne sais pas si je suis dans le bon forum, toujours est-il que j'aurais besoin de vos lumières pour m'éclairer.
Je cherche à faire un "slideshow", dans le même type que celui-ci : http://madeuplife.forumactif.org/t47-modele-de-presentation

Malheureusement, et après de longues heures de recherche, mon code ne me donne toujours pas le résultat attendu...

<div id="slideshow"> 
    <div id="s1">
        <div id="s2">
                <center><a class="next next1" href="#s2" id="lien">FT. SARAH BOLGER</a></center> 
                <center><a class="prev prev2" href="#s1" id="lien">RETOUR</a></center>
                <div id="sContent"> 
				dhsfbhsjfhsj
                </div>

        </div>
    </div>
</div>

<style>
#lien{
color:#FFFFFF;
padding-top:220px;
padding-left:13%;
padding-right:13%;
}
#slideshow {
    position: relative;   
    width: 200px;          
    height: 300px;         
    margin: 30px;
    overflow: hidden;  
	background-image:url("http://img11.hostingpics.net/pics/733365large.jpg");
}
#sContent {
    position: absolute; 
	opacity:0.5;
	width: 200px;          
    height: 300px; 
	background-color:#FFFFFF;
    top: 0;               
    left: 0;              
    width: 300px;         
    margin: 0;            
    padding: 0;
    z-index: 10;
    
        -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#sContent li {
    display: inline;      
}

#slideshow .next, #slideshow .prev {
    position: absolute;
    top: 65px;
    z-index: 20;
}
#slideshow .prev { left: 0; }
#slideshow .next { right: 0; }


#slideshow .next, #slideshow .prev { display: none; }
#slideshow .next1 { display: block; }


#s1:target #sContent { left: 0px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: block; }


#s2:target #sContent { top: 100%; } 
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }


</style>


Merci à ceux qui pourront m'aider !
Modifié par versailles (23 Jan 2016 - 14:22)