This forum is now read-only. Please use our new forums! Go to forums
How to make my earth move around sun ?
Guys Im learning Sun,Earth and Code course and I got everything right except my earth orbit I dont know how to fix it .. Can anyone help me with that ? I have tried to upload orbit but its not working how can i set orbit to earth in style.css ?
Answer 52c5b5177c82ca51480086f3
Mine works fine HTML:
CSS:
html, body { /* The universe takes up all available space */ width: 100%; height: 100%;
/* The universe is black */
background-color: black;
}
#sun { position: absolute; top: 50%; left: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
border-color: orange;
border-width: 8px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 128px red;
}
#earth { /* Style your earth */ position: absolute; top: 0; left: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
#earth-orbit { /* For Section #2 */ position: absolute; top: 50%; left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 2px;
border-style: dotted;
border-radius: 50%;
-webkit-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite; } @-webkit-keyframes spin-right { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin-right { 100% { transform: rotate(360deg); } }
Answer 52f9422b9c4e9d9844005962
Answer 55b7950693767684ff0001f3
Answer 52d7c6ba8c1ccc020100134b
My earth is not moving at all… :-(
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Right below is an image of the sun -->
<img id="sun" src="http://goo.gl/dEEssP">
<!-- Insert the 'earth' on the next line -->
<div id='earth-orbit'>
<img id='earth' src="http://goo.gl/o3YWu9">
</div>
</body>
style.css :
html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;
/* The universe is black */
background-color: black;
}
#sun {
position: absolute;
/* Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;
border-color: orange;
border-width: 2px;
border-style: solid;
border-radius: 50%;
/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#earth {
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
#earth-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
What did I do wrong ?
4 comments
READ THIS IT WORKS!!!! OK, I figured it out, and I am soooooooooooooooo mad!!!! ALL YOU HAVE TO DO IS LEAVE IT BLANK!!! I tried everything and then I was like FORGET IT!!! Then I just deleted it then hit save & submit, and it was like way to go! And there was a start next lesson button! So, to answer your question,
just keep position: absolute; as it is and continue with your coding! Just leave it blank!
P.S. You should vote for my answer because it’s the only one that actually works!!
nu uh and its a comment not an answer
I had the same issue at first. It turned out that the code isn’t compatible with all browsers. Wouldn’t work for me in Firefox, but Safari worked perfectly.
stupid noob
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
1 comments
show us your code