container in die Mitte

html.de-Forum HTML, XHTML & CSS
1

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
[HTML]

Titel 
<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" />

Enchanted Gaming Community

Wähle dein Bereich aus

</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>
[/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;
}[/HTML]

2 
   float: top;

Seit wann gibt es denn das? :smiley:

Irgendwie hat jedes Element bei dir ein float: left, so kann das mit der Zentrierung auch nicht klappen.

3

Ja gut, float: top ist schwachsin, :wink: Aber ichmöchte die boxen die ich da habe alle neben ein ander haben… und mit dem Float: left; geht das.

4

Hier ist auch mal ein Link http://enchantedlife.de/enterpage/

5

[HTML]

[/HTML]

Du kannst auch mit display: inline-block arbeiten, wenn du Elemente nebeneinander darstellen möchtest.
https://www.google.de/search?q=div+container+zentrieren&ie=utf-8&oe=utf-8&gws_rd=cr&ei=OooAVf_sGYmrPLfOgfAC

6

#mein eine fixe Breite geben und mit margin:0 auto zentrieren.

7

Hallo

und mit dem Float: left; geht das.

Mit float geht aber auch zwangsweise noch einiges andere, was du wahrscheinlich nicht willst und erwartest. Gib mal den beiden Containern main und content jeweils einen Rahmen mit auf den Weg und schau dir dann die Seite an:

div.main { border: 2px solid orange; } div.content { border: 2px solid yellow; }

Du wirst feststellen, das sich die drei nebeneinanderstehenden Container außerhalb dieser beiden Container befinden. Somit wird das Zentrieren natürlich schwierig.

Vielleicht kann dich das überzeugen die Grundlagen von HTML / CSS zu lernen anstatt mehr oder weniger immer die gleichen Fragen zu stellen und unsere Antworten darauf größtenteils zu ignorieren. Darauf hatte Tronjer dich ja bereits in einer deiner vorigen Fragen hingewiesen.

Im Zusammenhang mit float solltest du dich auch mal mir clear beschäftigen. Die gehören immer zusammen. Alter Spruch: Wer floatet muss auch clearen. Googeln nach „css float clear“ sollte dir weiterhelfen.

Gruss

MrMurphy