Fixer un menu dans un conteneur

**labarre2002** · 09/03/2024, 05h23

Bonjour

Je réalise cette page

Nom : screen.jpg
Affichages : 184
Taille : 158,3 Ko

je souhaite que la zone encerclée en vert sois fixe c-a-d que pendant le scroll vers le bas elle ne bouge pas .

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
<main class="content">
 
       <div class="central">
         <div class="inner">
                <div class="wrapper">
                    <div class="menu">
                        <a href="#"> <span class="burger"></span> Menu</a>
                    </div>
                        <div class="title">
                                    <span class="titleSpace">Space</span>
                        </div>
 
                     <div class="start">
                           <a href="#"><span>Start a Project</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="arrow"><path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path></svg></i>
                           </a>
                     </div>   
              </div>
 
          <div class="central_c">
               <div class="titre">
                      <div class="animation">
                          <span>a tor-tier</span>
                      </div>
                              <div class="animation">
                                   <span>architecture</span>
                              </div>
                                  <div class="animation">
                                      <span>
                                          & interior  
                                      </span>
                                  </div>  
 
                              <div class="animation">
                                  <span>design</span>
                              </div>
                      <div class="animation">
                          <span>company</span>
                      </div>
               </div>
 
            <div class="pic1 im">
              <img src="assets/jumeirah.jpg" alt="Jumeirah villa">
            </div>
 
            <div class="pic2 im">
              <img src="assets/interior.jpg" alt="interieur villa">
            </div>  
 
 
            <div class="project">
                      <div class="featured">
                            <span>featured projects</span>
                      </div>
 
                       <h2> <span>500+ projects</span> completed</h2>
                           <div class="scroll">
 
 
                           </div>        
            </div>
 
          </div>
 
 
         </div>
 
        </div>
 
    </main>

dans mon code la div concernée est celle ayant la classe .wrapper

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
.central{
    width: 70%;
    height: 75%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 12% 1fr;
    background-color: var(--bg-content);
    overflow-y: scroll;
    }
 
.inner{
    position: relative;
 
}
 
.central_c{
    position: relative;
   }
 
.wrapper{
    display: flex;
    border-bottom: 1px solid white;
 }

le soucis est que lorsque j 'affecte

Code css :

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

1
2
3
4
5
.wrapper{
    display: flex;
    border-bottom: 1px solid white;
  position:fixed;
 }

a ce block en espérant le fixer j obtiens ce rendu

Nom : ans.jpg
Affichages : 175
Taille : 293,5 Ko

Pourrais-je avoir des pistes en vue de transcender cet aspect de problème ?

Merci.

**nl.smart** · 09/03/2024, 23h35

Bonjour,

Est-ce que le fixed menu est la solution que tu cherches ?

Espérant que le code ci-dessous t'aidera, ne pas manquer de parcourir toute le page et "jouer" avec la fonction Try it Yourself >>

https://www.w3schools.com/howto/howt...fixed_menu.asp

Code :

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

1
2
3
4
.toto {
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
}

**labarre2002** · 10/03/2024, 07h01

Bonjour

merci pour ton message
Je réalise que ce n 'est pas la solution en ajoutant :

Code css :

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

1
2
3
4
5
6
7
8
9
10
.wrapper{
    display: flex;
    border-bottom: 1px solid white;
    position: fixed;
    top:0;
    left:0;
   right:0;
    width: 100%;
 
   }

je réalise que ce n'est pas la solution

Nom : aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.jpg
Affichages : 127
Taille : 309,1 Ko

La position absolute ne résout pas mon problème non plus en scrollant le menu se déplace

**nl.smart** · 10/03/2024, 08h58

OK, dans ton cas je pensais à la position relative, mais je me trompe peut-être.

https://www.pierre-giraud.com/html-c...ours/position/

https://developer.mozilla.org/fr/docs/Web/CSS/position

La position de ton menu n'est pas top:0; dans ton cas, ainsi que la largeur dont le width est de 70% width:70%

https://www.w3schools.com/cssref/pla...reval=relative

https://www.w3schools.com/css/tryit....ition_relative

Je ne parviens pas à reproduire ta page avec le code que tu mets à disposition.

**labarre2002** · 10/03/2024, 09h53

voici le code

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
<body>
 
   <main class="content">
 
       <div class="central">
         <div class="inner">
                <div class="wrapper">
                    <div class="menu">
                        <a href="#"> <span class="burger"></span> Menu</a>
                    </div>
                        <div class="title">
                                    <span class="titleSpace">Space</span>
                        </div>
 
                     <div class="start">
                           <a href="#"><span>Start a Project</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="arrow"><path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path></svg></i>
                           </a>
                     </div>   
              </div>
 
          <div class="central_c">
               <div class="titre">
                      <div class="animation">
                          <span>a tor-tier</span>
                      </div>
                              <div class="animation">
                                   <span>architecture</span>
                              </div>
                                  <div class="animation">
                                      <span>
                                          & interior  
                                      </span>
                                  </div>  
 
                              <div class="animation">
                                  <span>design</span>
                              </div>
                      <div class="animation">
                          <span>company</span>
                      </div>
               </div>
 
            <div class="pic1 im">
              <img src="https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDk5Mjk1ODR8&ixlib=rb-4.0.3&q=85" alt="Jumeirah villa">
            </div>
 
            <div class="pic2 im">
              <img src="https://images.unsplash.com/photo-1622015663319-e97e697503ee?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDk5Mjk2MjF8&ixlib=rb-4.0.3&q=85" alt="interieur villa">
            </div>  
 
 
            <div class="project">
                      <div class="featured">
                            <span>featured projects</span>
                      </div>
 
                       <h2> <span>500+ projects</span> completed</h2>
                           <div class="scroll">
 
 
                           </div>        
            </div>
 
          </div>
 
 
         </div>
 
        </div>
 
    </main>
 
 
</body>

mon css:

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
.content{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://images.unsplash.com/photo-1623298317883-6b70254edf31?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTAwNDYwNTF8&ixlib=rb-4.0.3&q=85');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
 
 
.central{
    width: 70%;
    height: 75%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 12% 1fr;
    background-color: var(--bg-content);
    overflow: hidden;
}
 
.inner{
    position: relative;
 
}
 
.central_c{
    position: relative;
    z-index: 1;
}
 
.wrapper{
    display: flex;
    border-bottom: 1px solid white;
   /* position: fixed;
    
    width: 100%;*/
 
   }
 
.wrapper > *:nth-child(1){
flex: 1 1 14%;
}
 
.wrapper > *:nth-child(2){
    flex: 1 1 70%;  
}
 
.wrapper > *:nth-child(3){
    flex: 1 1 18%; 
}
 
.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid white;
    position: relative;
}
 
.burger{
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: var(--text);
    display: block;
    top: 45%;
    left: 18%;
   }
 
.burger::before{
    content: "";
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: var(--text);
    display: block;
    transform: translateY(6px);
   }
 
.title{
    border-right: 1px solid white; 
}
 
a{
    color: var(--text);
    text-decoration: none;
    outline: none;
   }
 
.arrow{
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: .5em;
}
 
.start{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 3;
    position: relative;
}

**labarre2002** · 10/03/2024, 13h31

la solution au problème est:

Code css :

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

1
2
3
 position: sticky;
    top: 0;
    width: 100%;

Fixer un menu dans un conteneur

CSS

Vue hybride

Discussions similaires

Partager

Partager