Position Fixed et scrolling
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:
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> </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> </p>
<p> </p>
<H2>>>> Paintings</H2>
<p>dfsf</p>
<p>dfdsf</p>
<p> </p>
<p>dfsdf</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>dsfdsf</p>
<p> </p>
<p> </p>
<p>dsfds</p>
<p> </p>
<p> </p>
<p>dsfds</p>
<p> </p>
<p> </p>
<p>dsfdsf</p>
<p> </p>
<p> </p>
<p>dsfds</p>
<p> </p>
<p> </p>
<p> </p>
<p>dsfdsf</p>
<p> </p>
<p> </p>
<p> </p>
<p>dfs</p>
</div>
<p> </p>
<div id="biography">fdsfd</div>
</body>
</html> |
<B>CSS:</B>
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
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;
} |
