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)}
26.05.2015, 14:54
Warum keine margin-bottom??
Ähnliche Themen
Linear-Darstellung
