W3C home > Mailing lists > Public > www-html@w3.org > November 2000

Re: CSS

From: Daniel Acton <dacton@itouch.co.za>
Date: Wed, 8 Nov 2000 13:33:37 +0200 (SAST)
To: Nicole Sergent <Nicole.Sergent@axs-tech.com>
cc: www-html@w3.org
Message-ID: <Pine.BSF.4.21.0011081327430.23266-100000@alcapone.intouch.co.za>

Hi Nicole.

I have a couple of ideas for you.

Define the images on seperate layers, each with it's own z-index and
position. Here's an example

<style>
  .bigImage
  {
    z-index: 1;
    position: absolute;
    top: 100px;
    left: 100px;
  }

  .smallImage
  {
    z-index: 2;
    position: absolute;
    top: 150px;
    left: 150px
  }
</style>

and then when you place the images :

<div class="bigImage">
  <img src="pathToBigImage .../>
</div>

<div class="smallImage">
  <img src="pathToSmallImage .../>
</div>

That should work. If you wish to place things relatively, try replacing
"position: absolute;" with "position: relative;", and the element you
define like that will be placed with co-ordinates relative to the last
element placed on the page. 

Just be wary that results may differ between browsers ... sad but true.

Hope it helps.
Daniel


On Wed, 8 Nov 2000, Nicole Sergent wrote:

> Hello,
> 
> I am trying to use CSS in order to place a small image (a dot) at some
> x,y coordinates over a larger rectangular image. It works fine only if
> the large image is placed at 0,0 coordinates, in which case I use for
> both images the absolute positioning. I would like to be able to make
> the same thing with the large image somewhere else on the page. So the
> question is how to place the dot image at some coordinates relative to
> the big image ? Is this possible with CSS ?
> 
> Any help will be highly appreciated !
> 
> Nicole
> 
> 
> 
Received on Wednesday, 8 November 2000 06:37:38 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 27 March 2012 18:15:44 GMT