This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Alexisia
over 10 years

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

2 votes

Permalink

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

points
Submitted by Niels
about 10 years

Answer 52f9422b9c4e9d9844005962

0 votes

Permalink

I CONT GET MY EARTH TO MOVE AROUND THE SUN

points
Submitted by conreed11
about 10 years

1 comments

genXtech about 10 years

show us your code

Answer 55b7950693767684ff0001f3

0 votes

Permalink

I don’t even have an Earth it just keeps saying it is wrong

points
Submitted by Dhilan
over 8 years

Answer 52d7c6ba8c1ccc020100134b

-1 votes

Permalink

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 ?

points
Submitted by Meester Alex
about 10 years

4 comments

Shashwat Sharma about 10 years

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

genXtech about 10 years

nu uh and its a comment not an answer

Zibbledurts about 10 years

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.

Anonymous about 10 years

stupid noob