tags:

views:

89

answers:

2

I want to put a smaller circle inside an other bigger.(Not exactly circles but rings.Doesn't matter..)
Both circles should be centered vertically and horizontally in the body of my page.(as if they had the save center)
My goal is to make a radar(something like this-->[http://media.photobucket.com/image/radar/scottb57/radarScreen-719485.jpg) but the number of rings in the radar will be according to some parameters.
Should i play with z-index?

A: 

There's probably a better way to do it, but this is what I've seen and used:

<html>
   <head>
      <style type="text/css">
         img {
            /* this puts every img's upper-left corner in center of page */
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
         }
         /* now move each img upwards and leftwards to center it */
         img#a {
            /* this img is 206x42 */
            margin-left: -103px;
            margin-top: -21px;
         }
         img#b {
            /* this img is 84x90 */
            margin-left: -42px;
            margin-top: -45px;
         }
         img#c {
            /* this img is 12x20 */
            margin-left: -6px;
            margin-top: -10px;
         }
      </style>
   </head>
   <body>
      <img id="a" src="a.png">
      <img id="b" src="b.png">
      <img id="c" src="c.png">
   </body>
</html>
system PAUSE
Thanks master!Saved my time!
Display Name
+1  A: 
system PAUSE