Slider qui se superpose au header
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour, après avoir mis mon slider, il se placer au dessus de mon header (qui est en <css>position: fixed;</css>)
voici le code de mon slider, et le code CSS de mon header
slider
<html><style>
.slider {
width: 500px;
overflow: hidden;
/* margin: 200px ;*/
position: relative; top: 300px;
position: relative; left: 85px;
}
.slide {
float: left;
}
.slides {
width: calc(500px * 3);
animation: glisse 30s infinite
}
@keyframes glisse {
0% {
transform: translateX(0);
}
33% {
transform: translateX(-500px);
}
66% {
transform: translateX(-1000px);
}
100% {
transform: translateX(0);
}
}
</style>
<body>
<div class="slider">
<div class="slides">
<a href="photos.html" ><div class="slide"><img src="yes/5.jpg" alt="" /></div></a>
<a href="photos.html" ><div class="slide"><img src="yes/2.jpg" alt="" /></div></a>
<a href="photos.html" ><div class="slide"><img src="yes/4.jpg" alt="" /></div></a>
</div>
</div>></html>
et voici le code de mon header:
<css>header /*bandeau haut*/
{
position: fixed;
left: 0;
top: 0;
width:100%;
height: 111px;
background-color: rgb(47, 164, 231);
}</css>
Les deux fonctionne très bien et le header se positionne au dessus de tout sauf le slider,
--
Merci de votre reponse la plus rapide possible, (il ne me reste plus que une semaine),
Lermie12
voici le code de mon slider, et le code CSS de mon header
slider
<html><style>
.slider {
width: 500px;
overflow: hidden;
/* margin: 200px ;*/
position: relative; top: 300px;
position: relative; left: 85px;
}
.slide {
float: left;
}
.slides {
width: calc(500px * 3);
animation: glisse 30s infinite
}
@keyframes glisse {
0% {
transform: translateX(0);
}
33% {
transform: translateX(-500px);
}
66% {
transform: translateX(-1000px);
}
100% {
transform: translateX(0);
}
}
</style>
<body>
<div class="slider">
<div class="slides">
<a href="photos.html" ><div class="slide"><img src="yes/5.jpg" alt="" /></div></a>
<a href="photos.html" ><div class="slide"><img src="yes/2.jpg" alt="" /></div></a>
<a href="photos.html" ><div class="slide"><img src="yes/4.jpg" alt="" /></div></a>
</div>
</div>></html>
et voici le code de mon header:
<css>header /*bandeau haut*/
{
position: fixed;
left: 0;
top: 0;
width:100%;
height: 111px;
background-color: rgb(47, 164, 231);
}</css>
Les deux fonctionne très bien et le header se positionne au dessus de tout sauf le slider,
--
Merci de votre reponse la plus rapide possible, (il ne me reste plus que une semaine),
Lermie12
A voir également:
- Slider header
- Wow slider - Télécharger - Présentation
- Slider html ✓ - Forum CSS
- Photo slider - Télécharger - Photo & Graphisme
- 400 bad request request header or cookie too large - Forum Windows
- Bad pool header ✓ - Forum Windows
<css>.header
{
z-index: 3;
}</css>
Bonne journée