SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Sticky Footer on current theme

    I am currently editing a theme to suit my needs for my website on wordpress. I want to be able to make it a sticky footer im not the best at coding.

    I would imagine you would need to have a look at what my #header looks like so here goes

    Code CSS:
    #footer {
    	clear: both;
    	margin: 0 auto;
    	padding: 30px 0;
    	font-size:8pt;
    	background:#000;
    	color:#ccc;
    	text-align:center;
    	}
     
    .footurl {
    	margin-bottom: 10px;
    	}
     
    .clearfix:after,
    blockquote:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    	}
     
    .clearfix,
    blockquote {
    	display: inline-block;
    	}
     
    /* Hides from IE-mac \*/
    * html .clearfix,
    * html blockquote {
    	height: 1%;
    	}
    .clearfix,
    blockquote {
    	display: block;
    	}
    /* End hide from IE-mac */
     
    /* -------------------[ Headings ]------------------- */

    eventually I will have a go at coding my own template/ theme but until I have time I would like to work with what I have.

    Many Thanks
    Damien

    Awesome forum btw will be sticking (no pun intended) around.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Damiantos. Welcome to the forums.

    Sticky footers are tricky things, and CSS is not really designed for them, so they require some deft coding. Here is a definitive guide to getting thme to work reliably:

    http://www.sitepoint.com/forums/show...66#post1239966

    See if that makes any sense. If not, we really need a live link to your site to see what's involved.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, this would be fantastic if i wasnt working on a current very complex theme. Because the theme im using wp-clear has so many pages I just cant seem to get it working.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For a sticky footer to work you need to have this basic structure:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height:100%;/* need to have height to base min-height on */
    	margin:0;/* no margin or padding or 100% becomes 100% + margin/padding and therefore too big to start with*/
    	padding:0
    }
    /* all content except for the footer goes here */
    #outer {
    	min-height:100%;/* reach the bottom  of the viewport*/
    	margin-top:-100px;/* match footer height*/
    	background:red;
    }
    * html #outer { height:100% }/* ie6 doesn't understand min-height*/
    #header { border-top:100px solid #fff;/* match footer height and absorb negative margin on #outer*/ }
    #footer {
    	clear:both;
    	height:100px;/* must be a known height*/
    	background:blue;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<div id="header">Header</div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    If your wordpress pages don't fit into that structure then you won't be able to have a sticky footer I'm afraid. If you can massage your pages into that structure then check the sticky footer faq Ralph pointed to for all the other little browers fixes that go with it. However the html is basically the same as I have shown.

    You need one page wrapper that must hold all your content apart from the footer. You cannot have other elements outside that wrapper or all the measurements will be wrong (you can actually have the odd fixed height element outside that structure but then you would need to adjust all the negative margins and it gets even more complicated).

    If you page isn't suitable for a sticky footer then maybe a fixed footer would be appropriate -assuming its a relatively small footer as large fixed footers are not much use as they obscure too much content.


Bookmarks

Posting Permissions

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