Position Fixed et scrolling

**Greg12345** · 24/05/2010, 22h46

Hello,

Merci encore pour votre aide précédemment:

J'ai maintenant un autre problème que je n'arrive pas à régler.
J'ai plusieurs éléments en position "fixed" dans ma page (tout ma partie header en fait ainsi que mon menu à gauche)

Le probleme est que lorsque je fais un scroll vers le bas, mon contenu dans "works" scroll jusqu'en haut de la page, alors que je souhaiterais qu'il "disparaisse" derrière la zone avec mes headers (zone avec bordure rouge) au fur et a mesure que je scroll pour vraiment donner l'impression que tout le haut de la page est statique.

Une autre question liée à ça, comment se fait t il que ma section "biography" (avec la bordure verte) se place juste en dessous de la "topborder" noire? Quelle est le lien entre les 2 qui fait qu'elle aille se placer la?
Comment faire pour qu'elle se place en dessous de ma section "works"? (en gros j aimerais bien toutes mes sections les unes en dessous des autres)

Merci d'avance pour votre aide

<B>XHTML:</B>

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
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
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Greg's website</title>
<link href="sources/silagi.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
 
 
<div class="header">
<div class="topborder"><p class="topborder">Version Française - English Version</p></div>
 
<div class="leftheader">
    <p class="logo">Name</p>
    <p class="slogan">This is my description</p>
</div>
 
<div class="rightheader">
<p class="slogan">contact@mysite.com <img src="../../../../Downloads/FaceBook_32x32.png" width="32" height="32" alt="My Name on Facebook" longdesc="http://www.facebook.com/" /></p></div>
 
</div>
<div class="sidebar">
<ul id="menuitems">
		<li><a href="#Biography">Biography</a></li>
		<li><a href="#Works">Works</a></li>
        <li><a href="#Exhibitions">Exhibitions List</a></li>
        <li><a href="#Current Projects">Current Projects</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul></div>
 
<div id="works">
<H1>Works</H1>
 <p>Selection of work</p>
 <p>&nbsp;</p>
<H2>>>> Sculptures</H2>
  <p>dfdsfd
    fdsdsf
    dfdsf</p>
  <p>dfsf</p>
  <p>dfdsf</p>
  <p>dfds</p>
  <p>dfds</p>
  <p>dfdsf</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
 <H2>>>> Paintings</H2>
  <p>dfsf</p>
  <p>dfdsf</p>
  <p>&nbsp;</p>
  <p>dfsdf</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dsfdsf</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dsfds</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dsfds</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dsfdsf</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dsfds</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dsfdsf</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>dfs</p>
 
</div>
<p>&nbsp;</p>
<div id="biography">fdsfd</div>
 
</body>
</html>

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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
*{
	margin:0;
	padding:0;
	}
 
body {
	background-color: #F2F2F2;
	font-family: Arial, Helvetica, sans-serif;
	color: #F00; /* rouge */
}
 
div.header {
    position: fixed;
    width: 100%;
    height: 110px;
	border: 1px solid red;
            }
 
            div.topborder {
				top:0;
				left:0;
            	width: 100%;
            	height: 1.0em;
            	background-color: #000;
        	}
 
 
            div.leftheader {
                position: absolute;
                left: 0px;
                bottom: 0px;
                padding: 10px;
                width: 45%;
                border: 1px solid gray;
            }
 
            div.rightheader {
                position: absolute;
                right: 25px;
                bottom: 0px;
            	text-align :right;
                padding: 10px 2px 10px 10px;
                width: 45%;
                border: 1px solid gray;
            }
 
 
 
#works {
position: absolute;
top: 100px;
right: 25px;
left: 260px;
background-color:#FFF;
width: auto;
Height:auto;
padding: 10px;
border-width: 5px; /*not working */
border-color: #0F0; /*not working */
}
 
 
#biography {
position: absolute;
right: 25px;
left: 260px;
background-color:#FFF;
width: auto;
Height:auto;
padding: 10px;
border-width: 5px; /*not working */
border: 1px solid green;
border-color: #0F0; /*not working */
}
 
 
 
/*typography 
_____________________________________________*/
 
 
 
div p{	
color: #333;
font-size:12px
}
 
p.logo{	
color: #333;
font-size:30px;
font-weight:bold;
letter-spacing: 2px;
}
 
p.slogan{	
color: #000;
font-size:14px;
}
 
p.topborder{	
color: #666;
font-size:10px;
text-align:right;
padding-right:10px;
}
 
div H1{	
color: #9C9;
font-size:16px;
border-bottom-width:thin;
border-bottom-color:#CCC;
border-bottom-style:dotted;
text-transform:uppercase;
 
}
 
div H2{	
color: #9C9;
font-size:14px;
}
 
/* sidebar
----------------------------------------------- */
 
div.sidebar{ position:fixed; top: 100px; left:20px;	width: 200px; }
 
#menuitems{ list-style: none; margin: 1.5em 0 1em 0;}
 
#menuitems li{ 
font-size:12px;
padding: 0;
margin: 0; }
 
#menuitems a{
	display: block;
	height: 2.0em; 
	margin-bottom: 1px;
	color: #eee; 
	background-color: #333; 
	text-decoration:none;
	}
 
#menuitems a:hover{
	color: #eee; 
	background-color: #666;
	text-decoration:none;
	}

**Dionyzos** · 25/05/2010, 13h35

En fait il faut englober ton "works" et "biography" dans une même DIV que tu peux appeler "main" par exemple, et c'est justement le main que tu vas positionner en absolut. Ainsi tes deux blocs works et biography seront bien l'un en dessous de l'autre, mais le bloc englobant main viendra se positionner en dessous de ton header et à droite de ton menu latéral.

Par ailleurs il faut ajouter le propriété z-index: 10 à ton header pour qu'il passe au-dessus des autres, et que tu lui ajoutes un background-color pour qu'il devienne opaque.

grosso modo, ca donne un truc comme ca :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Greg's website</title>
<link href="sources/silagi.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* { margin: 0; padding: 0; }
 
body {
    background-color: #F2F2F2;
    font-family: Arial, Helvetica, sans-serif;
    color: #F00; /* rouge */
}
 
div.header {
    position: fixed;
    width: 100%;
    height: 110px;
    border: 1px solid red;
    background-color: #F2F2F2;
    z-index: 10;
}
 
div.topborder {
    height: 18px;
    background-color: #000;
    color: #666;
    font-size: 10px;
    text-align: right;
    padding-right: 10px;
}
 
div.leftheader {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 10px;
    width: 45%;
    border: 1px solid gray;
}
 
div.rightheader {
    position: absolute;
    right: 25px;
    bottom: 0px;
    text-align : right;
    padding: 10px 2px 10px 10px;
    width: 45%;
    border: 1px solid gray;
}
 
div#main {
    position: absolute;
    top: 120px;
    left: 260px;
    right: 25px;
}
 
#works {
    background-color: #FFF;
    padding: 10px;
    border: 1px solid green;
    margin-bottom: 20px;
}
 
#biography {
    background-color: #FFF;
    width: auto;
    Height: auto;
    padding: 10px;
    border: 1px solid green;
}
 
 
 
/*typography
_____________________________________________*/
 
div p {
    color: #333;
    font-size: 12px
}
 
p.logo {
    color: #333;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;
}
 
p.slogan {
    color: #000;
    font-size: 14px;
}
 
div H1 {
    color: #9C9;
    font-size: 16px;
    border-bottom-width: thin;
    border-bottom-color: #CCC;
    border-bottom-style: dotted;
    text-transform: uppercase;
}
 
div H2 {
    color: #9C9;
    font-size: 14px;
}
 
/* sidebar
----------------------------------------------- */
div.sidebar { position: fixed; top: 100px; left: 20px; width: 200px; }
 
#menuitems { list-style: none; margin: 1.5em 0 1em 0; }
 
#menuitems li {
    font-size: 12px;
    padding: 0;
    margin: 0;
}
 
#menuitems a {
    display: block;
    height: 2.0em;
    margin-bottom: 1px;
    color: #eee;
    background-color: #333;
    text-decoration: none;
}
 
#menuitems a: hover {
    color: #eee;
    background-color: #666;
    text-decoration: none;
}
</style>
</head>
 
<body>
    <div class="header">
        <div class="topborder">Version Française - English Version</div>
        <div class="leftheader">
            <p class="logo">Name</p>
            <p class="slogan">This is my description</p>
        </div>
        <div class="rightheader">
            <p class="slogan">
                contact@mysite.com
                <img src="../../../../Downloads/FaceBook_32x32.png" width="32" height="32" alt="My Name on Facebook" longdesc="http://www.facebook.com/" />
            </p>
        </div>
    </div>
 
    <div class="sidebar">
        <ul id="menuitems">
            <li><a href="#Biography">Biography</a></li>
            <li><a href="#Works">Works</a></li>
            <li><a href="#Exhibitions">Exhibitions List</a></li>
            <li><a href="#Current Projects">Current Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
 
    <div id="main">
        <div id="works">
            <H1>Works</H1>
            <p>Selection of work</p>
            <br /><br />
            <H2>>>> Sculptures</H2>
            <p>
                fqds<br />
                fqds<br />
                fqds<br />
                <br /><br />
                fqds<br />
                fqds<br />
                <br />
                fqds<br />
                <br /><br /><br />
                fqds<br /><br /><br />
            </p>
 
            <H2>>>> Paintings</H2>
            <p>
                fqds<br />
                fqds<br />
                fqds<br />
                <br /><br />
                fqds<br />
                fqds<br />
                <br />
                fqds<br />
                fqds<br />
                fqds<br />
                <br /><br />
                fqds<br />
                fqds<br />
                <br />
                fqds<br />
                fqds<br />
                fqds<br />
                <br /><br />
                fqds<br />
                fqds<br />
                <br />
                fqds<br />
                <br /><br /><br />
                fqds<br /><br /><br />
            </p>
        </div>
 
        <div id="biography">fdsfd</div>
    </div>
 
</body>
</html>

J'ai réuni le code HTML et CSS pour faire simple, mais bien sur à toi de les reséparer proprement

PS: Essaies du mieux que tu peux d'écrire un code propre et homogène... (indentation, retour à la ligne...), cela t'aidera déjà toi pour relire ton code, et surtout pour ceux qui passent dernière

**Greg12345** · 25/05/2010, 23h04

Super, un grand merci!

Position Fixed et scrolling

Défilement en CSS

Discussions similaires

Partager

Partager