SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    LONDON
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Question

    How can I position a table or image over another object. Because everybody's screen resolution is different instead of using top and left values I would like to be able to position an object in relation to another.

    For example, I have an image at a certain position on the page. I put a onmouseover command which changes the visibility style of another image to visible, so it can be seen. I want the new image to display 10 pixels below the image that triggered the display - how would this work?

    Is it something like top = image1.top + 10px ?
    Last edited by dhs; Jun 20, 2004 at 10:11.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    How can you position what?

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your not conforming to xhtml 1.0 strict or 1.1, you can use a div wrapper:

    Code:
    <div align="center">
        content here
    </div>
    or through css:

    Code:
    body {margin:0 auto; text-align:left;}
    Does this help?

    -jamie
    ----
    Cheers, Jamie

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry my answer was regarding the first post (that has now been changed)..hehehe.

    -jamie
    ----
    Cheers, Jamie

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    LONDON
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, sorry. I didn't mean to submit the first post - now edited.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To position one element in relation to another the parent just needs to have a position:defined. In most cases position:relative is used without co-ordinates so that there is no effect to the parent.

    The child element will now automatically be positioned in relation to the parent by simply applying position:abosolute with the necessary co-ordinates.
    Code:
    <div style="position:relative">
    <div style="position:absolute;left:10px;top:10px">
    This is 10px left and down from the top left of my parent.
    </div>
    </div>
    (don't use inline styles they are there just for example )

    There is a longer explanation in the FAQ sticky at the top of the threads.

    Paul


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
  •