XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Warum keine margin-bottom?? (http://xhtmlforum.de/showthread.php?t=72059)

P3T3R. 26.05.2015 14:54

Warum keine margin-bottom??
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Leute!
Zur Zeit bringe ich mir ein bisschen HTML und CSS bei. Dabei habe ich einen kleinen Webinhalt gebastelet indem ich ich ein paar divs mit Style versetzt habe um dann an diesen verschiedene transform und animate Effekte auszuprobieren.

Alles schön und gut, nur bekomme ich es nicht auf die Kette das letzte div mit einer margin-bottom von 200px darzustellen. Ich habe schon einiges ausprobiert. Zum Beispiel "margin-bottom" welche sich auf div8 bezieht, oder welche sich auf den kompletten body bezieht. Einfach nur "bottom" funktioniert auch nicht.

Also ich möchte einfach nur einen unteren Abstand zum Seitenende haben, genauso wie es auch einen oberen Abstand zum Seiten Anfang gibt. Ich bin mir sicher ihr könnt mir helfen! :)

P.s. Der CSS code ist wahrscheinlich sowieso recht unsauber geschrieben und es gibt einige überflüssige Elemente. Vielleicht seht ihr ja direkt irgendwelche Fehler. Kommentare erwünscht...

Hier der HTML code:
HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<head>
<title>Animate</title>


<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

<div1> We transform and animate!! 1</div1>
<div2> We transform and animate!! 2</div2>
<div3> We transform and animate!! 3</div3>
<div4> We transform and animate!! 4</div4>
<div5> We transform and animate!! 5</div5>
<div6> We transform and animate!! 6</div6>
<div7> We transform and animate!! 7</div7>
<div8> We transform and animate!! 8</div8>


</body>

Hier der CSS code:
Code:

@charset "utf-8";
/* CSS Document */

div1{
        height: 50px;
        width: 500px;
        position: absolute;
        top: ;
        left: 50%;
        right:50%;
        margin-top:200px;
        margin-left: -250px;
       
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
       
}

div1:hover{
        background-color: #254D99;
        transition: background-color 2s ease-in;
}

div2 {
        height: 50px;
        width: 500px;
        position: absolute;
        left:50%;
        top:0%;
        margin-left: -250px;
        margin-top:450px;
       
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;                /*to align text central*/
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
       
}
div2:hover{
        transform: rotate(20deg);

}

div3 {
        height: 50px;
        width: 500px;
        position: absolute;
        left:50%;
        top:0%;
        margin-left: -250px;
        margin-top: 700px;
       
        font-size: relative;
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
       
}
div3:hover{
        transform: skew(30deg);
       
}
       
        div4 {
        height: 50px;
        width: 500px;
        position: absolute;
        left:50%;
        top:%;
        margin-left: -250px;
        margin-top:950px;
       
       
        font-size: relative;
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
       
}

div4:hover{
        transform: scale(0.5);
       
}

div5 {
        height: 50px;
        width: 500px;
        position: absolute;
        left:50%;
        top:%;
        margin-left: -250px;
        margin-top:1200px;

       
        font-size: relative;
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
}

div5:hover{
        transform:scale(1.5);
       
        }

        div6 {
        height: 50px;
        width: 500px;
        position: absolute;
        left:50%;
        top:%;
        margin-left: -250px;
        margin-top:1450px;
       
       
        font-size: relative;
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
}

div6:hover{
        transform: scale(1.2) skew(20deg);
        background-color: #254D99;
        transition: background-color 2s ease-in;
       
        }

div7 {
        height: 50px;
        width: 500px;
        position: absolute;
        left:50%;
        top:%;
        margin-left: -250px;
        margin-top:1700px;
       
       
        font-size: relative;
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       

        animation: flyZZ 2s ;
        animation: updown 2s infinite;
}

div7:hover{
        transform: scale(1.2) skew(20deg);
        background-color: #254D99;
        transition: background-color 2s ease-in;
        animation: mymove 2s infinite;
       

}
       

div8{
        height: 50px;
        width: 500px;
        position:absolute;
       
        left:50%;

       
        margin-left: -250px;
        margin-top:1950px;
       
       
       
        font-size: relative;
        font-weight:200;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        text-align:center;
        vertical-align: middle;
        line-height: 50px;
       
        background: #19293E;
        color: #FFF;
        padding-top: 10px;
        padding-bottom:10px;
               
        border: 1px solid black;
        border-radius: 20px;
        box-shadow: 0 0 80px #C300FF, inset 0 0 10px #A298A0;
       
        animation: flyZZ 2s;
       
}

div8:hover{
        transform: rotatez(20deg);
        background-color: #254D99;
        transition: background-color 2s ease-in;
       
        }
       
body{
       
        background-image: url("deep-space.jpg");
        background-attachment:fixed;
       
       
       

}

/*keyframes*/
       
        @keyframes updown {
   
        0%{transform:translateY(0px)}
        50%{transform:translateY(25px)}
        100%{transform:translateY(0px)}
}



        @keyframes fly{                                        /*flying in better with: transform:translateZ  !! */
        0%{transform:scale(0.2)}
        25%{transform:scale(0.4)}
        50%{transform:scale(0.6)}
        75%{transform:scale(0.8)}
        100%{transform:scale(1)}
        }
       
        @keyframes flyZ{
        0%{transform: perspective(5px) translateZ(-600px)}
        25%{transform: perspective(50px) translateZ(-600px)}
        50%{transform: perspective(500px) translateZ(-600px)}
        75%{transform: perspective(5000px) translateZ(-600px)}
        100%{transform: perspective(50000px) translateZ(-600px)}
       
        }
       
        @keyframes flyZZ{
        0%{transform: perspective(50px) translateZ(-800px)}
        100%{transform: perspective(50px) translateZ(0px)}


cloned 26.05.2015 15:12

Wenn du schon HTML und CSS lernst dann mach es dir nicht unnötig kompliziert und erfinde neue Elemente sondern verwende bereits vorhandene. <div class="div1"> Das ist ein div mit klasse div1</div> ist besser als <div1> Sicher, div1 ist nicht falsch, da neue Elemente als Blockelemente dargestellt werden, aber wozu neue Elemente erfinden wenn es bereits bestehende gibt.
Falls du CSS lernst dann informiere dich darüber, inwiefern position:absolut Auswirkungen auf den Dokumentfluss hat. Damit solltest du dein Problem lösen können. ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:11 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022