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 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    problem with div fixed to the bottom of the page.

    I have an additional problem. I want the back link to follow the edge of the page when resizing.

    The back button is in its own div and container

    Code:
    #backcontainer {
    	position:relative;
    	width: 989px;
    	padding: 0px 0px 0px 20px;
    	margin: 0 auto;
    }
    and within this

    Code:
    #back {
    	position:fixed; 
    	bottom:15px;
    	z-index:+110;
    }
    here is a working example

    http://test.venndiagram.eu/backbuttontest.html

    If I set the padding on the container to 20px to the left then the back link only aligns to the edge of the page when the browser is smaller than the site, (this is the way I want it to look like).



    The moment I resize it to be bigger than the size of the site the back link moves about 15px right of the edge of the page

    [IMG]hhttp://i22.photobucket.com/albums/b304/heliosvk/Screenshot2011-04-02at135448.png[/IMG]

    If I remove the padding on the container:

    Code:
    #backcontainer {
    	position:relative;
    	width: 989px;
    	padding: 0px 0px 0px 0px;
    	margin: 0 auto;
    }
    then when the brower is bigger than the site the back link is aligned to the edge of the page (as I want it to be) but when you resize the browser to less than the width of the page it just moves right to the edge of the browser as in here



    see a working example of the site here.

    http://test.venndiagram.eu/backbuttontest.html

    Can anyone be so kind to help me with this. I've tried everything. Many thanks in advance

    Jordi
    Last edited by valentine; 04-02-2011 at 02:02 PM.

  • #2
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Change
    Code:
    #back {
    	position:fixed; 
    	bottom:15px;
    	z-index:+110;
    }
    to
    Code:
    #back {
    	position:fixed; 
    	bottom:15px;
    	z-index:110;
    }
    I think that will work.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That didn't seem to do anything. Any more ideas?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by valentine View Post
    That didn't seem to do anything. Any more ideas?
    We really need to see ALL your code in order to help you. Better still a link.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    We really need to see ALL your code in order to help you. Better still a link.

    Frank
    Hi efpeetee,

    I did post a link at the bottom of my first post (actually now I look at it I posted it twice) but here it is again:
    http://test.venndiagram.eu/backbuttontest.html

    Can you see the source from there?

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'm not sure exactly where you want the "back" to be positioned, but if the problem is the left to right movement as you resize the window, that's because #back is within #backcontainer which has margin:0 auto set to centre it....

    ..so when you resize your window the position on #backcontainer will move, and so will that of #back, as although you have set position:fixed it has no left or right value. In the absence of this the value will effectively be "auto" so it will move with #backcontainer. Set a left value to #back and it'll stay where it is. If that's what you want....

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi SB65, thanks for looking into this. I would like BACK to be anchored to the bottom of the browser so when I resize it moves up with the edge of the page. So in that respect, vertically it's already doing what I want it to do. I've set it to center because the container for the main page also does that, so basically I want the site to be centered, and the back button to be aligned to the left edge of the main container if that makes sense. This now only happens when the browser is smaller than the page. Similarly, if I remove the 20px left padding in backcontainer, it only stays aligned when the browser window is bigger than the site, but moves right to the edge of the browser window when it's smaller. I want to find a way so the BACK link always moves with the left edge of the page which isn't happening now. Does that make sense?

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Ah right. The problem is with #backcontainer. You have:

    Code:
    #backcontainer {
        margin: 0 auto;
        padding: 0 0 0 20px;
        position: relative;
        width: 989px;
    }
    - total width 989px+20px left padding = 1009px. But #container, which you're trying to line up with has:

    Code:
    #container {
        margin: 0 auto;
        padding: 0 20px 20px;
        position: relative;
        width: 989px;
    }
    -total width 989px + 20px left padding and 20px right padding = 1029px. So they don't line up. Try:

    Code:
    Code:
    #backcontainer {
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        width: 989px;
    }

  • Users who have thanked SB65 for this post:

    valentine (04-05-2011)

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    YESSS! (it worked). Thank you so much.

    While you're looking at the site, do you think you might know what is causing this other problem? It's an issue that has only appeared with recent versions of firefox as it used to work fine on all browsers. I've described the issue here.

    http://www.codingforums.com/showthread.php?t=223079

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    YESSS! (it worked). Thank you so much.

    While you're looking at the site, do you think you might know what is causing this other problem? It's an issue that has only appeared with recent versions of firefox as it used to work fine on all browsers. I've described the issue here.

    http://www.codingforums.com/showthread.php?t=223079


  •  

    Posting Permissions

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