Question

The requirement is to have an image/graphic with five or six elements placed around and on top of it in a circular fashion. The elements are two short text phrases each with updated statistics. They are to appear on top of the image in the same relative position to the image. This is because the image itself contains graphics that are related to the statistics that are being shown.

The key is that as this web page is shown at different sizes and on different browsers, the active elements must always be shown in the same position relative to the image itself.

An example of this type of thing (although the actual image and need is quite different) would be an image of a clock with that shows the number of shooting stars seen and also the number of earthquakes detected at each even hour position. The statistics would need to be shown on the clock itself just next to (above, below, left, right) of the even hour number. This relationship between the statistics shown and the image needs to be maintained regardless of monitor size, browser, resizing, etc (within reason of course).

Answer 1

Make a page with all the text, and the image. Dont worry about where it shows up, and then use the css style

position:relative;
top/bottom: (x amount of pixels);
left/right: (x amount of pixels);

to change where they appear. Remember that when using “position:relative;” it adds pixels to the specified side. so

top: 20px;

will move the item 20px down .

you can also use negative values depending on what works best.

Good Luck,
-Brian