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