zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Warum keine margin-bottom??

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.05.2015, 14:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2015
Beiträge: 1
P3T3R. befindet sich auf einem aufstrebenden Ast
Standard Warum keine margin-bottom??

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)}
Angehängte Grafiken
Dateityp: jpg animate.JPG (284,3 KB, 3x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.05.2015, 15:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.207
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 15:43
Navigation positionieren maybebabe CSS 4 08.04.2013 22:17
rahmen um bilder- was mache ich falsch? R0sa CSS 3 19.11.2012 16:35
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 18.09.2012 23:16
joomla template wrock CSS 2 06.04.2012 19:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:50 Uhr.