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
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a footer sticky problem:

    Hi, My footer wont stick to the bottom of the page, it appears in the middle of the page when .posts class is filled with content.

    The code is below:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    <!-- Theme design by http://blog.0arrays.com -->
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    
    <style type="text/css">
    /* Theme design by http://blog.0arrays.com */
    html, body 
    {
        padding: 0px;
        margin: 0px;
    }
    
    * 
    { 
        margin: 0px;
    }
    
    
    
    body
    {
        font-family:Georgia,"Times New Roman",Serif;
        font-size: 14px;
        height: 100%;
    }
    
    a
    {
        padding-top: 3px;
        margin: 2px;
        color: #000000; 
        word-spacing: normal; 
        text-decoration: none;    
    }
    
    p
    {
      margin-top:0px;
      padding: 0px;
    }
    
    a.posttitle-link
    {
      margin-top: 3px;
    }
    
    #topbar
    {
        height: 25px;
        background: #030303;
        min-width: 800px;
        width: 100%;
    }
    
    #container
    {
        width: 800px;
        margin: 0 auto;
        position: relative;
        height: 100%;
        display: block;
    }
    
    #header
    {
        height: 140px;
        width: 800px;
    }
    
    #logo
    {
        font-size: 40px;
        font-weight: bold;
        margin-left: 0px;
        margin-top: 45px;
        position: absolute;
    }
    
    #tagline
    {
        font-size: 14px;
        font-style: italic;
        margin-top: 89px;
        padding: 5px;
        position: absolute;
    }
    
    #topmenu
    {
        margin-top: 55px;
        position: absolute;
        text-align: right;
        margin-left: 494px;
    }
    
    #search
    {
        margin-top: 72px;
        text-align: right;
        margin-left: 590px; 
        float: right;
    }
    
    .search
    {
        width: 200px;
        height: 20px;
        border: 1px solid #CCCCCC;
        line-height: 12px;
        font-size: 14px;
        margin-top: 1px;
        padding: 3px;
    }
    
    input
    {
        padding:4px 0;     
        margin: 4px;
    }
    
    .toplinks
    {
        word-spacing: .5em;    
        font-weight: bold;
    }
    
    a:hover
    {
        background: #FF0000;
        color: #ffffff;
        text-decoration: none;
    }
    
    
    #next
    {
        color: #ffffff;
        text-align: right;
        width: 350px;
        padding:3px;
        float: right;
    }
    
    #previous
    {
        color: #ffffff;
        text-align: left;
        width: 350px;
        padding:3px;
        float: left; 
        margin-left: 0px;
        padding-left: 0px; 
    }
    
    #posts-container
    {
        width: 800px;
        margin-bottom: 20px;
        position: absolute;
        min-width: 800px;
        display: block;
        margin-bottom: 3em;
    }
    
    .posts
    {
        width: 613px;
        margin-top: 0px;
        padding-top: 0px;
        margin-left:177px;
        padding-left: 3px;
        text-align: left;
        position: absolute;
    }
    
    .leftmenu
    {
        width:175px;
        text-align: right;
        margin-left: 0px;
    }
    
    .posttitle
    {
        font-size: 18px;
        font-weight: bold;
        text-align: right;
        padding-top: 3px;
        margin-left: 6px;
    }
    
    .date
    {
        background: #d4ff40;
        width: 160px;
        height: 14px;
        text-align: center;
        padding: 4px;
        color: #7c9c2d;
        font-size: 11px;
    }
    
    blockquote
    {
        background: #F0F0F0;
        padding:3px; 
        width: 400px;
    }
    
    .clearfix
    {
      height: 20px;
      width: 100%;
    }
    
    #footer {
        width: 50px;
        bottom:  0;
        padding-bottom: 0;
        display: block;
    }
    
    
    </style>
    
    
    <title> {Title} </title>
    
    </head>
    
    <body>
    
    
    <div id="topbar">
      <div id="previous">
           {block:PreviousPage}<a href="{PreviousPage}">« Previous</a>{/block:PreviousPage}
       </div>
      <div id="next">
                   {block:NextPage}<a href="{NextPage}">Next »</a>{/block:NextPage}
       </div>
       
    </div>
    
    <div id="container">
      
      <div id="header">
        
        <div id="logo">
          {title}
        </div>
        
        <div id="tagline">
          So, why do arrays start from zero?
        </div>
    
        <div id="topmenu" class="toplinks">
          <a href="/">Home</a> <a href="/archive">Archive</a> <a href="/ask">Ask Me</a> <a href="/rss">RSS</a>
          <a href="/about">About</a>
        </div>
           
        <div id="search">
          <form action="/search" method="get">
            <input class="search" type="text" name="q" value="search" id="" />
          </form>
        </div>   
           
           
      </div>
      
    
    
      <div id="posts-container">
        {block:Posts}    
        <div class="posts">
         
      
      
    
          {block:Text}
              {Body}
          {/block:Text}
    
        {block:Quote}
        <p><blockquote>
            "{Quote}"
             {block:Source}
                 <br><strong><i>-- {Source} </i></strong></br> 
             {/block:Source}
        </blockquote></p>
        {/block:Quote}
    
    
    
        </div>
        
    
        
        <div class="leftmenu">
          <div class="date" >
            {DayOfMonth}{DayOfMonthSuffix} {Month} {Year}
          </div>
          
          <div class="posttitle">
          
              {block:Title}
                  <a class="posttitle-link" href="{Permalink}">{Title}...</a>
              {/block:Title}
    
          
          
            
          </div>
          <i>- Filed under Misc -</i>
          
        </div>
        
      <div class="clearfix"> </div>    
        {/block:Posts}
    
     
      </div>
    
    
    
      <div id="footer"> bottom???</div>   
      
    </div>
    
    
    
    </body>
    </html>
    You can see the live example here http://blog.0arrays.com/

    I don't really care if the footer is sticky or not, I just want it to stick to the bottom of the page.
    Thanks for any help in advance.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I dont even see your footer..lol

    But you have several coding errors that should be fixed. That may or may not fix your problem, but they need to fixed anyway, so why not eliminate thoe errors as the reason your footer isnt showing correctly.

    You can see these errors here.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Errors

    Quote Originally Posted by teedoff View Post
    I dont even see your footer..lol

    But you have several coding errors that should be fixed. That may or may not fix your problem, but they need to fixed anyway, so why not eliminate thoe errors as the reason your footer isnt showing correctly.

    You can see these errors here.
    I've sorted out my errors, but the remainder are from tumblr, I don't understand when it says "Line 237, Column 6: document type does not allow element "BODY" here", what on earth does that mean?

  • #4
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    For sticky footers, the following example is ace: http://www.cssstickyfooter.com/using...oter-code.html

    Have a read of that and see if you can get it working.

    Good luck

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Try self-closing your meta and link tags in the head section.

    Instead of this:
    Code:
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
    <!-- Theme design by http://blog.0arrays.com -->
    <link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif">
    <link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss">
    Try this:
    Code:
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <!-- Theme design by http://blog.0arrays.com -->
    <link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif" />
    <link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss" />

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Try self-closing your meta and link tags in the head section.

    Instead of this:
    Code:
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
    <!-- Theme design by http://blog.0arrays.com -->
    <link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif">
    <link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss">
    Try this:
    Code:
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <!-- Theme design by http://blog.0arrays.com -->
    <link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif" />
    <link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss" />
    That leads to even more errors...

    "Line 8, Column 88: NET-enabling start-tag requires SHORTTAG YES"

    arrr this is doing my head in

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hmm, well I copied your code and changed your doctype to transitional, added the self closing tags and got rid of most of the errors. There are 4 left, two of which are you arent self closing your input tags. Another one I think is the <strong> tag not used in the right place(i think it should start inside the <li>) and the last one is something in your tumblr code.

    Im lost at this point about this cause you're using framesets and I dont want too tell you to change your doctype. Someone mightbe able to expand on this further.
    Last edited by teedoff; 11-10-2010 at 04:56 PM.

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Hmm, well I copied your code and changed your doctype to transitional, added the self closing tags and got rid of most of the errors. There are 4 left, two of which are you arent self closing your input tags. Another one I think is the <strong> tag not used in the right place(i think it should start inside the <li>) and the last one is something in your tumblr code.

    Im lost at this point about this cause you're using framesets and I dont want too tell you to change your doctype. Someone mightbe able to expand on this further.
    Does the footer remain at the bottom?

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    lol I still haven't seen your footer, nor looked at it closely. I merely suggested you fix all the errors to rule those out as the reason your footer wasnt rendering properly.

  • #10
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    lol I still haven't seen your footer, nor looked at it closely. I merely suggested you fix all the errors to rule those out as the reason your footer wasnt rendering properly.
    I've fixed them, the footer still appears in a weird position.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello johnmossel,
    Look at some changes I've made in your code (highlighted in red) -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>0 arrays</title>
            <!-- Theme design by http://blog.0arrays.com -->
            <link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif" />
            <link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss" />
    <style type="text/css">
    /* Theme design by http://blog.0arrays.com */
    html, body {
    	font-family:Georgia, "Times New Roman", Serif;
    	font-size: 14px;
    	height: 100%; /*very important to have this on both body and html*/
    	padding: 0px;
    	margin: 0px;
    }
    * {
    	margin: 0px;
    }
    a {
    	padding-top: 3px;
    	margin: 2px;
    	color: #000000;
    	word-spacing: normal;
    	text-decoration: none;
    }
    p {
    	margin-top:0px;
    	padding: 0px;
    }
    a.posttitle-link {
    	margin-top: 3px;
    }
    #topbar {
    	height: 25px;
    	background: #030303;
    	min-width: 800px;
    	width: 100%;
    }
    #container {
    	min-height: 100%;
    	width: 800px;
    	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
    	background: #ff0; /*for display puroposes only*/
    	position: relative;
    }
    #footer {
    	width: 100%; 
    	height: 50px;	
    	position:absolute;
    	bottom: 0;
    	margin: 0 0.3em 0;
    	padding: 0.2em 0 0;
    	background: #f00; /*for display only*/
    	text-align: center;
    	line-height: 50px;
    }
    #header {
    	height: 140px;
    	width: 800px;
    }
    #logo {
    	font-size: 40px;
    	font-weight: bold;
    	margin-left: 0px;
    	margin-top: 45px;
    	position: absolute;
    }
    #tagline {
    	font-size: 14px;
    	font-style: italic;
    	margin-top: 89px;
    	padding: 5px;
    	position: absolute;
    }
    #topmenu {
    	margin-top: 55px;
    	position: absolute;
    	text-align: right;
    	margin-left: 494px;
    }
    #search {
    	margin-top: 72px;
    	text-align: right;
    	margin-left: 590px;
    	float: right;
    }
    .search {
    	width: 200px;
    	height: 20px;
    	border: 1px solid #CCCCCC;
    	line-height: 12px;
    	font-size: 14px;
    	margin-top: 1px;
    	padding: 3px;
    }
    input {
    	padding:4px 0;
    	margin: 4px;
    }
    .toplinks {
    	word-spacing: .5em;
    	font-weight: bold;
    }
    a:hover {
    	background: #FF0000;
    	color: #ffffff;
    	text-decoration: none;
    }
    #next {
    	color: #ffffff;
    	text-align: right;
    	width: 350px;
    	padding:3px;
    	float: right;
    }
    #previous {
    	color: #ffffff;
    	text-align: left;
    	width: 350px;
    	padding:3px;
    	float: left;
    	margin-left: 0px;
    	padding-left: 0px;
    }
    #posts-container {
    	width: 800px;
    	margin-bottom: 20px;
    	position: absolute;
    	min-width: 800px;
    	display: block;
    	margin-bottom: 3em;
    	height: auto;
    }
    .posts {
    	width: 613px;
    	margin-top: 0px;
    	padding-top: 0px;
    	margin-left:177px;
    	padding-left: 3px;
    	text-align: left;
    	position: absolute;
    	height: auto;
    }
    .leftmenu {
    	width:175px;
    	text-align: right;
    	margin-left: 0px;
    	height: auto;
    }
    .posttitle {
    	font-size: 18px;
    	font-weight: bold;
    	text-align: right;
    	padding-top: 3px;
    	margin-left: 6px;
    }
    .date {
    	background: #d4ff40;
    	width: 160px;
    	height: 14px;
    	text-align: center;
    	padding: 4px;
    	color: #7c9c2d;
    	font-size: 11px;
    }
    blockquote {
    	background: #F0F0F0;
    	padding:3px;
    	width: 400px;
    }
    .clearfix {
    	height: 20px;
    	width: 100%;
    }
    </style>
    </head>
    <body>
    <div id="topbar">
      <div id="previous"> </div>
      <div id="next"> </div>
    </div>
    <div id="container">
      <div id="header">
        <div id="logo"> 0 arrays </div>
        <div id="tagline"> So, why do arrays start from zero? </div>
        <div id="topmenu" class="toplinks"> <a href="/">Home</a> <a href="/archive">Archive</a> <a href="/ask">Ask Me</a> <a href="/rss">RSS</a> <a href="/about">About</a> </div>
        <div id="search">
          <form action="/search" method="get">
            <input class="search" type="text" name="q" value="search" >
          </form>
        </div>
      </div>
      <div id="posts-container">
        <div class="posts">
          <p> nope nope nope </p>
          <blockquote>
            <p> "This is called a quote" <br>
              <strong><i>-- Me </i></strong> </p>
          </blockquote>
        </div>
        <div class="leftmenu">
          <div class="date" > 8th November 2010 </div>
          <div class="posttitle"> </div>
          <i>- Filed under Misc -</i> </div>
        <div class="clearfix"> </div>
        <div class="posts">
          <p> nope nope nope </p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper  eleifend nunc, et ultricies diam cursus iaculis. Cras dignissim eleifend  lacus non commodo. Nam interdum, eros at porttitor suscipit, tellus mi  volutpat diam, vitae sollicitudin augue velit non felis. Aenean eros  eros, blandit in tincidunt non, consequat at eros. In lacinia interdum  lectus non commodo. Nulla vel est sit amet mauris varius accumsan  ultrices id eros. Aliquam varius interdum magna ut malesuada. Nullam  quam elit, tincidunt eget tempor sit amet, luctus sed leo. Nulla metus  est, ullamcorper ac vestibulum vitae, rutrum luctus elit. Donec at elit a  tellus imperdiet suscipit ac tempus odio. In hac habitasse platea  dictumst. Sed congue ante et risus scelerisque scelerisque. Mauris  sagittis nisl arcu, ut egestas leo. In elementum, risus vitae hendrerit  tincidunt, tortor libero aliquet diam, nec rhoncus nibh mauris at eros.  Cras tincidunt dictum neque quis blandit. Aenean consequat dolor vitae  odio iaculis sed ullamcorper mauris consequat. Sed dolor ligula, mattis  vitae blandit id, pretium eu nisl. Duis felis felis, suscipit accumsan  semper in, accumsan et risus.</p>
          <p>Donec at elit a tellus imperdiet suscipit ac tempus odio. In hac  habitasse platea dictumst. Sed congue ante et risus scelerisque  scelerisque. Mauris sagittis nisl arcu, ut egestas leo. In elementum,  risus vitae hendrerit tincidunt, tortor libero aliquet diam, nec rhoncus  nibh mauris at eros. Cras tincidunt dictum neque quis blandit. Aenean  consequat dolor vitae odio iaculis sed ullamcorper mauris consequat. Sed  dolor ligula, mattis vitae blandit id, pretium eu nisl. Duis felis  felis, suscipit accumsan semper in, accumsan et risus.  Mauris hendrerit posuere augue, eu lacinia urna suscipit ac. Donec  feugiat ornare lectus ut egestas. Morbi in urna at lorem tempor ornare.  Phasellus commodo ligula sit amet lacus auctor id molestie mi eleifend.  Aenean ac erat ut nisl rutrum mollis. Vivamus sit amet est eget urna  congue tempus. Duis condimentum augue id lacus imperdiet id facilisis  leo auctor. Cras enim magna, vestibulum a auctor mollis, tempus id  purus. Aenean et eros ante, non adipiscing libero. Integer elementum  ultrices magna, et dignissim sapien varius eu. Cras vitae arcu a elit  posuere pulvinar. Sed vel turpis ipsum. Curabitur fermentum commodo eros  in venenatis. Duis non purus in sapien rutrum laoreet. Fusce vel felis a  risus elementum vulputate.  Cras sed eros lacus, sit amet interdum est. Ut sit amet magna in ligula  viverra sagittis. Donec lectus libero, ornare eu condimentum sit amet,  imperdiet nec sapien. Pellentesque habitant morbi tristique senectus et  netus et malesuada fames ac turpis egestas. Donec ullamcorper vestibulum  lacus sit amet elementum. Suspendisse et nibh dolor. Nulla facilisi.  Morbi mauris est, porta id auctor ut, adipiscing et neque. Mauris varius  dapibus elit quis malesuada. Maecenas consequat bibendum neque, ac  luctus eros molestie eget. Suspendisse potenti. Nulla facilisi.  Pellentesque mi eros, euismod vitae vestibulum ac, scelerisque nec  lectus.</p>
        </div>
        <div class="leftmenu">
          <div class="date" > 8th November 2010 </div>
          <div class="posttitle"> <a class="posttitle-link" href="http://blog.0arrays.com/post/1520548329/my-first-post">My first post...</a> </div>
          <i>- Filed under Misc -</i> </div>
        <div class="clearfix"> </div>
      </div>
        <div id="footer"> bottom???</div>
    </div>
    
    <!-- BEGIN TUMBLR CODE -->
    <iframe src="http://assets.tumblr.com/iframe.html?8&src=http%3A%2F%2Fblog.0arrays.com%2F&amp;lang=en_US&amp;name=0arrays" scrolling="no" width="324" height="25" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe>
    <!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]--><script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
    <noscript>
    <img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/>
    </noscript>
    <!-- END TUMBLR CODE -->
    </body>
    </html>
    That's based on this method.

    Your #topbar is causing the bit of scroll you're seeing.
    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


  •  

    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
    •