Boutons prev et next absent/css 3 pur need solution

Bonjour,

Je pense que mon post est assez clair.
En fait mon code marchait il y a quelques jours, j'ai néttoyé mon code css et zut j'ai dû retirer qlq chose...
alors voici mon code HTML:

<div id="tabrates">
<table class="grilleslide">
<tr>
<td>
<div id="slideshow">
<div id="s1">
<div id="s2">
<div id="s3">
<div id="s4">
<div id="s5">
<div id="s6">
<div id="s7">
<a class="next next1" href="#s2"><img src="images/jpg/plus.jpg" width="32" height="32" alt="plus"/></a>
<a class="prev prev2" href="#s1"><img src="images/jpg/minus.jpg" width="32" height="32" alt="minus"/></a><a class="next next2" href="#s3"><img src="images/jpg/plus.jpg" width="32" height="32" alt="plus"/></a>
<a class="prev prev3" href="#s2"><img src="images/jpg/minus.jpg" width="32" height="32" alt="minus"/></a><a class="next next3" href="#s4"><img src="images/jpg/plus.jpg" width="32" height="32" alt="plus"/></a>
<a class="prev prev4" href="#s3"><img src="images/jpg/minus.jpg" width="32" height="32" alt="minus"/></a><a class="next next4" href="#s5"><img src="images/jpg/plus.jpg" width="32" height="32" alt="plus"/></a>
<a class="prev prev5" href="#s4"><img src="images/jpg/minus.jpg" width="32" height="32" alt="minus"/></a><a class="next next5" href="#s6"><img src="images/jpg/plus.jpg" width="32" height="32" alt="plus"/></a>
<a class="prev prev6" href="#s5"><img src="images/jpg/minus.jpg" width="32" height="32" alt="minus"/></a><a class="next next6" href="#s7"><img src="images/jpg/plus.jpg" width="32" height="32" alt="plus"/></a>
<a class="prev prev7" href="#s1"><img src="images/jpg/minus.jpg" width="32" height="32" alt="minus"/></a>
<ul id="sContent">
<li><img src="images/jpg/global.jpg" alt="room view"/></li><li><img src="images/jpg/room.jpg" alt="room other side view"/></li><li><img src="images/jpg/brown.jpg" alt="room bedding"/></li><li><img src="images/jpg/closet.jpg" alt="closet"/></li><li><img src="images/jpg/orangeb.jpg" alt="room view"/></li><li><img src="images/jpg/room_typec.jpg" alt="bedding"/></li><li><img src="images/jpg/room_typeb.jpg" alt="room view"/></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>

les images plus.jpg et minus.jpg n'apparaissent pas au dessus de mon slider. Je désire les remettre
sur la 1ère photo à 10px du bord gauche et celui de droite, centré en hauteur par rapport à l'image principale.

Code CSS:

#slideshow{position:relative;/*le parent positionné*/width:600px;/*limite en largeur (1 élément du slideshow)*/height:450px;/*limite en hauteur*/margin:0px;overflow:hidden;/*on cache ce qui déborde*/}
#slideshow a img{border:none;}
#sContent{position:absolute;/*on sort l'élément du flux*/top:0;/*on le positionne précisément dans ...*/left:0;/*l'angle haut gauche de son parent positionné*/width:7200px;/*ou 300% car 4 éléments*/margin:0;padding:0;z-index:10;
/*CSS3 transition*/-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
#sContent li{display:inline;/*on aligne les éléments du slideshow*/}
#slideshow.next,#slideshow.prev{position:absolute;right:50px;top:200px;margin:10px;z-index:16;}
#slideshow.prev{left:0;}
#slideshow.next{right:0;}
/* initialisation */
#slideshow.next,#slideshow.prev{display:none;}
#slideshow.next1{display:block;}
/* Vers 1ère étape */
#s1:target#sContent{left:0;}
#s1:target.next,#s1:target .prev{display:none;}
#s1:target.next1{display:block;}
/* Vers 2ème étape */
#s2:target#sContent{left:-600px;} /*ou -100%*/
#s2:target.next,#s2:target.prev{display:none;}
#s2:target.next2,#s2:target.prev2{display:block;}
/* Vers 3ème étape */
#s3:target#sContent{left:-1200px;} /*ou -200%*/
#s3:target.next,#s3:target.prev{display: none;}
#s3:target.next3,#s3:target.prev3{display:block;}
/* Vers 4ème étape */
#s4:target#sContent{left:-1800px;}
#s4:target.next,#s4:target.prev{display:none;}
#s4:target.next4,#s4:target.prev4{display:block;}
/* Vers 5ème étape */
#s5:target#sContent{left:-2400px;}
#s5:target.next,#s5:target.prev{display:none;}
#s5:target.next5,#s5:target.prev5{display:block;}
/* Vers 6ème étape */
#s6:target#sContent{left:-3000px;}
#s6:target.next,#s6:target.prev{display:none;}
#s6:target.next6,#s6:target.prev6{display:block;}
/* Vers 7ème étape */
#s7:target#sContent{left:-3600px;}
#s7:target.next,#s7:target.prev{display:none;}
#s7:target.next7,#s7:target.prev7{display:block;} 

Merci
Modifié par 6l20 (18 May 2014 - 11:19)

Désolé de te contredir mais non ce n'est pas clair.

Le code sort d'où ? d'un CMS ?
Qu'est ce que tu appelle des boutons next/prev pur css?

Mets ton code dans les balises code prévue à cet effet. Et rajoute un screen de ce que tu veux.

Bonjour,

la solution pour la prochaine fois, enfin pour éviter d'avoir à nouveau le problème de "ça fonctionnait et là ça ne fonctionne plus mais si seulement je savais ce que j'ai modifié", c'est d'utiliser un outil de versionnement comme SVN ou git (ou n'importe lequel, vraiment).
C'est la seule manière efficace de travailler à plusieurs mais même sur un projet où l'on travaille tout seul, ça constitue un backup de toutes les modifications depuis le début du projet !
À mon avis le temps passé à apprendre à se servir de TortoiseSVN (sur Windows) ou d'un client git est bien plus utile et moins frustrant que de s'arracher les cheveux sur quelque chose qui a eu fonctionné...