Nerdy
Mitglied
Hallo, ich suche schon den ganzen Abend nach einer Lösung.
Ich möchte gerne das bei mir alles immer in der Mitte angezeigt wird.
HTML Code
CSS
Ich möchte gerne das bei mir alles immer in der Mitte angezeigt wird.
HTML Code
HTML:
<!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" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="Nerdy - enchantedBeer" />
<meta name="keywords" content="" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="main">
<div class="header">
<div class="header_title">
<h1>Enchanted Gaming Community</h1>
<div class="header_social">
<a href="#" class="fb" title="fb"></a> <a href="#" class="twitter" title="twitter"></a> <a href="#" class="twitch" title="twitch"></a> <a href="#" class="yt" title="yt"></a>
</div>
<h3 class="sub_title">Wähle dein Bereich aus</h3>
</div>
</div>
<div class="content">
<div class="clanbox">
clan
</div>
<div class="altisbox">
<img src="img/altis.png" alt="altis">
</div>
<div class="epochbox">
epoch
</div>
</div>
<div class="footer">
© 2015 Nerdy • www.enchantedlife.de
</div>
</div>
</body>
</html>
CSS
HTML:
body {
position: static;
background-color: #312f31;
text-align: center;
color: #fdfbff;
width: 1920px;
height: 1080px;
font-family: arial;
display: block;
margin-left: auto;
margin-right: auto;
}
.header {
width: 1080px;
height: auto;
float: top;
}
.header_title {
text-align: left;
color: #b7b7b7;
}
.sub_title {
text-align: left;
color: #777777;
margin-top: -20px;
}
.content {
padding-top: 80px;
}
.header_social {
float: right;
margin-top: -45px;
text-align: right;
}
.fb {
width: 60px;
height: 60px;
float: left;
margin-left: 15px;
background-image: url('img/ts.png');
display:block;
}
.fb:hover {
background-image: url('img/tshover.png');
}
.twitter {
width: 60px;
height: 60px;
float: left;
margin-left: 15px;
background-image: url('img/twitter.png');
display:block;
}
.twitter:hover {
background-image: url('img/twitterhover.png');
}
.twitch {
width: 60px;
height: 60px;
float: left;
margin-left: 15px;
background-image: url('img/twitch.png');
display:block;
}
.twitch:hover {
background-image: url('img/twitchhover.png');
}
.yt {
width: 60px;
height: 60px;
float: left;
margin-left: 15px;
background-image: url('img/yt.png');
display:block;
}
.yt:hover {
background-image: url('img/ythover.png');
}
div.clanbox {
width: 300px;
height: 500px;
margin-right: 90px;
background-color: #5e5c5f;
float: left;
border: 1px solid #727272;
box-shadow: 0px 0px 20px #000000;
padding: 10px;
}
div.clanbox:hover {
-moz-box-shadow: 0 0 60px rgba(0,0,0,1);
-webkit-box-shadow: 0 0 60px rgba(0,0,0,1);
box-shadow: 0 0 60px rgba(0,0,0,1);
}
div.altisbox {
width: 300px;
height: 500px;
margin-right: 90px;
background-color: #5e5c5f;
float: left;
border: 1px solid #727272;
box-shadow: 0px 0px 20px #000000;
padding: 10px;
}
div.altisbox:hover {
-moz-box-shadow: 0 0 60px rgba(0,0,0,1);
-webkit-box-shadow: 0 0 60px rgba(0,0,0,1);
box-shadow: 0 0 60px rgba(0,0,0,1);
}
div.epochbox {
width: 300px;
height: 500px;
margin-right: 90px;
background-color: #5e5c5f;
float: left;
border: 1px solid #727272;
box-shadow: 0px 0px 20px #000000;
padding: 10px;
}
div.epochbox:hover {
-moz-box-shadow: 0 0 60px rgba(0,0,0,1);
-webkit-box-shadow: 0 0 60px rgba(0,0,0,1);
box-shadow: 0 0 60px rgba(0,0,0,1);
}
.footer {
color: #4d4b4e;
margin-top: 30px;
width: 1080px;
height: 100px;
float: left;
}