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

0 points
Submitted by Caters carrots
over 9 years

Center around the sun

I want to center the planets around the sun. I have tried adjusting the percents for the position from 50 and 50 but when I look at the code it looks approximately centered, particularly when zoomed out to see all the planets, and when I look at the result of the code it doesn’t look centered at all. The only one that looks centered in both cases is earth, especially if you get rid of the css code for mars, venus, mercury, and their orbits.

How can I get all 4 of these planets centered around the sun? I even put in a div for the sun around the planet divs like how I might put a planet div around a moon div and it did not work to center the planets around the sun.

Here is a link to my codebit: http://www.codecademy.com/devPlayer63572/codebits/cgQdsB

Answer 54b25b3f93767601390055e9

0 votes

Permalink

Your planets are perfectly centered. It’s just that the sun’s border is shifting it slightly away from the center; set border-style to “none” and see how the sun shifts to the center. You can remedy this by adding -8px to your margins, to compensate for the 8px shift due to the border.

I can see that Pluto and Neptune’s orbits intersect, but that’s because you set the margins of Pluto’s orbit to -800px (it should be -750px if you don’t want them to intersect, as that’s half of the orbit’s 1500px diameter). You may have done that on purpose though, as real Pluto’s orbit is elliptical and does appear to intersect Neptune’s when looked at from above.

Here’s the code I edited: http://www.codecademy.com/TheVault/codebits/NJrp03

Hope that helped.

PS you don’t need to paste the keyframes code over and over again. As the animation is the same for all orbits, it’s enough to define the animation “spin-right” once. I didn’t bother to remove them in my codebit though.

points
Submitted by TheVault
about 9 years

5 comments

Caters carrots about 9 years

Well I copied and pasted the keyframes code over and over again because I wanted the planets to revolve at different speeds

Zeke Y about 9 years

@Caters carrots, you don’t need to do that. I can tell you how to do it without copy/pasting over and over if you want, or else I’ll let you figure it out yourself :)

Caters carrots about 9 years

how can I get the planets to revolve at different speeds without copying and pasting the keyframes code over and over?

Zeke Y about 9 years

I prefer Codepen over CC’s Codebits, so I made a pen here: http://codepen.io/KK4OXJ/pen/YPZVXm

Zeke Y about 9 years

You were using the exact same keyframe thing over and over, when just typing it once would’ve worked.