Ich denke mal das ist eine Standart Frage, jedoch schaffe ich es einfach nicht mein Content mittig zu zentrieren !
Deswegen bitte ich hier einfach mal um hilfe!
Code(s) meiner Seite
index.php
- Code: Alles auswählen
<?php include('inc/header.php'); ?>
Meine header.php:
- Code: Alles auswählen
<!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>
<link rel="stylesheet" type="text/css" href="./css/headnav.css" />
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link rel="stylesheet" type="text/css" href="./fbox/lightbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="./fbox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fbox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="./fbox/lifunc.js"></script>
</head>
<body>
<div class="cont">
<div class="content">
<div class="navigation">
<a class="logo" href="index.php"><div class="logo"><img src="img/logo.png" /></div></a>
<ul>
<li><a href="index.php" >Home</a></li>
<li><a href="http://intensionforum.pytalhost.de/">Forum</a></li>
<li><a href="staff.php" id="various1" >Register</a></li>
<li><a href="staff.php" id="various2" >Download</a></li>
<li><a href="staff.php" id="various3" >Ranking</a></li>
<li><a href="staff.php" id="various3" >Shop</a></li>
<li><a href="staff.php" id="various4" >Donate</a></li>
<li><a href="staff.php" id="various5" >Staff</a></li>
</ul>
</div>
<div class="startda">
<a href="#register.php"><img src="startda.png" onmouseover="this.src='startda.gif'" onmouseout="this.src='startda.png'"/></a>
</div>
</div>
</div>
</body>
Meine main.css:
- Code: Alles auswählen
@charset "utf-8";
/* CSS Document */
body {
margin:0 auto;
width: 100%;
}
.content {
background:url('../img/head.png') no-repeat ;
height:390px;
width:100%;
}
.startda {
padding-top:190px;
}
.logo {
padding-left:7%;
float:left;
}
Meine headnav.css:
- Code: Alles auswählen
@charset "utf-8";
/* CSS Document */
.navigation {
background: url('../img/navigation.png') repeat-x;
width: 100%;
height:51px;
float:left;
text-decoration:none;
color:#FFFFFF;
}
.navigation li {
background: url('../img/menuBg.png') no-repeat center bottom;
width: 80px;
height: 15px;
text-align: center;
float:left;
}
.navigation ul {
padding-bottom:20px;
margin-bottom:20px;
}
.navigation ul li {
text-align:center;
list-style:none;
float:left;
font-family:Verdana;
font-size:10px;
color:#999;
text-decoration:none;
padding-left:0px;
}
.navigation ul li a:hover {
color:#FFF;
text-decoration:none;
}
.navigation ul li a {
color:#999;
text-decoration:none;
}
Soweit so gut, der gesamte Inhalt soll erstmal in die Mitte verschoben werden, damit die Seite auch auf anderen Bildschirm Dimensionen richtig angezeigt wird.
Hier noch einmal ein Screen der HP, wie sie aussehen solle und wie sie momentan aussieht !
Und so siehts halt mit den obigen Code aus !:
