Menu en partie masqué

**PhilHoo** · 21/12/2021, 15h27

bonjour , j'ai créé un menu en css et j'ai un problème une partie du menu est caché par une div dont je vais me servir pour mon contenu

voici mon code 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
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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>CB ROYALE FRATERNITE</title>
	<meta name="generator" content="BBEdit 14.0" />
	<link rel="stylesheet" href="style.css" />
 
</head>
<body>
 <div class="top-header">
 </div>
 <div class="header">
  <div class="logo-header">
	<img src="images/logo.png" />
  </div>
  <div class="logo-awbb-header">
	<img src="images/logo-awbb-header.png" />
 
  </div>
 </div>
 <div class="menu">
   <ul class="navbar">
        <li>
          <a href="#">ACTUALITES</a>
        </li>
        <li>
          <a href="#">CLUB</a>
          <ul>
            <li><a href="#">HISTORIQUE</a></li>
            <li><a href="#">LE COMITE</a></li>
            <li><a href="#">LE STAFF</a></li>
            <li><a href="#">LES ARBITRES</a></li>
            <li><a href="#">LES SALLES</a></li>
 
          </ul>
        </li>
        <li>
          <a href="#">EQUIPES</a>
          <ul>
            <li><a href="#" >SENIORS P2</a></li>
            <li><a href="#">SENIORS P4</a></li>
            <li><a href="#">U14 A</a></li>
            <li><a href="#">U14 B</a></li>
            <li><a href="#">U12 </a></li>
            <li><a href="#">U10 A</a></li>
            <li><a href="#">U10 B</a></li>
            <li><a href="#">U8</a></li>
            <li><a href="#">U6</a></li>
          </ul>
        </li>
 
        <li>
          <a href="#">COMPETITION</a>
          <ul>
            <li><a href="#" >SENIORS P2</a></li>
            <li><a href="#">SENIORS P4</a></li>
            <li><a href="#">U14 A</a></li>
            <li><a href="#">U14 B</a></li>
            <li><a href="#">U12 </a></li>
            <li><a href="#">U10 A</a></li>
            <li><a href="#">U10 B</a></li>
            <li><a href="#">U8</a></li>
            <li><a href="#">U6</a></li>
          </ul>
        </li>
        <li>
          <a href="#">GALERIE</a>
        </li>
        <li>
          <a href="#">PARTENAIRES</a>
 
        </li>
        <li>
          <a href="#">INFOS</a>
          <ul>
          	<li><a href="#">ENTRAINEMENTS</a></li>
            <li><a href="#">DOCUMENTS UTILES</a></li>
            <li><a href="#">REGLES COVID</a></li>
            <li><a href="#">LIENS UTILES</a></li>
 
          </ul>
        </li>
        <li>
          <a href="#">CONTACTS</a>
        </li>
      </ul>
 </div>
 <div class="main">
 
 </div>
 <div class="foofer">
 
 </div>
</body>
</html>

et mon code ces

Code css :

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
body
{
 background-image: url("images/parquet.png");
}
.top-header
{
 position:relative;
	width:1200px;
	height:30px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
 
}
.header
{
	position:relative;
	width:1200px;
	height:150px;
    background-color:#ffffff;
    margin-left: auto;
    margin-right: auto;
 
}
.logo-header
{
 position:absolute;
 
 width:400px;
 height:150px;
 top:15px;
 left:10px;
 
}
 
.logo-awbb-header
{
 position:absolute;
 
 width:247px;
 height:150px;
 
 left:953px;
 
}
 
.menu
{
	position:relative;
	width:1200px;
	height:50px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
 
}
 
.navbar{
      height: 50px;
      padding: 0;
      margin: 0;
      position: absolute; 
      }
      .navbar li{
      height: auto;
      width: 150px; 
      float: left;  
      text-align: center; 
      list-style: none;  
      font: normal bold 12px/1em Arial, Verdana, Helvetica;  
      padding: 0;
      margin: 0;
      background-color: #03224C;
      }
      .navbar a{							
      padding: 18px 0;  
      border-left: 1px solid #ccc9c9;
      text-decoration: none; 
      color: white; 
      display: block;
      }
      .navbar li:hover, a:hover {
      background-color: #444444;
      } 
      .navbar li ul{
      display: none;
      height: auto;									
      margin: 0; 
      padding: 0; 
      }				
      .navbar li:hover ul{
      display: block;
      }
      .navbar li ul li {
      background-color: #F25B40;
      } 
      .navbar li ul li a{
      border-left: 1px solid #444444; 
      border-right: 1px solid #444444; 
      border-top: 1px solid #c9d4d8; 
      border-bottom: 1px solid #444444; 
      }
      .navbar li ul li a:hover{
      background-color: #a3a1a1;
      }
 
.main
{
	position:relative;
	width:1200px;
	height:150px;
    background-color:#ffffff;
    margin-left: auto;
    margin-right: auto;
 
}

je vous donne le nom du site www.cb-royale-fraternite.be

merci pour votre aide

**ProgElecT** · 21/12/2021, 16h00

Salut

Essais d'ajouter dans la class .main z-index: -1;

**PhilHoo** · 21/12/2021, 16h21

Ca marche , merci

**NoSmoking** · 22/12/2021, 11h31

Bonjour,

Envoyé par ProgElecT

Essais d'ajouter dans la class .main z-index: -1;

« marrant » cette approche, pourquoi pas plutôt un z-index: 1 sur .menu, cela paraît plus naturel ?

**ProgElecT** · 22/12/2021, 13h20

Envoyé par NoSmoking

Bonjour,

« marrant » cette approche, pourquoi pas plutôt un z-index: 1 sur .menu, cela paraît plus naturel ?

le gars un peu tordu, <div id=main> étant en position:relative; mais après <div class="menu"> donc

z-index: -1..... CQFD ....

**NoSmoking** · 22/12/2021, 18h11

Le gars encore plus tordu

<div class="menu"> étant avant <div id="main"> donc étant au même niveau, mais potentiellement recouvert en cas de ..., donc si je le veux au dessus je mets unz-index: 1, ou j'enlève le position: relative à l'élément <div id="main">

Le principal étant quand même que cela fonctionne

Menu en partie masqué

CSS

Vue hybride

Discussions similaires

Partager

Partager