I am trying to replicate a Udacity question in html. The original question is here. (*)
My example is here. As you can see(**), the only problem is the positions of the radio buttons(***). I’ve seen the positions using gimp, and tried to use those into the html. However, not only there is an offset (which is perfectly managable in itself) but also this offset varies from button to button. Even worse: there seems to be some kind of interaction: removing some buttons makes the rest get closer to where they should be.
I (suppose) I could just guess positions till I got it right, but as I will probably do this many times, I’d rather understand the problem better. What is going on ? Is there a better way to achieve the same result ?
(*) I’ve already been given the suggestion to look at the source, and tried to, not with much sucess
(**) I opened the file on firefox 14 and chromium 18
(***) they were meant to be on north, west, east and on the square just below west
Relative positioning is not what you want. Relative means offset the element from its nominal position, but then treat it just as if it were in its original position with regard to how it affects subsequent elements in the flow.
What you actually want is absolute positioning. First, you need to apply relative or absolute positioning to the container (the graph div), and then any absolute positioning you apply to the contents will be with respect to that container.
This terminology is a bit confusing, of course, since absolute positions are actually relative to a container.