johnnyderdepp
Mitglied
Hallo !
Ich habe ein 2 divs mit jeweils 3 divs - diese 3 sollten 3 boxen darstellen, die in 2 reichen sind.
Ich bekomme aber die 3 divs innerhalb der 2 nicht zentriert...
hier mein code:
css:
HTML:
Ich habe ein 2 divs mit jeweils 3 divs - diese 3 sollten 3 boxen darstellen, die in 2 reichen sind.
Ich bekomme aber die 3 divs innerhalb der 2 nicht zentriert...
hier mein code:
css:
Code:
#box_corner {
float: left;
margin-left: 10%;
margin-right: 10%;
border: 1px solid #000;
width: 80%;
}
#wrapper {
margin: 0px auto;
}
#inhalt {
width: 1000px;
font-size: 400;
font-family: 'Oswald', sans-serif;
color: #FFF;
}
#box {
float: left;
width: 250px;
height: 150px;
padding: 20px;
margin-top: 30px;
animation: Header_einblenden 2S;
border: 1px solid #FFF;
}
.l {
text-decoration: none;
text-align: center;
width: 250px;
height: 150px;
list-style-type: none;
display: block;
}
.l a {
display: block;
text-decoration: none;
width: 250px;
height: 150px;
line-height: 125px;
background: #B40404;
color: #FFF;
border-radius: 20px 20px 20px 20px;
border: 1px dotted #FFF;
font-size: 400;
font-family: 'Oswald', sans-serif;
opacity:0.7; /* allgemein */
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.l a:hover {
opacity:0.8; /* allgemein */
background: #7e7e7e;
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
#inhalt {
float: left;
height: 100%;
width: 100%;
min-height: 100%;
height: auto;
height: 100%;
}HTML:
HTML:
<!doctype html>
<html>
<div id="wrapper">
<head>
<meta charset="utf-8">
<title>Mathis Hüttl</title>
<link rel="stylesheet" type="text/css" href="style.css" title="Design">
<link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<header id="kopf">
<h1>Mathis Hüttl</h1>
</header>
<content id="inhalt">
<div id="box_corner">
<div id="box">
<ul id="list">
<li class="l" id="link1liste1"><a href="Programme.html">Programme</a></li>
</ul>
</div>
<div id="box">
<ul id="list">
<li class="l" id="link1liste2"><a href="Referenzen.html">Referenzen</a></li>
</ul>
</div>
<div id="box">
<ul id="list">
<li class="l" id="link2liste1"><a href="#">Programmierfabrik</a></li>
</ul>
</div>
</div>
<div id="box_corner">
<div id="box">
<ul id="list">
<li class="l" id="link3liste1"><a href="me.html">Über mich</a></li>
</ul>
</div>
<div id="box">
<ul id="list">
<li class="l" id="link2liste2"><a href="Kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="box">
<ul id="list">
<li class="l" id="link3liste2"><a href="impressum.html">Impressum</a></li>
</ul>
</div>
</div>
</content>
<p id="copyright">Copyright 2013 Mathis Hüttl</p>
</body>
</div>
</html>
