Menu déroulant apparent devant bannière

Invité · 21/04/2021, 14h37

Bonjour.

Je sollicite une nouvelle fois votre aide car je dois réaliser mon site (je le fais avec HTML CSS + Bootstrap).

Je comptais finir ma mise en page avec un menu déroulant à l'intérieur du menu ... Simple jusque-là mais ledit menu déroulant vient à se cacher derrière l'image/bannière d'en dessous.
J'aimerais aussi que les élements du menu principal soient alignés sur la même ligne (actuellement, sur deux lignes).

Pour le menu déroulant, j'ai utilisé le z-index et un position : relative ... sans succès !

Des idées pour conclure ce projet de site et finaliser les derniers détails ?

Merci d'avance.

HTML :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
  <nav class="menu">
    <ul>
        <li><a href="Accueil.html" class="logoAccueil">Accueil</a></li>
        <li><a href="Présentation.html">Ma présentation</a></li>
        <li><a href="Apprentissages.html">Mes apprentissages</a></li>
        <li><a href="Compétences.html">Mes compétences</a></li>
 
          <li class="deroulant"><a href="Créations.html">Mes créations</a>
            <ul class="sous">
              <li><a href="Projets Personnels.html">Projets personnels</a></li>
              <li><a href="Projets Scolaires.html">Projets scolaires</a></li>
            </ul>
          </li>
 
          <li class="deroulant"><a href="Veille technologique.html">Ma veille technologique</a>
            <ul class="sous">
              <li><a href="La Cybersécurité, kézako.html">La cybersécurité, kézako ?</a></li>
              <li><a href="Problématiques.html">Problématiques</a></li>
              <li><a href="Contexte.html">Contexte</a></li>
              <li><a href="Solutions.html">Solutions</a></li>
              <li><a href="Conclusions.html">Conclusions</a></li>
              <li><a href="Sources.html">Sources</a></li>
 
            </ul>
          </li>
 
        <li><a href="Contact.html" class="logoContact">Contact</a></li>
 
      </ul>
    </nav>
 
    <!--DEBUT BANNIERE-->
  <div class="container-fluid banner">
    <div class="ban">
      <img src="img/dev.jpg" alt="bannière du site" class="img">
    </div>
    <div class="inner-banner">
      <h1>Bienvenue sur mon portfolio</h1>
    </div>
 
  </div>
<!--FIN BANNIERE--> 
 
 
</body>
</html>

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@charset "utf-8";
 
/* font-family: 'Ubuntu', sans-serif; */
 
body, html
{
    padding: 0;
    margin: 0;
}
 
body{
    font-family: "Tangerine";
    src : url("font/Tangerine-Regular.ttf") format("ttf"); 
}
/* 1 - LE MENU PRINCIPAL */
 
.menu{
    width: 100%;
    margin: 0 auto;
    background-color: red;
    position: sticky;
    top: 0px;
}
 
.menu ul{
    list-style-type: none;
}
 
.menu ul li{
    float: left;
    width: 25%;
    text-align: center;
    position: relative;
    z-index: 1000;
}
 
.menu ul::after{
    content: "";
    display: table;
    clear: both;
}
 
.menu a{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
    color : #EFF6F2;
    margin-right: 20px ;
}
 
.menu a:hover{
    color: orange;
    border-bottom: 2px solid gold;
}
 
.logoAccueil
{
    color : #E0605A;
    font-weight: bold;
    text-transform : uppercase;
    letter-spacing : 1px;
    float: left;
}
 
.logoContact
{
    color : #E0605A;
    font-weight: bold;
    text-transform : uppercase;
    letter-spacing : 1px;
    float: left;
}
 
 
/* 2 - LE MENU DEROULANT */
 
.sous{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-image: url("img/dev.jpg");
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    z-index: 1000;
}
 
nav > ul li:hover .sous{
    display: block;
}
 
.sous li{
    float: none;
    width: 100%;
    text-align: left;
}
 
.sous a{
    padding: 10px;
    border-bottom: none;
}
 
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}
 
.deroulant > a::after{
    content:" ▼";
    font-size: 12px;
}
 
 
 
/* 3 - LA BANNIERE */
 
.banner
{
    width: 100%;
    max-width: 100%;
}
 
.ban
{
    width: 100%;
    max-width: 100%;
    position: absolute;
}
 
.ban img
{
    width : 100%;
    max-width: 100%;
}
 
.inner-banner
{
    position: absolute;
    top: 40%;
    width:100%;
    text-align: center;
}
 
.inner-banner h1
{
    color: #EFF6F2;
    text-shadow: 1px 1px 20px #000000;
}

**NoSmoking** · 22/04/2021, 08h24

Bonjour,
je trouves qu'il y a trop d'éléments en position:absolute dans ta page et quelques maladresses, mais il faudrait que tu commences par mettre un z-index sur ton élément <nav class="menu">.

Pour le menu déroulant, j'ai utilisé le z-index et un position : relative ... sans succès !

A toutes fins utiles : Ce que personne ne vous a jamais dit à propos de z-index

Invité · 26/04/2021, 22h24

C'est fait, merci ! J'ai mis le z-index du menu sur 1 et celui du déroulant sur 2, c'est bon ? En tout cas, il est visible chez moi.

Par contre, les titres du menu déroulant viennent se superposer les uns sur les autres, ce qui les rend illisibles. Une idée ?

Nom : 1.PNG
Affichages : 81
Taille : 4,1 Ko

Autre chose, le menu vient à déborder sur ma bannière comme ceci :

Nom : 2.PNG
Affichages : 74
Taille : 5,7 Ko

Alors qu'il devait être aligné comme ceci :

Nom : 3.PNG
Affichages : 72
Taille : 4,3 Ko

Je ne trouve pas la solution ce soir ...

**NoSmoking** · 28/04/2021, 11h15

J'allais essayé de te faire une réponse détaillée mais ... beaucoup de point à corriger dans ton CSS d'après moi, comme

Modification de sélecteur ;
Suppression de largeur ;
Déplacement des padding ;
Suppression et/ou déplacement de margin ;
...

donc je préfère te fournir un « template » de menu qui se rapproche très fort, avec quelques modifications, de ce que tu cherches à faire.

Sur base du HTML suivant, en reprenant tes items :

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
<nav class="sticky-top">
    <ul class="menu">
        <li><a href="Accueil.html">Accueil</a></li>
        <li><a href="Présentation.html">Ma présentation</a></li>
        <li><a href="Apprentissages.html">Mes apprentissages</a></li>
        <li><a href="Compétences.html">Mes compétences</a></li>
        <li class="dropdown"><a href="Créations.html">Mes créations</a>
            <ul>
                <li><a href="Projets Personnels.html">Projets personnels</a></li>
                <li><a href="Projets Scolaires.html">Projets scolaires</a></li>
            </ul>
        </li>
        <li class="dropdown"><a href="Veille technologique.html">Ma veille technologique</a>
            <ul>
                <li><a href="La Cybersécurité, kézako.html">La cybersécurité, kézako ?</a></li>
                <li><a href="Problématiques.html">Problématiques</a></li>
                <li><a href="Contexte.html">Contexte</a></li>
                <li><a href="Solutions.html">Solutions</a></li>
                <li><a href="Conclusions.html">Conclusions</a></li>
                <li><a href="Sources.html">Sources</a></li>
            </ul>
        </li>
        <li><a href="Contact.html">Contact</a></li>
    </ul>
</nav>

il suffit d'appliquer la feuille de style suivante :

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/*//////////////////////////////////////////*/
/*.logoAccueil,/**/
/*.logoContact {/**/
.menu > li:first-child,
.menu > li:last-child {
  color : #E0605A;
  font-weight: bold;
  text-transform : uppercase;
  letter-spacing : 1px;
}
/**
 *  <nav class="sticky-top">
 *    <ul class="menu">
 *      <li>...</li>
 *    </ul>
 *  </nav>
 */
.sticky-top {
  position: sticky;
  top: 0;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  line-height: 3em;
  background: #EEE;
  cursor: pointer;
  justify-content: space-around;
}
/*-- reset UL et LI --*/
.menu ul,
.menu li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
/*-- pour tous les LI --*/
.menu li {
  padding: 0 .5em;
  line-height: 2em;
  white-space: nowrap;
  color: #000;
}
/*-- pour les LI de 1st niveau --*/
.menu > li {
  line-height: inherit;
  color: #000;
}
/*-- pour tous les A --*/
.menu > li a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}
/*-- Etat initial des sous menus --*/
.menu .dropdown ul {
  display: none;
  z-index: 100;
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 100%;
  border: 3px double #888;
  background: #FFF;
  box-shadow: 1px 2px 25px #888;
  transform: translate(-50% , 0);
}
/*-- pour les LI des sous menu --*/
.menu .dropdown li {
  color: #000;
}
.menu li.dropdown::after {
  content: "\25BC";
  position: absolute;
  top: 0;
  right: .25em;
}
.menu li.dropdown {
  padding-right: 1.5em;
}
.menu li.dropdown li:empty {
  margin: 0 .25em;
  border-top: 1px solid currentColor;
}
 
/*-- survol du menu du bandeau --*/
.menu li:hover {
  color: #FFF;
  background: #AAA;
}
/*-- survol des autres LI --*/
.menu ul li:hover {
  color: #FFF;
  background: #666;
}
/*-- pour tous les UL enfant direct --*/
.menu li:hover > ul {
  display: block;
}

tu devrais pouvoir t'y retrouver et modifier facilement ce qui intéresse.

Si tu as des questions n'hésite pas !

Invité · 28/04/2021, 18h11

C'est bon, j'ai pris un exemple similaire puis l'ai adapté à mon site, ça m'a pris du temps mais ça marche ! Maintenant, la dernière étape : le formulaire de contact par mail à l'aide de PHP !!

Menu déroulant apparent devant bannière

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager