Why does my moons orbit not follow the earth?


#1

What is wrong with this code?? :confused: :smile:

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%;

/* Play with these numbers to see what it does */
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 80px red;

}

earth {

/* Style your earth */
position:absolute;
top: 0%;
left: 50%;

height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;

}

earth-orbit {

/* For Section #2 */
position: absolute;
top: 50%;
left: 36.75%;

width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px:

border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;

-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;

}

moon {

/* Style your moon */
position:absolute;
top: 0%;
left: 50%;

height: 10px;
width: 10px;
margin-top: -5px;
margin-left: -5px;

}

moon-orbit {

/* For Section #2 */
position: absolute;
top: 50%;
left: 36.75%;

width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;

border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;

-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);
}
}


#2

In the index.html your moon must be a div inside the earth's div, so it will have the absolute position on earths' center.


#3

I have managed to get the moon to orbit the sun but not the earth...

<head>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- Right below is an image of the sun -->
    <div><img id="sun" src="XXX">
    <div id='earth-orbit'><img id="earth" src="XXX">
    <div id='moon-orbit'>
    <img id="moon" src="XXXX"></div>
</div>



#4

After try typing again, it looks like you forgot to close a div.