Ich bekomme immer den Fehler das die Box nicht mittig ist und meine Div boxen den main berreich überschreiten siehe Bild.
Bild nicht mittig:
Bild überschreitet die main box , das oben im Hintergrund ist die main box der Rest mit den Text sind die Div boxen:
HTML Code:
PHP Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta lang="de">
<title> Index </title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="header">
<ul class="navi">
<a class="title">Test</a>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
<div id="main">
<ul class="part">
<div class="box">
<p>HLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="box2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="box3">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</ul>
</div>
</body>
</html>
CSS Code:
PHP Code:
body {
margin:0px;
padding:0px;
background-color:#eee;
font-size:100%;
}
#header {
margin:0px;
padding:0px;
width:auto;
height:auto;
background-color:#fff;
text-align:right;
}
ul {
padding:1.5em;
margin:0;
}
.navi a {
font-family:helvetica;
color:#333;
font-weight:100;
text-decoration:none;
}
.navi li {
list-style:none;
display:inline;
}
.navi a , li {
padding:5px;
}
.navi a:hover {
color:black;
}
.navi a.title {
float:left;
color:#333;
margin:0;
padding:0;
font-weight:bold;
}
#main {
margin:0 auto;
padding:0;
width:auto;
height:auto;
text-align:center;
background-color:#222;
}
.part {
width:auto;
height:auto;
padding:5em;
background-color:#777;
margin:0 auto;
}
.box {
padding:0;
margin:0 auto;
width:auto;
height:auto;
background-color:#555;
float:left;
}
.box2 {
padding:0;
margin:0 auto;
width:auto;
height:auto;
background-color:#666;
float:left;
}
.box3 {
padding:0;
margin:0 auto;
width:auto;
height:auto;
background-color:#555;
float:left;
}
Kennt wer ne Lösung dafür?
