SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Footer Issue

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Issue

    Hi,

    How do I ensure the footer in this site sits at the bottom?

    Code CSS:
    #mainContent
    {padding:10px;}
     
    #footer {clear: both; overflow: hidden; padding-top: 60px; height: 60px; background: url('images/footer_bg.gif') no-repeat bottom center; color: #fff; text-align: center; line-height: 1.5em;}

    Thanks.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    First thing I need to point out is that you didnt close MANY elements, #container and body and html tags.

    the second is that a sticky footer it has to be placed outside your container, then sucked up with negative margin.


    CSS
    Code:
    
    html, body {
    	height: 100%;
    }
    
    body {
    background: #fff url('images/headx_bg.jpg') no-repeat;
    background-position: 20px 10px;
    margin: 0;padding:0;  /* remove default margin being applied by the browser */
    font-family: verdana, helvetica, sans-serif;
    height: 100%;
    color: #71a200;
    }
    #container, #footer,#top-menu
    {
    	margin: 0 auto;
    	width: 860px;}
    
    
    #container
    {
    	border-left:solid 2px #71a200;
    		border-right:solid 2px #71a200;
    min-height:98%;  margin-bottom: -4em;
    }
    * html #wrapper{height:98%;} /* IE */
    
    #header {padding:1px ; overflow: hidden; padding-bottom:19px;
    				height: 100px;	
    				background: #b6dc87 url('images/header.PNG') no-repeat;
    				background-position: 20px 10px;
    				border-bottom: #71a200 solid 5px;	
    				width:auto;			
    }
    
    
    #mainContent
    {
    padding:10px 10px 6em 10px;
    }
    #top-menu {list-style:none;border-right: 1px solid #fff; height: 18px; clear: both; font-size: 70%; ; margin-top:80px; }
    
    
    #footer {clear: both; overflow: hidden; padding-top: 2em;  background: url('images/footer_bg.gif') no-repeat bottom center green; color: #fff; text-align: center; line-height: 1.5em; height:4em; margin-top:-6em}
    #footer p.footer-copy a{color:#fff;}
    HTML after header
    Code:
    <body>
    
    
    <div id="container">
    
    
    <div id="header">
    
    
    <ul id="top-menu">
    
    <!--
    <li ><a href="http://theatnetwork.com">Home</a></li> -->
    <li class="page_item page-item-75"><a href="http://theatnetwork.com/" title="Home">Home</a></li>
    <li class="page_item page-item-2 current_page_item"><a href="http://theatnetwork.com/?page_id=2" title="Introduction">Introduction</a></li>
    
    <li class="page_item page-item-9"><a href="http://theatnetwork.com/?page_id=9" title="What will we do?">What will we do?</a></li>
    <li class="page_item page-item-14"><a href="http://theatnetwork.com/?page_id=14" title="Our Supporters">Our Supporters</a></li>
    <li class="page_item page-item-54"><a href="http://theatnetwork.com/?page_id=54" title="Participants">Participants</a></li>
    <li class="page_item page-item-12"><a href="http://theatnetwork.com/?page_id=12" title="Who can join?">Who can join?</a></li>
    <li class="page_item page-item-52"><a href="http://theatnetwork.com/?page_id=52" title="Discussions">Discussions</a></li>
    <li><a href="#">Members</a></li>
    
    </ul>
    
    </div>
    
    <div id="mainContent">
    
    <div class="post" id="post-2">
    <div class="post-text"><h1><span class="post-title">Introduction</span></h1></div>
    <p>In the philosophy of Independent Living a Personal Assistant Service allows us, as users to exercise maximum control over how our services are organised. As users, we custom-design our services according to individual needs, capabilities, life circumstances and aspirations. We become our own employers and  recruit, train, schedule, and supervise the Personal Assistants who work for us. By becoming autonomous, we can now decide who is to work, at which tasks, at which times, where and how. It is recognised that some of us, with learning or intellectual disabilities, or with impaired cognitive function, may need support from third persons with these functions.  We may create a wider circle of support around us to help us to achieve this if required.</p>
    <p>Most existing services are not custom-made to the individual’s needs and do not allow control and acceptable choices.  For example, the most common current arrangement is that Personal Assistants are employed by Service Providers, but supervised and managed by Leaders, and this can cause difficulty in terms of protection through employment legislation.</p>
    <p>Demand for Personal Assistant services is set to increase as disabled people become more aware of their equal rights, and particularly their rights to this service; which will be further underpinned when Ireland ratifies the UN Convention on the Rights of Persons with Disability. The Value for Money review currently underway in the disability sector also points to opportunities for developing new more cost effective ways of delivering services on the ground.</p>
    <p>Áiseanna Tacaíochta will support us to direct our own Personal Assistant service through direct payments by providing a network of support to empower us to achieve independence.</p>
    
    </div><!-- END Post -->
    </div></div>
    <div id="footer">
    
    <p>Copyright 2011 &copy; Áiseanna TacaÍochta | info@theatnetwork.com </p>
    
    </div>
    
    </body>
    </html>

    I took the liberty of tweaking your menu as well. though you should look into cleaning up your code.. I hope this helps you.


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
  •