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,
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,
A voir également:
- Slider header
- Wow slider - Télécharger - Présentation
- Bad pool header ✓ - Forum Windows
- Your browser sent a request that this server could not understand. size of a request header field exceeds server limit. ✓ - Forum Bureautique
- Bad request ... - Forum Réseaux sociaux
- Rgb header c'est quoi - Forum Carte-mère/mémoire
<css>.header
{
z-index: 3;
}</css>
Bonne journée