CSS animation by Building a Ferris Wheel

Hello, I have a general question regarding step 15 and the numbers used in this exercise. I was able to perform the task just fine however if I wanted to do a similar task myself with say 8 cabins instead of 6, I wouldn’t know where to start. How are the number determined for the ‘right’, ‘left’, and ‘top’ entries?

.cabin:nth-of-type(1) {
right: -8.5%; <------ how are these number chosen?
top: 50%;
}
.cabin:nth-of-type(2) {
right: 17%;
top: 93.5%;
}
.cabin:nth-of-type(3) {
right: 67%;
top: 93.5%;
}
.cabin:nth-of-type(4) {
left: -8.5%;
top: 50%;
}
.cabin:nth-of-type(5) {
left: 17%;
top: 7%;
}
.cabin:nth-of-type(6) {
right: 17%;
top: 7%;
}

hello and welcome to fcc forum :slight_smile:

i assume these are all “absolute” positioned, and if you want to know more about how “absolute” positioning and thus placing them on DOM, i would recommend reading through this mdn article, and some of your own research on this matter, happy learning :slight_smile: position - CSS: Cascading Style Sheets | MDN

I appreciate your response. I reviewed the material found at the link you provided. It does cover a lot; however. my question is how are the values of the numbers figured out?
For exaample:

.cabin:nth-of-type(1) {
right: -8.5%;
top: 50%;
}
.cabin:nth-of-type(2) {
right: 17%;
top: 93.5%;
}

Why is it “-8.5%” and not “-13”? How are these values determined? Whether they are positioned as absolute, static, or fixed; none of those determine the actual value but rather how it behaves.

So if I wanted to make the same “Ferris Wheel” with 8 cabins instead of 6, how do I determine the values to enter for top, right, or left?

  • that depends on you “designer/coder” and your “requirements”
  • there values are determined based on your “container” available width, if you are not comfortable using “%” use “static” with “px”
  • i would assume, you would have to divide your intended “wheel” to be broken into “8” instead of “6” equal parts

most of all, there’s nothing like playing with your “assumptions” and see if it “sticks” or not with your “researched / acquired” knowledge

happy learning :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.