Direct question - How would I place certain objects or small text within a certain area. For example, how would I replace the following image with html/javascript.
--- I don't have enough reps to post an image :/ but try this URL - https://i.sstatic.net/a3eWL.jpg
Big picture - I am trying to create a kml file for Google Earth that when the point is clicked, the balloon description window pops up and I can display my html formatted diagram showing where the satellites are at that instant. Google Earth and KML docs allow for pretty much any html formatting within it, so currently looking for a good way to do this.
Disclaimer: It has been a few years since i have done any html or javascript editing, so general examples and insight is greatful.
Thanks
Essentially the below section is what I did.
<div style="display: block; position: relative; width: 300px; height: 300px; border: 1px solid black; background: gray;">
<div style="position:absolute; width: 296px;height: 296px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 148px; border-radius: 148px;"></div>
<div style="position:absolute; width: 148px;height: 148px;top: 72px;left: 72px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 75px;border-radius: 75px;"></div>
<div style="position:absolute; width: 4px; height: 4px;top:148px; left:148px; background-color: black;"></div>
<div style="position: absolute; font-size: 0.8em; color: #222222; top: %dpx; left: %dpx;">%d</div>
</div>
The last div are the labels that are placed wherever. The %d are integer values (from my python code)
In addition, here is the working example. Props to nico http://jsfiddle.net/94Kzt/72/