Site "one page" et slider

**mariaorea** · 08/09/2013, 08h22

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 :

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

**Muchos** · 09/09/2013, 05h00

D'après moi, c'est simplement l'élément #bando qui couvre le haut de chaque section, que le navigateur place bien tout en haut de la page lorsqu'on clique sur une ancre.

Par exemple, voilà ce qu'on pourrait ajouter pour régler le problème avec la #section1:

Code css :

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

1
2
3
4
5
6
7
 
h2, #section1 {
	margin: 0; /* Pour gérer précisemment la hauteur */
}
#section1 {
	padding-top: 80px; /* La hauteur du #bando */
}

PS: Pensez à utiliser les nouveaux éléments HTML5 au lieu de DIV uniquement. Ce sera notamment plus simple à maintenir

**mariaorea** · 17/09/2013, 16h02

Bonjour Muchos,
Je suis absolument désolée, je découvre votre réponse à l'instant, je n'ai pas eu de message par mail pour m'avertir, comme par le passé, et du coup j'ai pensé que mon problème de slider n'intéressait personne.
Milles excuses.
Et merci pour votre aide.
Peut-être à bientôt, car je n'ai pas fini avec mon site et je rencontre d'autres difficultés

Site "one page" et slider

HTML

Vue hybride

Discussions similaires

Partager

Partager