SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to put a footer?

    Hi,
    How do you put a footer on a page and make it stay at the end of the page?

  2. #2

  3. #3
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at Paul's post about footers here in the css faq. I tried the same code.
    its ok but the problem is that the footer comes up as the content is decreased. i want the footer to stay at end of page no matter how short the content is.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That is called a sticky footer .
    http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im trying to put the same code but it is having a real wierd result
    seems like i'll have to adjust a lot of things for it. lol.

  6. #6
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please tell me what im doing wrong! the footer doesnt seem to want to follow my instructions.

    css code
    Code:
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    }
    #outer {
    	width:950px;
    	min-height:100%;
    	margin-top:-37px;/*footer height - this drags the outer 40px up through the top of the monitor */
    }
    
    
    /* this bar comes at the top of page*/
    .blackbar top{
    	font-size:.9em;
    	background:#000;
    	overflow:hidden;
    	height:2em;
    	border-top:37px solid black;
    	
    }
    #footer {
    	width:100%;
    	margin:auto;
    	height:37px;
    	background:url(../images/centerfooter.gif) center repeat-x;
    	clear:both;
    	
    }

    html code

  7. #7
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here s the html
    html code
    HTML Code:
    <body>
    <div class="container">
     <div id="outer">
        
          <div  class="blackbar">
             <ul>
    	     <li><a href="">Contact Us</a></li>
    	     <li><a href="">Blog</a></li>
    	     <li><a href="">Sign-In</a></li>
    	     <li class="last"><a href="">Help</a></li>
    	     </ul>
         
    	     <input type="text" id="search" name="search bar" value="search" class="search">
    	 
    	     <img src="images/im.png" class="searchimg"> 
          </div>
         
            <div id="clearfooter"></div>
      </div>
         
         <div id="footer">
            <ul>
            <li><a href="">Privacy policy</a></li>
            <li><a href="">Cntact Us</a></li>
            <li class="last"><a href="">About Web Focus</a></li>
            </ul>
          <span class="rightfooter"></span>
         </div>
           
    </div>      
    </body>

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Please tell me what im doing wrong! the footer doesnt seem to want to follow my instructions.
    Hi mistaya123,
    What you are doing wrong is nesting your #outer div in that #container div. Just do away with that #container div altogether.

    The element with min-height:100&#37; (#outer) must be the direct child of the body element which has height:100%;

    You also need to get the IE8 & Opera min-height:100% bug fixes in place.

    See this article for a complete explanation of how it all works. Sticky Footers - A Sticky Subject!
    The display:table is no longer needed in a CC for IE8, that bug is taken care of with the pseudo #outer:after block (see the code below for the comments)

    Here is your code with the sticky footer working now.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sticky Footer</title>
     
    <style type="text/css">
     
    html, body {
        height:100%;/* needed to base 100% height on something known*/
        margin:0;
        padding:0;
    }
    /*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
    body:before {/*Opera min-height 100% Fix (Maleika)*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
    }
    #outer:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /* #content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/
        font-size:0;
    }
    #outer {
        width:950px;
        min-height:100%;
        margin:-37px auto 0;/*footer height - this drags the outer 40px up through the top of the monitor */
        background:#CDF;
    }
    * html #outer{height:100%}/*IE6 min-height*/
     
    /* this bar comes at the top of page*/
    .blackbar{
        font-size:.9em;
        background:#000;
        overflow:hidden;
        height:2em;
        border-top:37px solid black;/*soak up negative top margin on #outer*/
        text-align:right;    
    }
    #content{
        padding:10px;
        background:#DDF;
    }
     
    ul,li,li a{/*=== Temporary UL Styles ===*/
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        color:#fff;
    }
     
    #footer {
        width:100%;
        margin:auto;
        height:37px;
        background:#000 url(../images/centerfooter.gif) center repeat-x;
        color:#FFF;
    }
    .rightfooter{float:right;}
    </style>
     
    </head>
    <body>
     
    <div id="outer">
        <div class="blackbar">
            <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Sign-In</a></li>
                <li class="last"><a href="#">Help</a></li>
            </ul>
            <input type="text" id="search" name="search bar" value="search" class="search">
            <img src="images/im.png" class="searchimg"> 
        </div>
        <div id="content">
            <p>Test text here Test text here Test text here Test text here.</p>
            <p>Test text here Test text here Test text here Test text here.</p>
            <p>Test text here Test text here Test text here Test text here.</p>
            <p>Test text here Test text here Test text here Test text here.</p>
        </div><!--end content-->
    </div><!--end outer-->
     
    <div id="footer">
        <ul>
            <li><a href="#">Privacy policy</a></li>
            <li><a href="#">Cntact Us</a></li>
            <li class="last"><a href="#">About Web Focus</a></li>
        </ul>
        <span class="rightfooter">Right Footer Span</span>
    </div>
     
    </body>
    </html>

  9. #9
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx! got it done at last. everything in its place and the world at peace!


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
  •