Fixer un menu sur une page.

Version imprimable

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:

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:

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;
    }

12/12/2018, 14h24
Invité
Bonjour,

HTML5 :
- HTML5 : le guide du débutant
- 101 balises HTML5 + exemples
CSS
- CSS - position
12/12/2018, 14h29
InfoYANN

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.
12/12/2018, 14h42
Invité

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.
12/12/2018, 14h51
InfoYANN

Merci pour le <header>

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

https://i.imgur.com/fwHcZXr.png

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) ?
12/12/2018, 14h59
Invité

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.

Ah désoler.

Voici le code html modifié :

Code:

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>

14/12/2018, 18h42
NoSmoking

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.
14/12/2018, 22h25
InfoYANN

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