Sidebar gaat mee met de onderste "nieuws" div
Ik ben bezig met een eigen template voor mijn clan.
Echter ben ik op een probleem gekomen.
op http://qgclan.nl kan je al meteen zien wat het probleem is.
Ipv. dat de sidebar bovenin blijft hangen gaat hij mee met de laatste div.
Hoe kan ik dit probleem het snelste verhelpen.
HTML:
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
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
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
<!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>QGClan.nl</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="menu.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="wrapper">
<div id="loginbalk">
</div>
<div id="logo"></div>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
</li>
<li><a href="#" class="parent"><span>Clan</span></a>
<ul>
<li><a href="#"><span>Clanmembers</span></a></li>
<li><a href="#"><span>Clanregels</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Forum</span></a></li>
<li><a href="#" class="parent"><span>Servers</span></a>
<ul>
<li><a href="#" class="parent"><span>Servers</span></a>
<ul>
<li><a href="http://qontrolgamerz.beneluxgaming.nl/hlstats.php"><span>Stats</span></a></li>
<li><a href="./banlist/"><span>Banlist</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Diensten</span></a>
<ul>
<li><a href="#"><span>Server Admin worden</span></a></li>
<li><a href="#"><span>Premium worden</span></a></li>
</ul>
</li>
<li><a href="#"><span>Server List</span></a></li>
</ul>
</li>
<li><a href="#"><span>FAQ</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<!-- Content -->
<div id="bodywrapper">
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div id="sidebar">
<div id="sidebarblok">
<div class="sidebarhead">Forum</div>
<div class="box">
<p><a href="forum/">Klik hier voor het forum !</a>
Excuses voor het ongemak voor het opnieuw registreren.<br />
Er waren een aantal problemen met de database.<br />
</div>
</div>
</div>
</div>
<div id="footer">
<div class="copyright"><span>Copyright 2010-2011© QGClan.nl<span><br /><small>Alle rechten voorbehouden. | By Acie</small></div>
<div class="sitelinks"><a href="#">Home</a> | <a href="#">Forum</a> | <a href="#">FAQ</a> | <a href="#">Crew</a> | <a href="#">Disclaimer</a> | <a href="#">Contact</a></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QGClan.nl</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="menu.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="wrapper">
<div id="loginbalk">
</div>
<div id="logo"></div>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
</li>
<li><a href="#" class="parent"><span>Clan</span></a>
<ul>
<li><a href="#"><span>Clanmembers</span></a></li>
<li><a href="#"><span>Clanregels</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Forum</span></a></li>
<li><a href="#" class="parent"><span>Servers</span></a>
<ul>
<li><a href="#" class="parent"><span>Servers</span></a>
<ul>
<li><a href="http://qontrolgamerz.beneluxgaming.nl/hlstats.php"><span>Stats</span></a></li>
<li><a href="./banlist/"><span>Banlist</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Diensten</span></a>
<ul>
<li><a href="#"><span>Server Admin worden</span></a></li>
<li><a href="#"><span>Premium worden</span></a></li>
</ul>
</li>
<li><a href="#"><span>Server List</span></a></li>
</ul>
</li>
<li><a href="#"><span>FAQ</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<!-- Content -->
<div id="bodywrapper">
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div id="sidebar">
<div id="sidebarblok">
<div class="sidebarhead">Forum</div>
<div class="box">
<p><a href="forum/">Klik hier voor het forum !</a>
Excuses voor het ongemak voor het opnieuw registreren.<br />
Er waren een aantal problemen met de database.<br />
</div>
</div>
</div>
</div>
<div id="footer">
<div class="copyright"><span>Copyright 2010-2011© QGClan.nl<span><br /><small>Alle rechten voorbehouden. | By Acie</small></div>
<div class="sitelinks"><a href="#">Home</a> | <a href="#">Forum</a> | <a href="#">FAQ</a> | <a href="#">Crew</a> | <a href="#">Disclaimer</a> | <a href="#">Contact</a></div>
</div>
</body>
</html>
CSS
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
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
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
#bodywrapper {
width: 1102px;
min-height: 600px;
float: left;
font-family: Trebuchet MS;
font-size: 12px;
color: #000;
}
#bodywrapper .contenthead{
width: 779px;
min-height: 41px;
background: url(images/main-bg.png) repeat-x;
float: left;
color: #FFF;
font-family: Trebuchet MS;
font-size: 17px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 0 20px;
}
#bodywrapper .content {
width: 799px;
min-height: 50px;
float: left;
margin: -15px 0 0 0;
background-color: #EAEDE1;
}
#bodywrapper .content p{
padding: 10px 10px 15px 10px;
}
#sidebar {
width: 300px;
min-height: 600px;
background-color: transparant;
float: left;
color: #000;
font-family: Trebuchet MS;
font-size: 12px;
margin-top: -51px;
top: 5px
}
#sidebar .box {
width: 297px;
min-height: 200px;
float: right;
margin: -15px 0 0 0;
background-color: #EAEDE1;
}
#sidebar .box p {
padding: 5px 0 0 10px;
}
#sidebarblok {
min-height: 250px;
margin-bottom: 15px;
}
.sidebarhead{
width: 277px;
min-height: 41px;
background: url(images/main-bg.png) repeat-x;
float: right;
color: #FFF;
font-family: Trebuchet MS;
font-size: 17px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 0 20px;
}
width: 1102px;
min-height: 600px;
float: left;
font-family: Trebuchet MS;
font-size: 12px;
color: #000;
}
#bodywrapper .contenthead{
width: 779px;
min-height: 41px;
background: url(images/main-bg.png) repeat-x;
float: left;
color: #FFF;
font-family: Trebuchet MS;
font-size: 17px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 0 20px;
}
#bodywrapper .content {
width: 799px;
min-height: 50px;
float: left;
margin: -15px 0 0 0;
background-color: #EAEDE1;
}
#bodywrapper .content p{
padding: 10px 10px 15px 10px;
}
#sidebar {
width: 300px;
min-height: 600px;
background-color: transparant;
float: left;
color: #000;
font-family: Trebuchet MS;
font-size: 12px;
margin-top: -51px;
top: 5px
}
#sidebar .box {
width: 297px;
min-height: 200px;
float: right;
margin: -15px 0 0 0;
background-color: #EAEDE1;
}
#sidebar .box p {
padding: 5px 0 0 10px;
}
#sidebarblok {
min-height: 250px;
margin-bottom: 15px;
}
.sidebarhead{
width: 277px;
min-height: 41px;
background: url(images/main-bg.png) repeat-x;
float: right;
color: #FFF;
font-family: Trebuchet MS;
font-size: 17px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 0 20px;
}
Met vriendelijke groet,
Dylan
Het snelst verhelpen is door de #sidebar helemaal bovenin #bodywrapper te zetten. En deze dan geen margin-top: -51px; mee te geven en float: left; te veranderen in float: right;
Topic opgelost :D