• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

container in die Mitte

Nerdy

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
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&auml;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;
}
 
Werbung:
Code: 
   float: top;
Seit wann gibt es denn das? :D

Irgendwie hat jedes Element bei dir ein float: left, so kann das mit der Zentrierung auch nicht klappen.
 
Ja gut, float: top ist schwachsin, ;) Aber ichmöchte die boxen die ich da habe alle neben ein ander haben... und mit dem Float: left; geht das.
 
Werbung:
Werbung:
Hallo

und mit dem Float: left; geht das.
Zum Vergrößern anklicken....

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:

Code: 
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
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben