Tijden veranderen
Onderaan de pagina
Ik probeer een div helemaal onderaan de pagina van mijn website te zetten, dit lukt goed, maar zogauw er scrollbalken verschijnen en je naar beneden scrollt, gaat de div niet mee (zie screen)
En zoals je ziet is dit ook zo bij het scrollen naar rechts. De CSS die bij de onderstaande balk hoort is:
Code (php)
1
<div style="position: absolute; width: 100%; height: 20px; bottom: 0px; background: #6B92DA;" align="center"><p style="padding-top: 3px;">© 2010 - 2011 Muggle Me</p></div>
Ik hoop dat iemand me kan helpen!
Zet dit allemaal in een bestand die je bestand_naam.css noemt. Deze laad je dan iedere pagina in via de link tag in de head.
Verder is absolute positioneren verkeerd voor een totale website opbouw. Probeer alles met floats en margin/paddings goed te positioneren. Dan zul je aan de footer clear: both; moeten geven, dit zorgt ervoor dat hij onder alle content komt.
@wouter J, ik gebruik juist heel vaak position: absolute; voor het HTMLen van mijn websites....
En nu ik zo rondkijk heeft google dit probleem ook, maar er moet gewoon een oplossing voor zijn want Habbo heeft dit probleem niet. (ook al gekeken in de broncode maar ik kan daar niks vinden)
Maar als je dus op PHPhulp scrollbalken onderaan je pagina hebt, en je scrollt opzij, dan zie je dat die balk onderaan de pagina (met 'Over PHPhulp', 'Support' etc.) niet helemaal tot de rand van het scherm gaat. (zoals je ziet op de screen), en voor mijn site wil ik dus dat dat wél gebeurd.
Code (php)
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container-page {
width: 100%;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#container-content {
padding-bottom: 20px;
}
#container-foot {
width: 100%;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height: 20px;
font-size: 15px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-content">
Hier je hoofdpagina
</div>
<div id="container-foot">
Hier je footer
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container-page {
width: 100%;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#container-content {
padding-bottom: 20px;
}
#container-foot {
width: 100%;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height: 20px;
font-size: 15px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-content">
Hier je hoofdpagina
</div>
<div id="container-foot">
Hier je footer
</div>
</div>
</body>
</html>
Ik hoop dat je er iets aan hebt. Ik hoop dat anderen er ook iets aan hebben.
Hier nogmaals een screen ter verduidelijking:
Links is de situatie als je de scrollbalk gewoon laat staan (als je niet scrollt)
Rechts is de situatie als je opzij scrollt, de balk houd op en is dus niet evenlang meer als de pagina..
Gewijzigd op 10/07/2011 11:48:51 door Lord Gaga