Discussion :

[Ahmedleo01]

Bonjour les amis, je suis nouveau en programmation Web et en développant un site Web j'ai rencontre un problème. En effet mon diaporamo cache mon menu déroulant. SVP aidez moi

Voici mon code HTML & CSS

Code HTML :

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
<ul>
            <li><a href="index.html" class="menu">ACCUEIL</a>
                <ul class="submenu">
                    <li><a href="pizzaiolo.html">Pizzaiolo</a></li>
                    <li><a href="haramous.html">Club House Haramous</a></li>
                    <li><a href="Allo.html">Allo Pizza</a></li>
                </ul>
            </li>
            <li><a href="pizza.html" class="menu">PIZZAIOLO</a>
                <ul class="submenu">
                    <li><a href="profile">Profil</a></li>
                    <li><a href="goal.html">Objectif</a></li>
                    <li><a href="team.html">Equipe</a></li>
                    <li><a href="sale.html">Point de Vente</a></li>                    
                    <li><a href="culture.html">Culture</a></li>
                </ul>
            </li>
            <li><a href="#" class="menu">MENUS</a>
                <ul class="submenu">
                    <li><a href="pizzaiolo.html">Menu de PIZZAIOLO</a></li>
                    <li><a href="haramous.html">Menu de Club House</a></li>
                    <li><a href="Allo.html">Menu de ALLO PIZZA</a></li>
                </ul>
            </li>
            <li><a href="#" class="menu">CONSOMMATEUR</a>
                <ul class="submenu">
                    <li><a href="community.html">Communauté</a></li>
                </ul>
            </li>
            <li><a href="contact.html" class="menu">CONTACT-NOUS</a></li>
        </ul>
        <div class="slider">
            <div class="slides">
                <div class="slide"><img src="images/diapo/1.jpg" alt=""></div>
                <div class="slide"><img src="images/diapo/2.jpg" alt=""></div>
                <div class="slide"><img src="images/diapo/3.jpg" alt=""></div>
                <div class="slide"><img src="images/diapo/4.jpg" alt=""></div>
            </div>
        </div>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul li{
    float: left;
    width: 192px;
    height: 40px;
    background-color: rgb(245, 9, 9);
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
}
ul li a{
    text-decoration: none;
    color: white;
    display: block;
}
.submenu a{
    color: black;
    background-color: greenyellow;
}
.submenu a:hover{
    background-color: black;
    color: white;
}
.menu:hover{
    color: yellow;
}
ul li ul li{
    visibility: hidden;
    border-bottom: 1px solid black;
}
ul li:hover ul li{
    visibility: visible;
}
.slide{
    float: left;
}
.slides{
    width: calc(960px * 4);
    animation: glisse 10s infinite;
}
.slider{
    width: 960px;
    overflow: hidden;
}
@keyframes glisse {
    0% {
        transform: translateX(0);
    }
    12,5% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-960px);
    }
    37,5% {
        transform: translateX(-960px);
    }
    50% {
        transform: translateX(-1920px);
    }
    62,5% {
        transform: translateX(-1920px);
    }
    75% {
        transform: translateX(-2880px);
    }
    87,5% {
        transform: translateX(-2880px);
    }
    100% {
        transform: translateX(0);
    }
 
}

[NoSmoking]

Bonjour,
problème d'empilement que tu peux résoudre simplement en ajoutant au CSS de l'élément <ul> une position:relative et un z-index:1.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
 
    z-index: 1;
    position: relative;
}

[Ahmedleo01]

Ca marche merci énormément vous m'avez sauve. Si c'est pas trop vous demandez j'aimerais vous poser un autre question. En faite je voudrais ajouter un texte sur chaque image de mon slider et je sais pas comment faire, vous pourriez m'aidez ?

[NoSmoking]

Je te propose de modifier légèrement la structure HTML comme suit

Code html :

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
<div class="slider">
  <div class="slides">
    <figure class="slide">
      <img src="images/diapo/1.jpg" alt="">
      <figcaption>Titre image #1</figcaption>
    </figure>
 
    <figure class="slide">
      <img src="images/diapo/2.jpg" alt="">
      <figcaption>Titre image #2</figcaption>
    </figure>
 
    <figure class="slide">
      <img src="images/diapo/3.jpg" alt="">
      <figcaption>Titre image #3</figcaption>
    </figure>
 
    <figure class="slide">
      <img src="images/diapo/4.jpg" alt="">
      <figcaption>Titre image #4</figcaption>
    </figure>
  </div>
</div>

il faut ajouter un peu de CSS pour que cela fonctionne, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
figure {
  position: relative;    /* pour servir de référent */
}
figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 2.5em;
  color: white;
  background-color: rgba(255,255,255,.3);
}

le texte s'affichera en bas de l'image.

Nota: pour la gestion de l'animation tu peux jeter un oeil à : Diaporama avec défilement automatique

[Ahmedleo01]

Vous m'aidez vraiment beaucoup je ne saurais jamais vous remercier.