SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to show image on an image ?

    Hello,

    I have this following code:

    Code:
    <table border="0" width="208" cellspacing="0" cellpadding="0" background="fridge_large.jpg" height="400">
    <tr>
            <td height="2"></td>
    </tr>
    <tr>
            <td align="right"><img border="0" src="otherimg.jpg" width="204" height="378" alt="Large Fridge"></td>
    </tr>
    <tr>
            <td height="20"></td>
    </tr>
    </table>
    Now in the middle cell there's a image showing. I want to put another image on top of it which is of 31px wide and should be 100% height of the cell. How to do it ?

    Thanks.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well that depends . Why can't you just place an <img> in there side by side? You could place a background-image on the <td> but it would be unlikely to have 100&#37; height all the time. An <img> would be best, though for it to be 100% height of the <td> at all times the image may scale some and not look all that well .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't want images to show side by side. I want to show 2nd image on top of 1st image. Also the 1st image is covering all of the td cell. And incase i put 1st image as td background then if the image is bigger than the size required then its not resizing and in background it gets cut off from the right coz table / cell is of fixed length.

    I tired to place a <div> it is working but if the table moves here and there then div does'nt. How to stick the <div> in the cell ?

    Thanks.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tapan View Post
    I tired to place a <div> it is working but if the table moves here and there then div does'nt. How to stick the <div> in the cell ?
    Show us a link . I think if I can see waht you are saying I can help more . I understand what you want with the image but you have it working with the <div> . We should be able to make it work if the table moves.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Show us a link . I think if I can see waht you are saying I can help more . I understand what you want with the image but you have it working with the <div> . We should be able to make it work if the table moves.
    Here's the code with div. It works but if i just change table's alignment to center then table gets in center whereas the div stays where it is.

    http://www.fridgepic.com/test/

    Thanks.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ignoring that you don't have a doctype/html/head/body tags in there, the problem is is that you absolutely positionied it, and it will stay in that spot since you gave coordinates.

    You need to set a containing block, which you will need an extra <div> (you can't place it on the <td> since it doesn't work all that well).

    Then, even if you give margin:auto (to center it) it will still go with it
    Code:
    <table style="margin:auto;" border="0" width="208" cellspacing="0" cellpadding="0" height="400" background="fridge_large.jpg">
    <tr>
            <td height="2"></td>
    </tr>
    <tr>
            <td align="right">
    <div style="position:relative;"><img border="0" src="cat_l.jpg" width="204" height="378" alt="Large Fridge"><div style="position: absolute; width: 31px; height: 100&#37;; left:85px; top:10px" id="layer1"><img src="handles1.jpg" width="31" height="378" /></div></div></td>
    </tr>
    <tr>
            <td height="20"></td>
    </tr>
    </table>
    The inline style there for example ONLY
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Ignoring that you don't have a doctype/html/head/body tags in there, the problem is is that you absolutely positionied it, and it will stay in that spot since you gave coordinates.

    You need to set a containing block, which you will need an extra <div> (you can't place it on the <td> since it doesn't work all that well).

    Then, even if you give margin:auto (to center it) it will still go with it
    Code:
    <table style="margin:auto;" border="0" width="208" cellspacing="0" cellpadding="0" height="400" background="fridge_large.jpg">
    <tr>
            <td height="2"></td>
    </tr>
    <tr>
            <td align="right">
    <div style="position:relative;"><img border="0" src="cat_l.jpg" width="204" height="378" alt="Large Fridge"><div style="position: absolute; width: 31px; height: 100%; left:85px; top:10px" id="layer1"><img src="handles1.jpg" width="31" height="378" /></div></div></td>
    </tr>
    <tr>
            <td height="20"></td>
    </tr>
    </table>
    The inline style there for example ONLY
    Wow. Thanks it works!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •