SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Feel my RewiredMind KMxRetro's Avatar
    Join Date
    Jan 2001
    Location
    Exeter, Devon, UK
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Positioning question..

    Hi all,
    Quite a simple one for you guys. I've searched and searched (guess I'm using the wrong terms! ) and can't find an answer.

    I have an image that site on my page. On top of that image, I've created a fixed size box that can be dragged around inside the images dimensions. Basically, it is so I can highlight a certain part of the image and use Imagemagick to cut it out later.

    My problem is this. I've made the box, and the image (duh!) and have gotten Javascript to work out the image's width and height for the movement code.

    What I need to do, is basically position the 0,0 (start) point of the box, to the same place as the top left (0,0) point of the image. I figure I'd use relative positioning, but I'm not sure.

    Any tips?

    Thanks,

  2. #2
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any tips?
    yeah, try it!

    So the img-container is the parent of the box? I guess it should be ok with: position:relative; top:0px; left:0px;

    good luck, and please show us the result if its online, i'm curious
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wisbin
    position:relative; top:0px; left:0px;
    position:relative; .... this means relative to where it would be if it wasn't positioned... setting it 0px away from where is starts off won't really make much of an effect...

    If you use position: absolute; you can set the position of something relative to the nearest positioned parent. So you could try this:

    Code:
    <div1><img /><div2>The box</div1></div2>
    Set div1 with something like this:

    Code:
    positon: absolute; top: 50px; left: 50px;
    And then its two children (img and div2) to 0,0:

    Code:
    positon: absolute; top: 0px; left: 0px;
    Easy

    Douglas
    Hello World


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •