Bonjour,

J'ai essayé d'adapter un tuto pour un slder en CSS3, mais je me retrouve, sans que cela fonctionne, avec mes deux bandeaux l'un au dessus de l'autre...

Merci de votre aide ?

le code HTML:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div id="slidebanner">
<ul id="sContent">
<li><a href="https://www.monsite.com" target="_blank"><img src="https://www.monsite/bannierre-haute-1.jpg" alt="Nouveau site 1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
<li><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/bannierre-haute-2.jpg" alt="Mon site 2, découvrez ce site !" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
</ul>
</div>

le CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
@keyframes AutoSlide {
from 0s to 0s, from 0s to 3s {
left: 0px; /*1ère image*/
}
from 3s to 3s, from3s to 6s {
left: -1100px; /*2ème image*/
}
}
#slidebanner {
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#sContent li {
display: inline;
}
#sContent {
position: absolute;
top: 0;
left: 0;
width: 1100px;
margin: 0;
padding: 0;
/*CSS3 keyframes animation*/
animation-name: AutoSlide;
-webkit-animation-name: AutoSlide;
-moz-animation-name: AutoSlide;
-o-animation-name: AutoSlide;
animation-duration: 6s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
}
Merci d'avance !