#1
  1. No Profile Picture
    Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Seattle-Tacoma, Washington USA
    Posts
    81
    Rep Power
    0

    Positioning images with CSS


    I have a table with a width of 100%. At the right end, I want to position an image with its top right corner relative to the top right corner of the table. I cand quite figure out how to do it with CSS.

    Can someone give me a hint?
  2. #2
  3. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338
    Post what you have done so far and I'll be more than happy to help you; by pointing out the mistakes you made and/or suggesting new code.
    I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.

    Stop Using Pop-Ups
  4. #3
  5. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    Originally Posted by Saeed al-Sahaf
    I have a table with a width of 100%. At the right end, I want to position an image with its top right corner relative to the top right corner of the table. I cand quite figure out how to do it with CSS.

    Can someone give me a hint?
    Will this link help?

    http://www.htmlhelp.com/reference/cs...-position.html


    vbrtrmn, is that Cowboy Bebop?
    Hello, old friend...
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Austin
    Posts
    126
    Rep Power
    11
    if you put
    style="position:absolute; right:0"
    in the img tag. That will put the image all the way to the right of the screen, which sounds like that's what you're trying to do.

    If you want to do something a little more fancy, like put the image all the way to the right of a table with say 80% width. You could do something like this:
    Code:
    <table width="80%" bgcolor="blue">
       <tr>
          <td>
             <div style="position:relative"><p style="position:absolute;right:0">This would be your image</p></div>
          </td>
       </tr>
    </table>
    Hope that helps.
    I wrote a little tutorial that kinda' covers this sorta' thing. You can check it out here. Let me know what you think.
    Last edited by dustyreagan; May 17th, 2004 at 11:34 AM.

IMN logo majestic logo threadwatch logo seochat tools logo