Fixer un menu sur une page.

**InfoYANN** · 12/12/2018, 14h01

Bonjour,

J'essaie de créer une petite page perso mais je me heurte à un soucis dont je n'arrive pas à me sortir malgré plus tests effectués.
Je voudrais simplement que l'entête et le menu horizontal reste fixe lorsque je descend ma page.

J'ai testé pas mal de choses en regardant un peu sur internet mais rien ne fonctionne. Soit ça ne fixe pas, soit le contenu de la page devient illisible car passe en dessous du menu etc...

Merci par avance si vous pouvez m'aider.

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
<!DOCTYPE html>
<html lang="fr" >
 
<head>
  <meta charset="UTF-8">
  <title>Linux SSH</title>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
  <!-- header -->
<h1><b>Juste un petit essai </b><img src="https://i.imgur.com/SKN67qN.png" width="40" height="40"></h1>
<!-- menu container -->
<ul class="container">
    <li class="item item-1"><a href="#demo1">demo 1</a></li>
    <li class="item item-2"><a href="#demo2">demo 2</a></li>
    <li class="item item-3"><a href="#demo3">demo 3</a></li>
    <li class="item item-4"><a href="#demo4">demo 4</a></li>
    <li class="item item-5"><a href="#demo5">demo 5</a></li>
    <li class="item item-6"><a href="#demo6">demo 6</a></li>
</ul>
 
  <!--<div class="overlay"></div> -->
 
                  <div class="card">
                  <section id="Accueil" class="main-section">
                     <header>Juste un petit essai 2</header>
                     <article>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                     </article>
                     </div>
                  </section>
 
 
 
      </div>
   </main>
  <script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
 
 
 
    <script  src="js/index.js"></script>
 
</body>
 
</html>

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
/* variables */
/* colours */
/* fonts */
.transition, .container .item a {
  transition: all 0.25s ease-in-out;
}
 
body {
  height: 100%;
  -webkit-perspective: 900;
          perspective: 900;
  background-color: rgba(220, 231, 235, 0.25);
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  text-align: center;
}
 
h1 {
  color: #22bec6;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 1.75em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  padding: 0.5em 0.5em;
  border-bottom: 1px solid rgba(48, 69, 92, 0.2);
}
 
.container {
  position: center, fixed;
  right: 0;
  top: 8%;
  list-style: none;
  padding: 0;
  margin: 0 5%;
  width: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.container .item {
  font-family: "Ubuntu", sans-serif;
  border-left: 1px solid #dce7eb;
}
.container .item a {
  text-transform: uppercase;
  font-size: 0.7em;
  background: #fefffa;
  color: rgba(48, 69, 92, 0.8);
  padding: 1em 1em;
  display: block;
  text-decoration: none;
}
.container .item a:hover {
  background: #22bec6;
  color: #fefffa;
}
.container .item-1 {
  border: none;
}
 
@media (max-width: 600px) {
  .container {
    flex-flow: column nowrap;
  }
  .container .item {
    border-left: none;
    border-bottom: 1px solid #dce7eb;
  }
  .container .item a {
    padding: 1.5em 1em;
  }
}
 
.card {
      background: #fff;
      width: 80%;
      box-shadow: 2px 2px 8px black;
      margin-top: 5%;
      margin-bottom: 5%;
      margin-right: auto;
      margin-left: auto;
    }

Invité · 12/12/2018, 14h24

Bonjour,

HTML5 :

CSS

CSS - position

**InfoYANN** · 12/12/2018, 14h29

Merci jireaux62 pour ta réponse mais ça ne m'aide pas vraiment.

J'ai déjà prit du temps pour chercher le soucis (fixer menu css) et testé la position "fixed" mais elle ne passe pas sur un des deux navigateurs de test (Firefox et Chrome).

Merci quand même en tout cas.

Invité · 12/12/2018, 14h42

Tu ne peux pas espérer avoir un comportement correct, si la structure HTML ne l'est pas.

1- Mets le titre et le menu dans une balise HTML5 <header>, et ça sera déjà un bon début.

2- Ensuite, c'est effectivement position:fixed.

**InfoYANN** · 12/12/2018, 14h51

Merci pour le <header>

Je viens de l'ajouter de cette manière.

Je suppose qu'il faut maintenant un header dans le css aussi. C'est bien ça ? C'est lui qui prendra la fonction de la disposition exacte de ces deux éléments (entête et menu) ?

Invité · 12/12/2018, 14h59

1- Merci de COPIER-COLLER directement le code dans le message.

2- LIS LES TUTOS que je t'ai mis en lien.

Regarde AU MOINS les codes HTML proposés, et LIS les explications sur l'utilisation correcte des BALISES HTML5.

**InfoYANN** · 12/12/2018, 15h00

Ah désoler.

Voici le code html modifié :

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
<!DOCTYPE html>
<html lang="fr" >
 
<head>
  <meta charset="UTF-8">
  <title>demo</title>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
  <!-- header -->
<header><h1><b>Juste un petit essai </b><img src="https://i.imgur.com/SKN67qN.png" width="40" height="40"></h1></header>
<!-- menu container -->
<header>
<ul class="container">
    <li class="item item-1"><a href="#demo1">demo 1</a></li>
    <li class="item item-2"><a href="#demo2">demo 2</a></li>
    <li class="item item-3"><a href="#demo3">demo 3</a></li>
    <li class="item item-4"><a href="#demo4">demo 4</a></li>
    <li class="item item-5"><a href="#demo5">demo 5</a></li>
    <li class="item item-6"><a href="#demo6">demo 6</a></li>
</ul>
</header>
 
  <!--<div class="overlay"></div> -->
 
                  <div class="card">
                  <section id="Accueil" class="main-section">
                     <header>Juste un petit essai 2</header>
                     <article>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                        <p>demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo</p>
                     </article>
                     </div>
                  </section>
 
 
 
      </div>
   </main>
  <script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
 
 
 
    <script  src="js/index.js"></script>
 
</body>
 
</html>

**NoSmoking** · 14/12/2018, 18h42

Bonjour,
le code HTML c'est bien mais du coup on ne sait pas si tu as corrigé le code CSS, pour vérifier celui-ci il existe un outil simple, trop peu utilisé visiblement, pour la vérification de ton code : Validateur CSS du W3C.

Sinon vire ton perspective: 900, non conforme d'ailleurs, du style de ton <body> qui crée un « context » à part, mais il n'y a pas que cela, corrige d'abord.

**InfoYANN** · 14/12/2018, 22h25

Merci pour le conseil, je m'y attelle déjà

Fixer un menu sur une page.

CSS

Discussions similaires

Partager

Partager