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

    Angry Sticky Footer Blues

    I've spent hours and hours trying to figure out how to do this to no avail, and I'm at my wit's end here. What I'm trying to do is your basic css footer to stick to the bottom of the page when there's little content, and to stay at the end of stuff when I've got a lot of content.

    Tried everything... The tricks I'm using SHOULD work, but they don't, so I'm convinced it's something in my code that I'm completely unaware of that's negating the effect I want.

    I will practically give you one of my kidneys to sell on the black market if you can help me with this.

    The page in question is here: http://aquapunk.net/pages/test (You can just view the source from there)
    And the stylesheet in question is here: http://laurenbaker.us/ap/v3style.css

    Thankyouthankyouthankyou to whoever can help me.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Your code was a mess. Please, please make sure you validate your code frequently as you develop—use it like a spellchecker. It will really, really help.

    The sticky footer requires a very precise set of CSS and HTML "circumstances" to converge in order to work properly. If your code is messy it's very easy for it to cease working. I like to start with the template and add one CSS attribute at a time, all the time checking to make sure the sticky footer functionality is intact.

    In any case, try this:

    Code:
    <!-- cache -  - test - /pages/test  --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <meta name="description" content="A dark and dramatic sci-fi webcomic inspired by the traditional tale of the Golem.">
    <meta name="keywords" content="mermaid, merfolk, golem, gundam, mecha, robot, stone, maya, aztec, atlantis, coron, eieron, aogaur, nuos, siai, avimo, ganoco, aros, gaurin">
    
    <title>Aquapunk - "Apparition" - page 34</title>
    
    <style type="text/css">
    
    /* body and container */
    
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body {
        width: 100%;
        height: 100%;
    	line-height: 1.4em;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #b2bab9;
    	background: #2b2e2a;
    }
    /*  html>body, html>body #container {
        height: auto;
    }
    * html #container {
    	height: 100%;
    }   */
    #container {
        min-height: 100%;
        height: auto !important;
        height:100%;
        margin:0 auto -167px;
    }
    
    .cleaner {
    	height:167px;
    }
    
    /* end of body and container */
    
    /* formatting */
    
    a:link, a:visited { text-decoration: none; color: #476c69; font-weight: bold; font-size: 7pt; }
    a:active, a:hover { text-decoration: none; color: #ccc; }
    p { margin: 0px; padding: 0px; }
    img { margin: 0px; padding: 0px; border: none; }
    
    h2, h3 {
    	font-family:Century gothic;
    	color: #819088;
    	text-transform: uppercase;
    	font-weight: bold;
    	font-size:1.4em;
    }
    strong {
    	font-family:Century gothic;
    	font-weight:bold;
    	text-transform: uppercase;
    }
    .breathing_room {
    	margin: 10px 0 10px 0;
    }
    
    .small { font-size:0.8em; }
    
    .float_l { float: left; }
    .float_r { float: right; }
    /*  .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }   */
    
    /* end of formatting */
    
    /* header */
    
    #header_wrapper {
    	width: 100%;
    	height: 80px;
    	background: url(http://laurenbaker.us/ap/footer_bg.gif);
    	background-position: center top;
    }
    
    #header {
    	width: 895px;
    	height: 80px;
    	margin: 0 auto;}
    
    /* end of header */
    
    /* nav and menu */
    
    #nav_wrapper {
    	clear: both;
    	width: 100%;
    	height: 40px;
    	background: #121616;
    }
    #nav {
    	width: 900px;
    	height: 20px;
    	padding-top: 3px;
    	margin: 0 auto;
    	background: #121616;
    	text-align: center;
    }
    #nav p {
    	font-size: 1em;
    	color: #65473b;
    }
    #nav a:link, a:visited {
    	color: #65473b;
    	font-family: Century gothic;
    	text-transform: uppercase;
    	font-size: 9pt;
    }
    #nav a:hover, a:active {
    	color: #7d5844;
    	text-decoration: none;
    }
    #top-menu {
    	padding: 0;
    	margin: 5px;
    	list-style: none;
    	float: left;
    }
    #top-menu li {
    	float: left;
    }
    #top-menu a:link, a:visited {
    	font-family: Century gothic;
    	font-size: 0.9em;
    	color: #65473b;
    	text-decoration: none;
    	font-weight: bold;
    	letter-spacing: 0.01em;
    	padding: 5px;
    	font-variant: small-caps;
    }
    #top-menu a:hover, a:active {
    	color: #8b5d44;
    }
    
    /* end of nav and menu */
    
    /* content */
    
    #content_wrapper {
    	overflow:auto;
    /*	padding-bottom: 150px;  must be same height as #footer_wrapper */  
    	width: 100%;
    }
    
    #content {
    	width: 880px;
    	padding: 40px;
    	margin: 0 auto;
    	font-size: 8pt; 
    }
    
    .columnleft {
    	width: 620px;
    }
    .columnright {
    	width: 240px;
    }
    
    .twitter {
    	width: 280px;
    	padding: 20px 0 0 5px;
    	float: right;
    	font-size:0.8em;
    }
    .blog {
    	width:330px;
    	padding: 20px 5px 0 0;
    	font-size:1em;
    	letter-spacing:1px;
    	line-height:12px;
    	float: left;
    }
    
    /* end of content */
    
    /* footer */
    
    #footer_wrapper {
    /*	position: relative;   */
    /*	margin-top: -150px;  */
    	width: 100%;
    	height: 150px;
    	padding-top: 15px;
    /*	padding-bottom: -50px;   can't have negative padding  */
    	background-color:#191e1c;
    /*	clear: both;   */
    }
    
    #footer {
    	width: 880px;
    	margin: 0 auto;
    /*	padding-bottom: -50px;   */
    	font-size: 9px; 
    	line-height: 24px; 
    	color: #4b534c; 
    	font-weight: bold;
    	font-family:century gothic;
    	text-transform: uppercase;
    
    }
    
    #footer  a {
    	text-decoration: none; 
        color: #426057; 
        font-weight: bold;
    }
    
    #footer a:hover {
    	color:#ccc;
    }
    
    /* end of footer */
    
    /* rampage stuff */
    
    .comments_header {
    	margin: 10px 0 10px 0; 
    	background-color:#38403c; 
    	padding:4px;
    	font-size:0.9em;
    }
    .copyright {
    	display:none;
    }
    .jumpbox {
       font-size:0.9em;
       font-family:century gothic;
       text-transform: uppercase;
       letter-spacing:1px;
       color:#fff;
       background-color:#191e1c;
       border-style:solid;
       border-width:0px;
    }
    .code {
        width:260px;
    	padding:10px;
    	background-color:#000;
    	font-family:Courier new, courier;
    	font-size:1em;
    	line-height:12px;
    	text-align:left;
    	color:#666;
    }
    .vote {
    	background-image: url('http://laurenbaker.us/ap/incentive.gif');
    	width: 70px;
    	height: 275px;
    }
    .license {
    	padding:10px;
    	background-color:#000;
    	color:#666;
    	text-align:left;
    }
    .stico_default{
    	background: transparent url(http://laurenbaker.us/ap/share.png) no-repeat scroll 0px 0px !important;
    }
    .table {
    
    	text-align:justify;
    	margin-bottom: 10px;
    	font-size:1em;
    	line-height:11px;
    	letter-spacing:1px;
    	color:#444;
    }
    
    
    </style>
    
    
    
    
    <script language="JavaScript" src="include/javascript/stripjump.js" type="text/JavaScript"></script>
    <script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9070c8a-9db3-41b0-94fb-37e5e0a20274&amp;type=website"></script>
    
    
    </head>
    
    <body>
    
    	<div id="container">
    		<div id="header_wrapper">	
    			<div id="header">
    				
    				<img src="http://laurenbaker.us/ap/logo.png" />
    					
    			</div> <!-- /header -->
    		</div> <!-- /header_wrapper -->   
    	
    		<div id="nav_wrapper">
    			<div id="nav">
    				
    			<SCRIPT LANGUAGE="JavaScript">
    			<!-- Begin
    			function popUp(URL) {
    			day = new Date();
    			id = day.getTime();
    			eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=150');");
    			}
    			// End -->
    			</script>
    			
    			<script type="text/javascript">
    			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    			</script>
    			<script type="text/javascript">
    			try {
    			var pageTracker = _gat._getTracker("UA-12649905-1");
    			pageTracker._trackPageview();
    			} catch(err) {}</script>
    			
    			   <ul id="top-menu">
    			
    					<li><a href="http://aquapunk.net/comics/1/">first page</a></li>
    					<li><A HREF="javascript:popUp('http://laurenbaker.us/AP_player.htm')">soundtrack</a> </li>
    					<li style="margin: 0 5px 0 5px; color:#65473b"> | </li>					
    					<li><a href="http://aquapunk.net">home</a></li>
    					<li><a href="http://aquapunk.net/archive.php">archives</a></li>
    					<li><a href="http://aquapunk.net/links.php">links</a></li>
    					<li><a href="http://aquapunk.tumblr.com/" target="_blank">blog</a></li>
    					<li><a href="http://rampagenetwork.com/community/viewforum.php?f=103" target="_blank">forum</a></li>
    					<li><a href="http://rampagenetwork.com">rampage network</a></li>
    				
    			   </ul>
    				
    			</div> <!-- /nav -->
    		</div> <!-- /nav_wrapper --> 
    	
    		<div id="content_wrapper">
    			<div id="content">
    			
    				<h2>Lorem Ipsum</h2>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae vestibulum felis. 
    				Aenean hendrerit nulla convallis urna laoreet eget sodales turpis tempus. Pellentesque 
    				sit amet odio ut nulla aliquet facilisis id sed nulla. In volutpat, lacus et aliquam 
    				ornare, nisl justo volutpat lectus, ut consectetur odio sapien id leo. Sed vitae mi 
    				ligula. Nulla facilisi. Donec in risus in erat suscipit lacinia. Pellentesque nec purus 
    				ipsum, in tempus nisi. In eros arcu, feugiat id tempor in, aliquam a lectus. Sed feugiat, 
    				orci quis consequat tempus, elit ligula vehicula eros, vel accumsan enim ante at lorem. 
    				Donec rhoncus nibh risus, mollis gravida ligula. Donec sit amet mi elit, a volutpat 
    				massa. Ut arcu erat, dictum sit amet sodales consequat, egestas eu erat. Ut auctor 
    				feugiat nisl, quis pharetra nunc aliquam nec. 
    			
    			</div> <!-- /content -->
    		</div> <!-- /content_wrapper --> 
    		<div class="cleaner"></div>
    	</div> <!-- /container -->
    
    	<div id="footer_wrapper">
    		<div id="footer">
    		
    				All contents copyright 2008-2010 Lauren Baker. <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Some rights reserved. </a>
    				<br />
    				<img src="http://laurenbaker.us/ap/pw%20ad.gif" width="728" height="90" /></center>
    			
    		</div> <!-- /footer -->
    	</div> <!-- /footer_wrapper -->
    
    <!-- <p align="center" style="color: #000000;"><small><span class="copyright">Hosted By <a href="http://rampagenetwork.com">The Rampage Network</a></span></small></p>   -->
    </body>
    </html>
    Note: I took your CSS and pasted it into the head of the HTML document. You'll want to take that CSS and move it to your external file and add the link back.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    stripedwine (07-02-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I know it's a mess, and I don't really have an excuse.

    I did start off with a template that had a footer; though it doesn't bear any resemblance to it now. What with the footer not working and all, too.

    Also, thank you for taking the time to go through my stuff... your solution didn't work, though. I guess I'm just gonna stop trying at this point: something about old dogs and new tricks. I also just don't have the time to keep trying to fix this if I don't truly know what I'm doing. Good thing code monkeys and web designers aren't in my target demographic.

    Anyways, thanks again!

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It does work, actually (in Firefox 3, Safari 5 and IE 7, at least):

    http://sufferndesign.com/helping/site215.html

    ...assuming we're talking about the same thing when we say "sticky footer." This is what you're after, right?

    I made alterations to the HTML and the CSS; dunno if you caught that.
    matt | design | blog

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well why the hell does it work there, and not when I do it? I copy and pasted the whole thing, changed none of it other than adding {litera}{/literal} tags around the CSS and javascript so I don't get server errors, and replacing the navigation stuff with {include file="nav.tpl"}. FUUUUU-

    Go back and look at my test page again if you don't believe me.

    ...okay, I just copy and pasted the information into ANOTHER page and saved it to my own website, and yes, you are correct. It does work.

    Now give me a minute to see what's wrong with the AP.net page...

    **EDIT

    Well, I got nothing.

    http://laurenbaker.us/test.htm and http://aquapunk.net/pages/test are identical, and yet... not. I think this is now a problem with my host or whatever, so I'm going to need to talk to the guy in charge of that.

    This is fracking ridiculous.

    Thanks a lot for your help, though.
    Last edited by stripedwine; 07-01-2010 at 06:30 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Just had a look at the two pages. The one on http://aquapunk.net/pages/test additionally contains this at line 315:

    Code:
    <link rel="stylesheet" type="text/css" href="http://laurenbaker.us/ap/v3style.css"/>
    I think this is the problem - take it out and your footer gets sticky again.

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ohhh...

    Huh, I don't remember putting that in that file to be called, especially if it's redundant.

    Thank you guys SO much.

  • #8
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh god I hate to bug, but, the code that you gave me, msuffern, seems to slip up here:

    http://aquapunk.net/links.php

    Know of any way I could prevent the content from overflowing onto the footer when there's a little too much, or when the window is resized and made a lot smaller?

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You have to give a bottom padding to your #content that is greater than the height of your footer.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I would recommend starting here:

    W3C Validator

    If you make your pages valid, I think you'll find that not only will the sticky footer work correctly for ALL your pages, your page will look the same in all browsers (aside from a few possible quirks in IE). Have you checked your page on various browsers?
    matt | design | blog

  • #11
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @Eng: Ah, dur. Thanks! If I've been staring at this crap for days in a row, I guess I need the obvious pointed out to me.

    @msuffern: I'll consider doing that the next time I redesign this thing... I just don't have the energy to do it this time around. And as far as browsers go, I check on FF, IE, and Chrome since they comprise 90% of my visitors. I know I should care about the other 10%, buuuut so long as my comic's readable and the site's navigable, then that's all that matters to me. I'm a cartoonist first, web designer... 8th. :P


  •  

    Posting Permissions

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