Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    mcc
    mcc is offline
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position Images Relative to Other Images

    I designed the following banner for my website:


    <img src="http://mycoincollection.net/banner.jpg" alt="My Coin Collection">
    <div style="position: absolute; left: 285px; top: 100px; width: 100px; height: 100px;">
    <p><a href="http://www.mycoincollection.net"><img src="http://mycoincollection.net/home.jpg" /></a></p>
    </div>
    <div style="position: absolute; left: 435px; top: 100px; width: 100px; height: 100px;">
    <p><a href="http://mycoincollection.net/phpBB-3.0.12/phpBB3/"><img src="http://mycoincollection.net/forum.jpg" /></a></p>
    </div>
    WEB LINK

    It looks fine on this page, but when you use the PHP function "include", the buttons show up in the wrong place, because there position is relative to the whole page, not to the banner. How do I fix this?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Use are using absolute which is anchored to the top left corner of the page. Better is to put your buttons into the div with the banner and use relative positioning.

    See what this does for you:
    Code:
    <div style="width:1039px;height:180px;">
    <img src="http://mycoincollection.net/banner.jpg" alt="My Coin Collection">
    <a href="http://www.mycoincollection.net"><img src="http://mycoincollection.net/home.jpg" width="156px" height="53px" style="position: relative;top:-60px;left:200px;"/></a>
    <a href="http://mycoincollection.net/phpBB-3.0.12/phpBB3/"><img src="http://mycoincollection.net/forum.jpg" width="156px" height="53px" style="position: relative;top:-60px;left:400px;" /></a>
    </div>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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