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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sticky Footer Issues

    Hey

    I found this tutorial when searching the forum ( http://ryanfait.com/resources/footer...ottom-of-page/ ) but I have been unable to get it work on my site. It doesn't seem to be expanding the "main" div into the full right regardless of content. Heck, even reading about this I think I may have the wrong tutorial for what I want to do.

    This is the intended outcome (ignore the links for now, I will add those once this problem is fixed :P) http://www.tronet.ca/site.gif But this is what that tutorial gives me when I try it: http://www.tronet.ca/index2.html

    Is sticky footer the right term or am I looking up the wrong thing? I just want the footer to be at the bottom of the page (not the view) regardless of the amount of content.

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Comprox,
    The whole secret to the ryanfait method is the #push and the placement of the #footer. You have the push right, you just need to move the footer.

    Try it like this -
    Code:
    <div id="page">
    		<div id="header"> Head <img src="images/logo.jpg" class="floatright"> 
    		</div>
    
    		<div id="main"> Main Content Column 
    		</div>
    	
    		<div id="push"></div>
    	
    		
    </div>
    <div id="footer"> Footer 
    		</div>
    You'll need to add margin: 0 auto; to your footer then to center it.

    I have an even simpler method here.
    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

  • #3
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, that helped a bit but it was still not working. I played with it a bit and decided to try your method but it's having the same issue. It's being pushed too far down the page still on http://www.tronet.ca/index2.html ? (using the latest Firefox)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Now your mixing the two techniques. Neither is going to work that way.
    Choose one method and match your code line by line (both markup and CSS) till you get it working. It doesn't even matter which one you choose, I believe both work very reliably in all browers.
    I only linked you to my example because it's very simple - some people seem to have trouble with the mechanics of the #push div in the ryanfait layout. My example does not use the #push div.
    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

  • #5
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, as far as I can tell it should only be following your design now. It's close but the background of the main content area does not go down far enough sadly.

    http://www.tronet.ca/index2.html

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Try
    Code:
    #page {
    background:#1F1D1E url(images/contentbg.jpg) repeat scroll 0 254px;
    border-color:-moz-use-text-color #FDB515;
    border-style:none solid;
    border-width:0 2px;
    margin:0 auto -87px;
    min-height:100%;
    position:relative;
    text-align:left;
    width:800px;
    }
    
    #main {
    margin:0 auto;
    padding:0 0 87px;
    width:800px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning Comprox,
    Good job on the layout, it's looking and working much better. The validator does find a couple errors though.

    Quote Originally Posted by Comprox View Post
    It's close but the background of the main content area does not go down far enough sadly.
    You're still thinking of it like a normal layout and it's not. #main will come in handy for padding your text but the only way you can make it fill the space between your header and footer is by putting content in it.
    #page is already full height though.
    Moving that contentbg.jpg to#page, positioning it down below your #header, then leave #main with no color - That's what ab has shown you in his post below.
    The only thing I would change there is the padding on #main, something like padding: 10px 10px 87px; instead.
    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


  •  

    Posting Permissions

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