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 4 of 4
  1. #1
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts

    Right Floated image even on scroll

    Hi,

    I'm trying to float an image to the right centre vertical aligned out side of my main page container so it butts up to the scroll bar.

    However I also want this image to stay floated vertically on the page even when the page is scrolled down.

    I've seen it done before but can't remember on what sites the closest I can find to an example is the auto scroll box on the right of the following page.
    http://www.ultimate-guitar.com/tabs/...h/hurt_crd.htm

    As the page scrolls down the auto scroll box goes with it. Now I don't need anything as complex as this as its just a single <a> and an image I just need to make it sticky to the right border and move down with the scroll.
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello hinch,
    A little harder to find because you styled it inline ...
    In your markup change <div id="scroll" style="position: absolute;> to <div id="scroll" style="position: fixed;>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    hinch (11-07-2009)

  • #3
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts
    ok spot on for maintaining position now slight problem how to get it to fix to the right margin without moving up/down when the browser is resized.

    PHP Code:
    <div style="position:fixed;margin-top:17%;">
    <?php if ($_SESSION['userid']) { ?>
    <a href="index.php?p=register"><img src="images/youhaveacard.jpg" border="0" /></a>
    <?php } else {?>
    <a href="index.php?p=upgrade"><img src="images/youdont_haveacard.jpg" border="0" /></a>
    <?php ?>
    </div>
    thats what i'm using at the moment you can ignore the php bits thats just because I need to display a different image depending on if you're logged in or not.

    If you need to know the image's are 150x300 dimensions.
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com

  • #4
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts
    ignore that one forgot we'd swapped position to fixed i was trying to use margin-right and wondering why it wasn't working using right:0px; solves the issue
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com


  •  

    Posting Permissions

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