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):
<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>en dit is dan de een stukje van style.css:
.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;
}