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

    Sticky footer problems

    Hello, I am creating a website at the moment. I have full web page now; however, the footer is not 'sticky'. When the web page has little content, the footer goes to the middle of the web page. Could someone help me to make it 'sticky' please? I've attempted using many guides by Googling, but have failed. Here is the css and html code:

    CSS:
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
      border: 0;
      font-family: inherit;
      font-size: 100%;
      font-style: inherit;
      font-weight: inherit;
      margin: 0;
      outline: 0;
      padding: 0;
      vertical-align: baseline;
    }
    
    html {
      font-size: 62.5%;
      /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
      overflow-y: scroll;
      /* Keeps page centred in all browsers regardless of content height */
      -webkit-text-size-adjust: 100%;
      /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
      -ms-text-size-adjust: 100%;
      /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    }
    
    body {
      background: #fff;
    }
    /* =Typography
    ----------------------------------------------- */
    body,
    button,
    input,
    select,
    textarea {
      color: #4b4b4b;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 1.6;
    }
    
    .body-open-sans,
    .body-open-sans,
    .site-description {
      font-family: "Open Sans", sans-serif;
    }
    
    /* Selected text background color */
    
    ::selection {
      background-color: #222;
      color: #fff;
    }
    
    /* Headings */
    h1, h2 {
      clear: both;
      line-height: 1.2;
      margin: 1.5em 0 0.5em;
      color: #3e3e3e;
      font-weight: bold;
    }
    
    .h1,
    .h2 {
      font-family: "Open Sans", sans-serif;
    }
    
    .site-title a,
    .site-description {
      color: #fff;
    }
    
    #footer a {
      color: #ccc;
    }
    /* =Color Schemes
    ----------------------------------------------- */
    #main {
      background-color: rgb(237, 237, 237)
    }
    #header {
      background: #272727;
      border-bottom: 5px solid #1f1f1f;
    }
    #footer {
      border-top: 1px solid #0d0d0d;
    }
    #footer {
      background: #131313;
    }
    #header {
      background-image: url(grain.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #272727));
      background-image: url(grain.png), -webkit-linear-gradient(#1a1a1a, #272727);
      background-image: url(grain.png), -moz-linear-gradient(#1a1a1a, #272727);
      background-image: url(grain.png), -o-linear-gradient(#1a1a1a, #272727);
      background-image: url(grain.png), linear-gradient(#1a1a1a, #272727);
    }
    
    /* =Layout
    ----------------------------------------------- */
    .clearfix:before,
    .clearfix:after {
      content: " ";
      display: table;
    }
    
    .clearfix:after {
      clear: both;
    }
    
    /* Text meant only for screen readers */
    .assistive-text {
      clip: rect(1px 1px 1px 1px);
      /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
    }
    
    #container {
      overflow: hidden;
    }
    
    .inner {
      padding: 0 20px;
      padding: 0 2rem;
    }
    
    .inner {
      margin: 0 auto;
      width: 100%;
      max-width: 1040px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    #main {
      padding: 30px 0;
      padding: 3rem 0;
    }
    
    #header {
      padding: 20px 0 0;
      padding: 2rem 0 0;
    }
    #header hgroup {
      margin-bottom: 15px;
      margin-bottom: 1.5rem;
    }
    #header .site-title {
      margin: 0 0 5px;
      margin: 0 0 0.5rem;
      display: inline-block;
      font-size: 40px;
      font-size: 4rem;
    }
    #header .site-description {
      margin: 0;
      font-size: 14px;
      font-size: 1.4rem;
    }
    #header .site-title a {
      text-decoration: none;
    }
    
    #footer {
      padding-top: 20px;
      padding-top: 2rem;
    }
    #footer #footer-nav {
      font-size: 14px;
      font-size: 1.4rem;
      padding-bottom: 20px;
      padding-bottom: 2rem;
    }
    #footer #footer-nav #footer-credits {
      float: left;
      width: 33.333%;
    }
    /*
    	Responsive grid layouts
    	Widths are in percentages
    	Based on 1000px wide layout
    ---------------------------------------------------- */
    /* Layout: Full width */
    /* Layout: Content - Primary Sidebar */
    .content-box {
      float: left;
      margin: 0 -34% 0 0;
      width: 100%;
      background-color: rgb(255,255,255);
      box-shadow: rgb(136, 136, 136) 0px 0px 2px 0px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
      margin-top: -30px;
    }
    #content {
      margin: 0 34% 0 0;
    }
    #secondary {
      float: right;
      width: 30%;
    }
    
    /* =Navigation
    ----------------------------------------------- */
    
    .main-navigation li {
      display: inline-block;
      position: relative;
      margin-right: 0.75em;
      font-size: 14px;
      font-size: 1.4rem;
    }
    
    .main-navigation .menu > ul > li {
      margin-right: 30px;
      margin-right: 3rem;
    }
    
    .main-navigation a {
      display: block;
      text-decoration: none;
      color: #fff;
      padding: 0.75em 0;
      line-height: 1;
      position: relative;
    }
    
    .search {
    	float: right;
    	width: 30%;
    	margin: 0.05em;
    	color: #ffffff;
    	font-weight: bold;
    }
    
    
    
    .box1 {
    	width: 45%;
    	padding-left: 10px;
    	display: block;
    	-moz-box-shadow: 0 0 2px #666666;
    	-webkit-box-shadow: 0 0 2px #666666;
    	box-shadow: 0 0 2px #666666;
    	background: #F8F8F8;
    	background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#EFEFEF));
    	background: -moz-linear-gradient(top, #F8F8F8, #EFEFEF);
    	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#EFEFEF');
    	
    	-moz-border-radius-bottomleft: 4px;
    	-webkit-border-bottom-left-radius: 4px;
    	border-bottom-left-radius: 4px;
    	
    	-moz-border-radius-bottomright: 4px;
    	-webkit-border-bottom-right-radius: 4px;
    	border-bottom-right-radius: 4px;
    	
    	-moz-border-radius-topleft: 4px;
    	-webkit-border-top-left-radius: 4px;
    	border-top-left-radius: 4px;
    	
    	-moz-border-radius-topright: 4px;
    	-webkit-border-top-right-radius: 4px;
    	border-top-right-radius: 4px;
    	
    	border: 1px solid white;
    	
    	padding-bottom: 20px;
    }
    HTML:
    Code:
    <!DOCTYPE html>
    <head>
      <base href="http://macintoshhelper.com/" />
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="author" content="Super User" />
      <meta name="description" content="Technology articles, wikis, communities and more. You will find blogs, forums, image galleries, my YouTube channel and more." />
      <meta name="generator" content="Joomla! - Open Source Content Management" />
      <title>Home</title>
      <link href="http://macintoshhelper.com/index.php" rel="canonical" />
      <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
      <script src="/media/system/js/core.js" type="text/javascript"></script>
      <script src="/media/system/js/caption.js" type="text/javascript"></script>
      <script type="text/javascript">
    window.addEvent('load', function() {
    				new JCaption('img.caption');
    			});
      </script>
    
    
    <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/templates/template1/css/style.css" type="text/css" />
    
    </head>
    
    <body>
    <div id="container" class="hfeed site">
    
    	<header id="header" class="site-header" role="banner">
    		
    		<div class="inner clearfix">
    				<hgroup>
    									<h1 class="site-title"><a href="http://macintoshhelper.com/blog/" title="Macintosh Helper" rel="home">Macintosh Helper</a></h1>
    								
    									<h2 class="site-description">Macintosh tips, tutorials and reviews.</h2>
    							</hgroup>	
    	
     
    
    			<nav role="navigation" class="site-navigation main-navigation">
    				<h1 class="assistive-text"></h1>
    
    	
    				<div class="menu">
    					<ul class="nav menu nav-pills">
    <li class="item-435 current active"><a href="/" >Home</a></li><li class="item-465"><a href="http://www.macintoshhelper.com/blog/" >Blog</a></li></ul>
    </div>
    
    			</nav><!-- .site-navigation .main-navigation -->
    		</div><!-- .inner -->
    	</header><!-- #header .site-header -->
    
    	
    	<div id="main" class="site-main">
    	 	<div class="inner clearfix">
    			<div id="primary" class="content-box">
    
    			  		<div class="item-page">
    			<div class="page-header">
    		<h2>
    															<a href="/"> Home</a>
    									</h2>
    	</div>
    							
    		
    								<p>Hello World <br /> This website is currently being developed and tested. Please return later. <br /><br /><br /><br /></p> 
    	
    						 </div>
    
    
    			</div>
    
    		</div><!-- .inner -->
    	</div><!-- #main .site-main -->
    	
    
    </div>
    
    	<footer id="footer" class="site-footer" role="contentinfo">
    
    		
    		<div id="footer-nav" class="inner clearfix">
    						
    			<div id="footer-credits">
    				<div class="footer1">Copyright &#169; 2013 <a href="http://www.macintoshhelper.com"> Macintosh Helper</a>. </div>
    <div class="footer2"></div>
    
    			</div>
    		</div>
    
    			</footer>
    
    </body></html>
    My site is http://www.macintoshhelper.com if needed.

    Thanks

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Does anyone have any ideas of how to solve this? I've spent many hours trying to find a solution.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Hey bro,

    Have a look at this tutorial.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    Hey bro,

    Have a look at this tutorial.
    This tutorial shows how to make a footer stay in the bottom of the browser window all the time, relative to the browser window position. What I want to do is this: http://www.cssstickyfooter.com/ . When the content is less than the page size, the footer is at the bottom of the browser window. When the content is larger than the page size, the footer goes to the bottom of the content (you need to scroll down to see it). Here is another example of what I want to do and the tutorial (which I've tried and didn't work, maybe my current css code isn't compatible??): Demo: http://www.cssreset.com/demos/layout...page-with-css/ Tutorial: http://www.cssreset.com/how-to-keep-...page-with-css/

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    75
    Thanks
    9
    Thanked 2 Times in 2 Posts
    hi there

    change
    Code:
    #footer {
      border-top: 1px solid #0d0d0d;
    }
    #footer {
      background: #131313;
    }
    to
    Code:
    #footer {
      border-top: 1px solid #0d0d0d;
      background: #131313;
      position:fixed;
      bottom:0;
    }

  • #6
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Whatnot View Post
    hi there

    change
    Code:
    #footer {
      border-top: 1px solid #0d0d0d;
    }
    #footer {
      background: #131313;
    }
    to
    Code:
    #footer {
      border-top: 1px solid #0d0d0d;
      background: #131313;
      position:fixed;
      bottom:0;
    }
    This doesn't work as I would like to. As I have already posted (in a post that is being moderated), this is relative to the browser window. I would like the content area to push the footer out of the browser window, when the content area is long. When it is shorter than the browser length, then it jumps to the bottom. Here is an example (use the add content button many times to see what I'm explaining): http://www.cssreset.com/demos/layout...page-with-css/

  • #7
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry for the very late replies. The replies are taking forever to be moderated... Stupid spammers...

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello macintoshhelper,
    To make your footer stick to the bottom, there is more CSS needed than just the footer. Your code doesn't style the main containing div element, #container, correctly.

    Make these changes highlighted in red to get started -
    Code:
    #container {   
    margin: 0 0 -63px;
        min-height: 100%;
        position: relative;
    /*overflow: hidden;*/
    }
    
    #footer {
    height: 42px;
      padding-top: 20px;
    /*padding-top: 2rem;*/
    }
    #footer #footer-nav {
      font-size: 14px;
      font-size: 1.4rem;
      padding-bottom: 20px;
      padding-bottom: 2rem;
    }
    #footer #footer-nav #footer-credits {
      float: left;
      width: 33.333%;
    }
    Look at this full-height demo to compare to.


    .
    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:

    macintoshhelper (04-01-2013)

  • #9
    New Coder
    Join Date
    May 2009
    Posts
    34
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Here's one of the many templates I've created. The footer is "sticky." Below are the selectors within the CSS that make the difference. You'll need to change the properties/values within the CSS for your application but it'll get you where you need to go. Just copy the source code.

    http://codesoaked.com/templates/b-si...ky-footer.html

    Code:
    * {	margin:0; padding:0; border: 0; }
    
    html, body {
    	height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333;
    }
    
    #wrapper {
    	width: 600px;
    	background: #f2f2f2;
    	margin: 0px auto;
    	min-height: 100%;
    	margin-top: -40px; /* the -40 value extends the footer "out" of the monitor into viewing */
    	text-align: left;
    }
    
    #footer  {
    	width: 600px;
    	margin: auto;
    	height: 40px; /* this value must match the margin-top on #wrapper */
    	clear: both;
    	background-color: #e8e8e8;
    	color: #333;
    	font-size: 11px;
    	line-height: 40px;
    	text-align: center;
    }

  • #10
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello macintoshhelper,
    To make your footer stick to the bottom, there is more CSS needed than just the footer. Your code doesn't style the main containing div element, #container, correctly.

    Make these changes highlighted in red to get started -
    Code:
    #container {   
    margin: 0 0 -63px;
        min-height: 100%;
        position: relative;
    /*overflow: hidden;*/
    }
    
    #footer {
    height: 42px;
      padding-top: 20px;
    /*padding-top: 2rem;*/
    }
    #footer #footer-nav {
      font-size: 14px;
      font-size: 1.4rem;
      padding-bottom: 20px;
      padding-bottom: 2rem;
    }
    #footer #footer-nav #footer-credits {
      float: left;
      width: 33.333%;
    }
    Look at this full-height demo to compare to.


    .
    Thank you very much I had found that earlier, but your suggestions to the code change helped me get it to work. It works perfectly, exactly how I intended it to work. I gave you some rep

  • #11
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If anyone else has trouble with this, then the way I got it to work was by changing the code that Excavator mentioned, but I added
    Code:
    html, body {
       height: 100%
    }
    
    #footer {
       position:absolute;
       width: 100%;
    }
    This has been solved, so if needed, the post can be closed.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by macintoshhelper View Post
    Thank you very much I had found that earlier, but your suggestions to the code change helped me get it to work. It works perfectly, exactly how I intended it to work. I gave you some rep
    When you put content in, you may find you need some bottom padding on #main to push the footer down. In that example I linked you to, see what happens when you remove the bottom padding off #content.
    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

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by macintoshhelper View Post
    This tutorial shows how to make a footer stay in the bottom of the browser window all the time, relative to the browser window position. What I want to do is this: http://www.cssstickyfooter.com/ . When the content is less than the page size, the footer is at the bottom of the browser window. When the content is larger than the page size, the footer goes to the bottom of the content (you need to scroll down to see it).
    That is called, or should be called, a min-height footer (layout), which is described in my tutorial as well.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Tags for this Thread

    Posting Permissions

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