0

How would you guys make a solid ball of specific size and position so that the size or the position will not change according to its outer element. ( in the major browsers )

Lets say the outer element would be another ball that is always white.

Of course number one might be to use image of a solid ball.. depending on the case but, what about if i wanted the inner ball color to be easily editable.

So: How to achieve editable ball of specific size and position so that either one wont change on any major browser? ( considering that shape should also stay intact in all major browsers )

Only editable factor would have to be the color of it.

Joonas
  • 7,227
  • 9
  • 40
  • 65
  • In cases like this you use absolute or fixed positioning of elements in css and do not place one element inside of other one. – eugeneK Jun 20 '11 at 06:32
  • @eugeneK its more about the whole scenario. But, you are right about that part. – Joonas Jun 20 '11 at 06:34

1 Answers1

1

may be can use border-radius to make the div a circle. So it can be easy for you to edit the color of div. For position you can define position absolute or fixed to it.

FOR EXAMPLE

div{
    -webkit-border-radius: 999px;
        -moz-border-radius: 999px;
        border-radius: 999px;
        behavior: url(PIE.htc);
    position:absolute;
    top:20px;
    right:50px;
    width:200px;
   height:200px;
}

check this examples.

Easier way to create circle div than using an image?

How to use CSS to surround a number with a circle?

Community
  • 1
  • 1
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • I didn't know something like css3 pie existed. This does seem like superior way of doing it but im gonna wait a while before accepting this... maybe check out css3 pie a little more. – Joonas Jun 20 '11 at 06:41
  • pretty revolutionary stuff i gotta say.. feel like hitting my head on a wall for not knowing about this :D – Joonas Jun 20 '11 at 06:48