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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Canada
    Posts
    66
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Unhappy Huge problem with my footer!

    It's been such a big issue that I have gone away from it and then come back to it serveral times now and only now I am able to understand the problem but can't solve it.

    My problem is, I am trying to display a background in my page that goes behind my text and I want it to go to the bottom of my page and the Footer is to be on top of that but at the very bottom of the screen. The only way I have been able to get my footer to go to the very bottom and stay there is by removing my background. Not somthing I want to do.

    The following is what it looks like when I remove the background.

    http://robinsden.co.cc/services/painting/painting.php

    And.. the following is what it looks like when I leave the background in.

    http://robinsden.co.cc/index.php

    As you can see when I leave it in, it dose not go to the bottom of the screen.

    I know it's got somthing to do with the content div tag I am using but after playing with it quite a bit I still don't know what it is?

    My CSS script can be found on the following page http://robinsden.co.cc/Scripts/all.css

    Thanks for any help.
    My web site can be view here
    http://robinsden.com

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Add to bgfooter

    Code:
    clear:both;
    ...I think...
    Last edited by tspek; 11-26-2009 at 03:55 PM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello robin9000,
    Good job on the valid code! The only thing that's stopping this from working is you wrap the entire site in #wrap. The #footer needs to be seperated from #wrap for the negative padding to work.

    Move your closing tags around like this:
    Code:
       <span class="stylespecial">F</span><span class="style2">eed Back<br>
        Please fell free to send me any comments or suggestions you  have on Robin's Den.  All email is read day to day. Thank you and please enjoy your visit here at Robin's Den.</span></td>
        <td class="style1" valign="top" width="50%"><span class="stylespecial">A</span><span class="style2">bout Robin's Den</span> <br>
          This site's development is to show case services offered, such as computer repairs and web site design. Robin's Den furthermore is a place to unwind and enjoy  diverse topics, for instance jokes and ways to save money. I look forward to expanding Robin's Den into the future and  hope you enjoy your time here.</td>
      </tr>
    </tbody></table>
    </div>
    </div>
    
    <!--end main--></div>
    
    <!--Content ends here-->
    <div id="footer"> 
    <!--Footer Starts Here-->
    
    
    <!-- Start of StatCounter Code -->
    <div id="leftalign">
    <script type="text/javascript">
    var sc_project=4419983; 
    var sc_invisible=0; 
    var sc_partition=55; 
    var sc_click_stat=1; 
    var sc_security="46717204"; 
    </script>
    <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><span class="statcounter"><a class="statcounter" href="http://www.statcounter.com" target="_blank"><img src="http://c.statcounter.com/t.php?sc_project=4419983&amp;resolution=1920&amp;h=1200&amp;camefrom=http%3A//robinsden.co.cc/Scripts/&amp;u=http%3A//robinsden.co.cc/&amp;t=Robin%27s%20Den&amp;java=1&amp;security=46717204&amp;sc_random=0.008298132758701504&amp;sc_snum=1" alt="StatCounter - Free Web Tracker and Counter" border="0"></a></span>
    <noscript><div class="statcounter"><a title="counters for myspace" class="statcounter" href="http://www.statcounter.com/myspace/"><img class="statcounter" src="http://c.statcounter.com/4419983/0/46717204/0/" alt="counters for myspace" /></a></div></noscript>
    </div>
    <!-- End of StatCounter Code -->
    <div id="bgfooter"> 
    <script type="text/javascript" src="Scripts/footer.js"></script><div id="val_$_val"><p>Copyright 2009, Robin's Den - <a title="Ask about exchanging urls" href="http://robinsden.co.cc/links.php">Link exchange</a> | <a title="" href="http://robinsden.co.cc/privacy.php">Privacy Policy</a> | <a title="" href="http://robinsden.co.cc/termsofuse.php">Terms of use</a> | <a title="" href="http://robinsden.co.cc/disclaimer.php">Disclaimer</a> | <a title="This page validates as XHTML 1.0 Transitional" href="http://validator.w3.org/check/referer">XHTML</a> | <a title="This page validates as CSS" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p></div>
    <!--Footer Ends Here-->
    </div></div>
    <!--</div>   this was closing wrap and needs deleted-->  
    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

  • #4
    New Coder
    Join Date
    Mar 2009
    Location
    Canada
    Posts
    66
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello robin9000,
    Good job on the valid code! The only thing that's stopping this from working is you wrap the entire site in #wrap. The #footer needs to be seperated from #wrap for the negative padding to work.

    Move your closing tags around like this:
    Code:
       <span class="stylespecial">F</span><span class="style2">eed Back<br>
        Please fell free to send me any comments or suggestions you  have on Robin's Den.  All email is read day to day. Thank you and please enjoy your visit here at Robin's Den.</span></td>
        <td class="style1" valign="top" width="50%"><span class="stylespecial">A</span><span class="style2">bout Robin's Den</span> <br>
          This site's development is to show case services offered, such as computer repairs and web site design. Robin's Den furthermore is a place to unwind and enjoy  diverse topics, for instance jokes and ways to save money. I look forward to expanding Robin's Den into the future and  hope you enjoy your time here.</td>
      </tr>
    </tbody></table>
    </div>
    </div>
    
    <!--end main--></div>
    
    <!--Content ends here-->
    <div id="footer"> 
    <!--Footer Starts Here-->
    
    
    <!-- Start of StatCounter Code -->
    <div id="leftalign">
    <script type="text/javascript">
    var sc_project=4419983; 
    var sc_invisible=0; 
    var sc_partition=55; 
    var sc_click_stat=1; 
    var sc_security="46717204"; 
    </script>
    <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><span class="statcounter"><a class="statcounter" href="http://www.statcounter.com" target="_blank"><img src="http://c.statcounter.com/t.php?sc_project=4419983&amp;resolution=1920&amp;h=1200&amp;camefrom=http%3A//robinsden.co.cc/Scripts/&amp;u=http%3A//robinsden.co.cc/&amp;t=Robin%27s%20Den&amp;java=1&amp;security=46717204&amp;sc_random=0.008298132758701504&amp;sc_snum=1" alt="StatCounter - Free Web Tracker and Counter" border="0"></a></span>
    <noscript><div class="statcounter"><a title="counters for myspace" class="statcounter" href="http://www.statcounter.com/myspace/"><img class="statcounter" src="http://c.statcounter.com/4419983/0/46717204/0/" alt="counters for myspace" /></a></div></noscript>
    </div>
    <!-- End of StatCounter Code -->
    <div id="bgfooter"> 
    <script type="text/javascript" src="Scripts/footer.js"></script><div id="val_$_val"><p>Copyright 2009, Robin's Den - <a title="Ask about exchanging urls" href="http://robinsden.co.cc/links.php">Link exchange</a> | <a title="" href="http://robinsden.co.cc/privacy.php">Privacy Policy</a> | <a title="" href="http://robinsden.co.cc/termsofuse.php">Terms of use</a> | <a title="" href="http://robinsden.co.cc/disclaimer.php">Disclaimer</a> | <a title="This page validates as XHTML 1.0 Transitional" href="http://validator.w3.org/check/referer">XHTML</a> | <a title="This page validates as CSS" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p></div>
    <!--Footer Ends Here-->
    </div></div>
    <!--</div>   this was closing wrap and needs deleted-->  
    your right it dose work to put it like that but it then places the footer all the way along the bottom of the page, any sugestions on how to make it so that the footer will only be as wide as the content?
    Thanks.
    My web site can be view here
    http://robinsden.com

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by robin9000 View Post
    your right it dose work to put it like that but it then places the footer all the way along the bottom of the page, any sugestions on how to make it so that the footer will only be as wide as the content?
    Thanks.
    Give it a width. It's no different than any other element, it's just not contained by #wrap anymore.
    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
    •