Probleempje met website volledig te centreren
Ik wil dus mijn website centreren zoals hier: http://battlefield.play4free.com/en/forum/forum
Dit is mijn website: http://roitskieldgaming.webuda.com/home.php
En dit is een stukje van mn Header.php code(dit is de enige die css erin heeft tussen de 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
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
<body>
<div class="content">
<div class="Header">
<div style="position:relative; margin-top:0px; margin-left:18%; z-index:2;"><a href="http://roitskieldgaming.webuda.com/home.php"><img src="/img/logo.png" style="width:400px;height:75px;"/></a></div>
<div style="position:relative; margin-top:20px; margin-left:19%; z-index:3;"><a href="http://roitskieldgaming.webuda.com/home.php"><img src="/img/home.png" style=""/></a></div>
<?php
if (!isset($_SESSION['uid'])) {
echo'<div style="position:relative; margin-top:-105px; margin-left:50%; z-index:4;">
<a href="login.php">Login</a><br /><a href="register.php">register</a>
</div>';
} else {
echo'<div style="position:relative; margin-top:-105px; margin-left:50%; z-index:4;"><a href="profile.php"><img src="'.getavatar($uid).'" style="width:50px;height:50px;background:url(/img/bg_top_hover.png);background-size:50px 50px;border: 1px solid #000;" /></a>
</div><div style="position:relative; margin-top:-80px; margin-left:53%; z-index:5;">
<ul>
<li><a href="messages.php">Berichten</a></li>
<li><a href="editprofile.php">Pas profiel aan</a></li>
<li><a href="content.php">Mijn inhoud</a></li></ul></div>
<div style="position:relative; margin-top:-75px; margin-left:65%; z-index:5;"><ul>
';
if ($permission==$admin) {
echo '<li><a href="admin.php">Admin Panneel</a></li>';
}
echo '
<li><a href="logout_parse.php">Log uit</a></li>
</ul>
</div>';
}
?>
<div style="position:relative; margin-top:55px; margin-left:20%; z-index:7;">
<div id="navbar2">
<ul><li><a href="forum.php"><img src="/img/nav_arrow.png"> Forum</img></a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="Header">
<div style="position:relative; margin-top:0px; margin-left:18%; z-index:2;"><a href="http://roitskieldgaming.webuda.com/home.php"><img src="/img/logo.png" style="width:400px;height:75px;"/></a></div>
<div style="position:relative; margin-top:20px; margin-left:19%; z-index:3;"><a href="http://roitskieldgaming.webuda.com/home.php"><img src="/img/home.png" style=""/></a></div>
<?php
if (!isset($_SESSION['uid'])) {
echo'<div style="position:relative; margin-top:-105px; margin-left:50%; z-index:4;">
<a href="login.php">Login</a><br /><a href="register.php">register</a>
</div>';
} else {
echo'<div style="position:relative; margin-top:-105px; margin-left:50%; z-index:4;"><a href="profile.php"><img src="'.getavatar($uid).'" style="width:50px;height:50px;background:url(/img/bg_top_hover.png);background-size:50px 50px;border: 1px solid #000;" /></a>
</div><div style="position:relative; margin-top:-80px; margin-left:53%; z-index:5;">
<ul>
<li><a href="messages.php">Berichten</a></li>
<li><a href="editprofile.php">Pas profiel aan</a></li>
<li><a href="content.php">Mijn inhoud</a></li></ul></div>
<div style="position:relative; margin-top:-75px; margin-left:65%; z-index:5;"><ul>
';
if ($permission==$admin) {
echo '<li><a href="admin.php">Admin Panneel</a></li>';
}
echo '
<li><a href="logout_parse.php">Log uit</a></li>
</ul>
</div>';
}
?>
<div style="position:relative; margin-top:55px; margin-left:20%; z-index:7;">
<div id="navbar2">
<ul><li><a href="forum.php"><img src="/img/nav_arrow.png"> Forum</img></a></li>
</ul>
</div>
</div>
</div>
en dit is dan de een stukje van style.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
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
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
.container {
color: #000;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Verdana, Geneva, Sans-Serif;
font-size: 11px;
}
.Header {
position:relative;
background: url(img/Header.png) center no-repeat;
margin: 0px 5% 0px 5% 0px;
height: 150px;
z-index: 1;
}
.top_block {
width: 100%;
display: block;
background: #000;
}
.bottom_block {
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
background: url(img/Body.png) repeat-y;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
.slider-wrapper {
Overflow:hidden;
display:block;
margin: 0 0 0px;
}
.Slider{
margin-top: 0px;
height: auto;
}
.Sidebar_right {
margin: 20px 5% 20px 5%;
height: auto;
width: 280px;
padding: 20px 20px 20px 20px;
}
.Main {
top: -100px;
margin: 20px 5% 20px 5%;
padding: 20px 20px 20px 20px;
background: url(img/bg_table.png);
}
#Footer {
margin: 20px 5% 20px 5%;
height: 25px;
padding: 20px 20px 20px 20px;
background: url(img/bg_table.png);
}
.clear {
clear: both;
}
#navbar2 {
margin: 0 auto;
padding: 0;
height: 40px;
}
#navbar2 li {
list-style: none;
float: left;
}
#navbar2 li a {
display: block;
padding: 3px 8px;
color: #fff;
text-decoration: none;
}
#navbar2 li ul {
display: none;
width: 10em; /* Width to help Opera out */
background: url(img/bg_table.png);
}
#navbar2 li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar2 li:hover li {
float: none;
}
#navbar2 li:hover li a {
background: url(img/bg_table.png);
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar2 li li a:hover {
background: url(img/bg_table.png);
}
#navbar2 li:hover ul, #navbar2 li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar2 li:hover li, #navbar2 li.hover li {
float: none;
}
#navbar2 li:hover li a, #navbar2 li.hover li a {
background: url(img/bg_table.png);
border-bottom: 1px solid #fff;
color: #fff;
}
color: #000;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Verdana, Geneva, Sans-Serif;
font-size: 11px;
}
.Header {
position:relative;
background: url(img/Header.png) center no-repeat;
margin: 0px 5% 0px 5% 0px;
height: 150px;
z-index: 1;
}
.top_block {
width: 100%;
display: block;
background: #000;
}
.bottom_block {
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
background: url(img/Body.png) repeat-y;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
.slider-wrapper {
Overflow:hidden;
display:block;
margin: 0 0 0px;
}
.Slider{
margin-top: 0px;
height: auto;
}
.Sidebar_right {
margin: 20px 5% 20px 5%;
height: auto;
width: 280px;
padding: 20px 20px 20px 20px;
}
.Main {
top: -100px;
margin: 20px 5% 20px 5%;
padding: 20px 20px 20px 20px;
background: url(img/bg_table.png);
}
#Footer {
margin: 20px 5% 20px 5%;
height: 25px;
padding: 20px 20px 20px 20px;
background: url(img/bg_table.png);
}
.clear {
clear: both;
}
#navbar2 {
margin: 0 auto;
padding: 0;
height: 40px;
}
#navbar2 li {
list-style: none;
float: left;
}
#navbar2 li a {
display: block;
padding: 3px 8px;
color: #fff;
text-decoration: none;
}
#navbar2 li ul {
display: none;
width: 10em; /* Width to help Opera out */
background: url(img/bg_table.png);
}
#navbar2 li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar2 li:hover li {
float: none;
}
#navbar2 li:hover li a {
background: url(img/bg_table.png);
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar2 li li a:hover {
background: url(img/bg_table.png);
}
#navbar2 li:hover ul, #navbar2 li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar2 li:hover li, #navbar2 li.hover li {
float: none;
}
#navbar2 li:hover li a, #navbar2 li.hover li a {
background: url(img/bg_table.png);
border-bottom: 1px solid #fff;
color: #fff;
}
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken, in plaats van [quote][/quote]-tags.
Gewijzigd op 23/11/2013 16:06:34 door - Ariën -
Code (php)
1
2
3
4
2
3
4
#container (
width: 900px;
margin: 0 auto;
}
width: 900px;
margin: 0 auto;
}
Vermijd bovendien ook inline-CSS in je HTML. Handel alles gewoon af via CSS stylesheets. Zo blijft alles overzichtelijker.