Site "one page" et slider
Bonjour à tous, je réalise actuellement mon site professionnel, et je rencontre un problème que je ne résoudrai sans doute pas seule, c'est pourquoi je me tourne vers vous pour vous demander de l'aide.
Merci par avance.
Le site est construit sur une page et la navigation se fait d'ancre en ancre en défilement vertical.
La structure est la suivante :
- un bandeau fixe en haut,
- le bloc de navigation "header" à gauche, en fixe également,
- le contenu central est divisé en section 1,2,3...
Je souhaiterai que le scroll s'arrête au niveau des sections et c'est pas le cas il passe sous le bandeau fixe du haut, ce qui cache mon contenu.
Ci-dessous le code HTML et en suivant le CSS.
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
| <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>One page</title>
<link rel="stylesheet" href="onepageStyle.css" media="screen">
</head>
<body>
<div id="bando"></div>
<div id="page">
<div id="header">
<div id="nav">
<ul>
<li><a href="#section1">PRINT</a></li>
<li><a href="#section2">WEB</a></li>
<li><a href="#section3">PHOTO</a></li>
</ul>
</div>
<!--fin #header--></div>
<div id="section1">
<div class="section">
<h2>DIV SECTION 1 - PRINT</h2>
</div>
<!--fin #section1--></div>
<div id="section2">
<div class="section">
<h2>DIV SECTION 2 - WEB</h2>
</div>
<!--fin #section2--></div>
<div id="section3">
<div class="section">
<h2>DIV SECTION 3 - PHOTO</h2>
</div>
<!--fin #section3--></div>
<!--fin #page--></div>
</body></html> |
et le CSS
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
| @charset "UTF-8";
/* RESET */
html, body {margin: 0;padding: 0;border: 0;font-size: 100%;}
ul {list-style: none;}
a {text-decoration: none;}
/* FIN RESET */
html, body {
height: 100%;
width: 100%;
}
body {font-family : Arial, sans-serif;}
#bando {
width: 100%;
position: fixed;
height: 80px;
background:#000;
z-index: 10;
top: 0;
}
#page {
width: 100%;
height: 100%;
position:relative;
top: 10%;
}
#header {
width: 300px;
height: 100%;
position: fixed;
left: 0;
top: auto;
z-index: 1;
background-color: brown;
}
#nav {
padding: 20px 10px;
background-color: pink;
}
#nav ul li a {
color: #FFF;
font-size: 2.2em;
}
.section {
margin-left: 35%;
height: 300px;
}
h2 {
font-size: 3em;
color: #FC3;
}
#section1 {
background-color: red;
}
#section2 {
background-color: purple;
}
#section3 {
background-color: green;
} |
