mardi 2 juin 2015

DIV-Box center

Posted on 14:28 by verona
Hallo,
ich habe ganz viel gegoogelt, doch selbst nach noch so vielen verschiedenen Versuchen, bekomme ich einfach keine Lösung.
Also.
Ich habe folgende simple HTML-Datei:
HTML-Code:
<!DOCTYPE HTML>
<html>
        <head>
                <title>Startseite</title>
                <link rel="stylesheet" href="style.css">
        </head>

        <body>
                <h1 id="&Uuml;berschriften">Startseite</h1>
                <ul>
                        <li><a href="http://ift.tt/ScwrvV; class="Button">GO TO GOOGLE!</a></li>
                        <li><a href="http://ift.tt/ScwrvV; class="Button">GOOGLE AGAIN!</a></li>
                        <li><a href="http://ift.tt/1QnB7FZ; class="Button">I LOVE COMIC SANS :D</a></li>
                </ul>
                <div id=div>
            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 la
        </div>
        </body>
</html>
Und diese CSS-Datei:
Code:
#Überschriften{
        Color: #FF0000;
        text-shadow: 0px 0px 15px #ffffff;
}

body{
        background: url(Background.png)no-repeat top center;
        background-size: 100%
}

.Button{
        display: block;
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: url(Button.jpg) center center;
        background-size: 100%;
        color: #000000;
        border: 1px solid #77ff77;
        border-radius: 50px;
        transition: all 750ms;
        margin: 5px;

        font-family: "Comic Sans Ms";
        font-weight: bold;
        font-size: 20px;
        text-decoration: none;
        text-shadow: 0px 0px 15px #ff0000;
}

.Button:hover{
        color: #dddddd;
        border-radius: 10px;
        width: 300px;
        height: 135px;
        line-height: 135px;
        margin: 5px;
        text-shadow: 0px 0px 15px #0000ff;
        box-shadow: 0px 0px 50px #ffff00;
        font-size: 21px;
}

ul>li>p{
        color: #ffffff;
        font-size: 20px;
}

ul>li{
        float: left;
        list-style-type: none;
}
ul{
    max-width: 940px;
    margin: 0 auto;
}

#div{
    display: block;
    float: left;
    width: 1200px;
    height: 500px;
    margin: 10px auto;
    border: 2px solid #ffffff;
    border-radius: 50px;
        color: #dddddd;
    text-align: center;
    font-family: "Comic Sans Ms";
        font-weight: bold;
        font-size: 15px;
        text-decoration: none;
        text-shadow: 0px 0px 15px #0000ff;
}
Jetzt meine Frage:
Ich habe das große DIV unter den drei kleinen "Buttons" (unsorted list elemente). Diese habe ich auch zentriert. Das war kein Problem.
Aber die DIV (ganz unten in der CSS-Datei) will einfach nicht zentriert sein. Ich habe bei "margin" schon "auto" mit drinstehen, und ich habe auch schon versucht, in einer anderen DIV- die über den kompletten Bildschirm geht "text-align: center;" einzubringen, und die tatsächliche DIV da rein zubringen.

Aber das hat alles aus welchem Grund auch immer nicht funktioniert.
Wie bekomme ich in diesem Fall die DIV in die horizontale Mitte der Website?
Ich hoffe ihr könnt mir helfen.

Gruß BK

(Ich benutze die aktuellste Version des Google Chromes, und der zeigt das zumindest nicht zentriert an, auch wenn ich davon ausgehe, dass es nicht am Browser liegt, aber trotzdem dachte ich, schreib ich das mal dazu ;))


DIV-Box center
Categories:

0 commentaires:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)