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 Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post

    another footer problem

    I am trying to keep my footer at the bottom of my page irregarless of whether there is text inside the body or not but I have been to almost every site there is on google but I still cannot get the footer at the bottom.

    The closest I get is to get it working on firefox but not IE or vice-versa

    here is the css
    Code:
    /** BASIC */
    
    body {
    	text-align: justify;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	color: #333333;
    }
    
    h1, h2, h3 {
    	text-transform: lowercase;
    	color: #000099;
    }
    
    ul {
    	margin-left: 0px;
    	padding-left: 1em;
    	list-style-position: inside;
    }
    
    a {
    	color: #000099;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #699;
    }
    
    /** HEADER */
    
    #header {
    	width: 700px;
    	height: 60px;
    	margin: 0px auto;
    }
    
    #header h1 {
    	float: left;
    	margin: 0px;
    	padding: 20px 0px 0px 0px;
    }
    
    #header h2 {
    	float: right;
    	margin: 0px;
    	padding: 27px 0px 0px 0px;
    }
    
    /** MENU */
    
    #menu {
    	width: 700px;
    	height: 1.5em;
    	margin: 0px auto;
    	border: 1px solid #000099;
    }
    
    #menu ul {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	padding: 3px 10px;
    	border-right: 1px solid #000099;
    	text-decoration: none;
    }
    
    #menu a:hover {
    	background: #000099;
    	color: #FFFFFF;
    }
    
    /** CONTENT */
    
    #content {
    	width: 700px;
    	margin: 0px auto;
    	/* modified */
    	min-height: 100%;
    }
    
    #content h2 {
    	font-weight: normal;
    }
    
    #left {
    	float: left;
    	width: 480px;
    }
    
    #right {
    	float: right;
    	width: 200px;
    }
    
    /** FOOTER */
    
    #footer {
    	clear: both;
    	width: 680px;
    	margin: 0px auto;
    	padding: 5px 10px;
    	border: 1px solid #000099;
    	/* modified 
    	position: relative;*/
    }
    
    #footer p {
    	margin: 0px;
    	padding: 0px;
    	font-size: x-small;
    }
    here is a demo page
    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>Simplicity  by Free CSS Templates</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">
    	<h1>Shout-Africa</h1>
    	<h2>The African Entertainment Hub</h2>
    </div>
    <div id="menu">
    	<ul>
    		<li><a href="#">News</a></li>
    		<li><a href="#">Politics</a></li>
    		<li><a href="#">Sports</a></li>
    		<li><a href="#">Entertainment</a></li>
    		<li><a href="#">Music</a></li>
    		<li><a href="#">Videos</a></li>
    		<li><a href="#">Gallery</a></li>
    		<li><a href="#">Contact Us</a></li>
    	</ul>
    </div>
    <div id="content">
    	<div id="left">
    		<h2>Welcome to Shout-africa.com!</h2>
    		<p><strong>Shout-Africa</strong> is a community website built with the intention of providing entertainment, news and a discussion forum for 					  Everyone with the focus being mainly on Africa. Africa has always been misrepresented in many ways and I do hope that my site is not going to 					follow the 
    				same pattern that other sites have.</p>
    		<p>We are investing time and skills so we can bring you a site thats easy and freindly to use so please visit us more often so you can see the difference and the progress that we are making everyday.</p><p><strong>Shout-Africa</strong> is a community website built with the intention of providing entertainment, news and a discussion forum for everyone with the focus being mainly on Africa. Africa has always been misrepresented in many ways and I do hope that my site is not going to follow the same pattern that other sites have.</p>
    		<ul>
    			<li><a href="#">Php webdevelopers wanted</a></li>
    			<li><a href="#">Database Administrators wanted (MySQL prefered)</a></li>
    			<li><a href="#">Graphics designers wanted</a></li>
    			<li><a href="#">Journalist wanted</a></li>
    			<li><a href="#">Of course we need your stories</a></li>
    		</ul>
    		<p>All the positions are for development purposes initially and might become permanent and paid for positions. I shall aim to respond to all applications for the roles soon. Also the links are not yet activated because we are still working on sorting out the application procedure so that its easy for the both of us. </p>
    	</div>
    	<div id="right">
    		<h2>Recent Updates</h2>
    		<p><strong>[26/20/2009]</strong> Zimbabwe Unity gorvernment, how far can they go pretending all is fine?<a href="#">More…</a></p>
    		<p><strong>[26/20/2009]</strong> Is South Africa ready to host the World Cup, and is their football team strong enough to give Africa their first trophy? <a href="#">More…</a></p>
    		<p><strong>[26/20/2009]</strong>Drought reaped through Southern Africa whilst the Western World suffers from the worst finacial crisis it has ever known. So who is there to help us out? <a href="#">More…</a></p>
    		<ul>
    			<li><a href="#">Barclays premiership</a></li>
    			<li><a href="#">IT in Africa</a></li>
    			<li><a href="#">Swahili for all Southern Africa</a></li>
    			<li><a href="#">Broadband intiative for Africa</a></li>
    		</ul>
    		<p><strong>[26/10/2009]</strong> Zimbabwe Unity gorvernment, how far can they go pretending all is fine?<a href="#">More…</a></p>
    		<p><strong>[26/10/2009]</strong> Is South Africa ready to host the World Cup, and is their football team strong enough to give Africa their first trophy? <a href="#">More…</a></p>
    		<p><strong>[26/10/2009]</strong>Drought reaped through Southern Africa whilst the Western World suffers from the worst finacial crisis it has ever known. So who is there to help us out? <a href="#">More…</a></p>
    		<h2>Other news today</h2>
    		<ul>
    			<li><a href="#">Barclays premiership</a></li>
    			<li><a href="#">IT in Africa</a></li>
    			<li><a href="#">Swahili for all Southern Africa</a></li>
    			<li><a href="#">Broadband intiative for Africa</a></li>
    		</ul>
    	</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; 2009 www.Shout-africa.com. Designed by <a href="http://www.freecsstemplates.org" class="link1">Free CSS Templates.</a> Inspired by Misheck 
    </p>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2009
    Posts
    187
    Thanks
    16
    Thanked 8 Times in 8 Posts
    #footer {
    clear: both;
    width: 680px;
    margin: 0px auto;
    padding: 5px 10px;
    border: 1px solid #000099;
    position: absolute;
    bottom: 0;
    height: PUT YOUR HEIGHT HERE;
    }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello misheck,
    Absolutely positioning the footer to the bottom doesn't really work that well. Try setting up a demo page with an ap footer, then add content to it.

    Here is a very stable footer at the bottom no matter what solution: http://nopeople.com/CSS/full-height-layout/index.html
    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

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    Hello misheck,


    Here is a very stable footer at the bottom no matter what solution: http://nopeople.com/CSS/full-height-layout/index.html
    Thats what I am trying to do and i have viewed the source code but its still not working on my test site. If I cannot set the height of the page because the heights will vary from content to content that I will publishing on the site.

    Thanks for the link I will give it go again.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by misheck View Post
    Thats what I am trying to do and i have viewed the source code but its still not working on my test site. If I cannot set the height of the page because the heights will vary from content to content that I will publishing on the site.

    Thanks for the link I will give it go again.
    The secret is in the #push.
    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

  • #6
    Regular Coder
    Join Date
    Jul 2009
    Posts
    187
    Thanks
    16
    Thanked 8 Times in 8 Posts
    ooh sorry I miss understood.

    You can do that by making a background image and repeat it down the page

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by Jazz914 View Post
    ooh sorry I miss understood.

    You can do that by making a background image and repeat it down the page
    I'm not so sure about that. I sure don't know how to get that to work anyway... can you put up an example?
    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

  • Users who have thanked Excavator for this post:

    misheck (10-29-2009)

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Jazz914 View Post

    You can do that by making a background image and repeat it down the page
    I woul appreciate if you coul show me an example because that seems like a good way to approach my problem. I have tried the solution above with #push but it only adds a futher increase to the main content page but does not stretch to the bottom if the page is empty or has 1 or 2 lines.

    So what do I need to o on the content css to repeat the white background to the bottom of the page?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    If your push is in the right place, you need a matching height for footer and push as well as a matching negative bottom margin on the wrapper.

    Try this:
    CSS
    Code:
    html, body{
    	height: 100%;
    	text-align: center;	
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #000;	
    	background: #e0dac1;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    /** BASIC */
    h1, h2, h3 {
    	text-transform: lowercase;
    	color: #000099;
    }
    ul {
    	margin-left: 0px;
    	padding-left: 1em;
    	list-style-position: inside;
    }
    a {
    	color: #000099;
    }
    a:hover {
    	text-decoration: none;
    	color: #699;
    }
    
    #wrap {
    	width: 700px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
    	text-align: left;
    	border-right: 1px solid #000000;
    	border-left: 1px solid #000000;
    	background: #CBBE94;
    }
    /** HEADER */
    
    #header {
    	width: 700px;
    	height: 60px;
    	margin: 0px auto;
    }
    
    #header h1 {
    	float: left;
    	margin: 0px;
    	padding: 20px 0px 0px 0px;
    }
    
    #header h2 {
    	float: right;
    	margin: 0px;
    	padding: 27px 0px 0px 0px;
    }
    
    /** MENU */
    
    #menu {
    	width: 700px;
    	height: 1.5em;
    	margin: 0px auto;
    	border: 1px solid #000099;
    }
    
    #menu ul {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	padding: 3px 10px;
    	border-right: 1px solid #000099;
    	text-decoration: none;
    }
    
    #menu a:hover {
    	background: #000099;
    	color: #FFFFFF;
    }
    
    /** CONTENT */
    
    #content {
    	width: 700px;
    	margin: 0px auto;
    	/* modified */
    	min-height: 100%;
    }
    
    #content h2 {
    	font-weight: normal;
    }
    
    #left {
    	float: left;
    	width: 480px;
    }
    
    #right {
    	float: right;
    	width: 200px;
    }
    
    /** FOOTER */
    
    #footer, #push {
    	clear: both;
    	width: 680px;
    	height: 35px;
    	margin: 0px auto;
    	padding: 5px 10px;
    	border: 1px solid #000099;
    	background: #f00;
    }
    
    #footer p {
    	margin: 0px;
    	padding: 0px;
    	font-size: x-small;
    }
    	#push {
    		background: none;
    		border: none;
    	}
    and the markup
    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" />
    <meta name="" content="authored by http://www.nopeople.com/Design/" />
    <meta name="" content="Sticky Footer by Ryan Fait - http://ryanfait.com/" />
    <title>Full height layout with footer at the bottom</title>
    <link href="global.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrap">
    <div id="header">
    	<h1>Shout-Africa</h1>
    	<h2>The African Entertainment Hub</h2>
    </div>
    <div id="menu">
    	<ul>
    		<li><a href="#">News</a></li>
    		<li><a href="#">Politics</a></li>
    		<li><a href="#">Sports</a></li>
    		<li><a href="#">Entertainment</a></li>
    		<li><a href="#">Music</a></li>
    		<li><a href="#">Videos</a></li>
    		<li><a href="#">Gallery</a></li>
    		<li><a href="#">Contact Us</a></li>
    	</ul>
    </div>
    <div id="content">
    	<div id="left">
    		<h2>Welcome to Shout-africa.com!</h2>
    		<p><strong>Shout-Africa</strong> is a community website built with the intention of providing entertainment, news and a discussion forum for 					  Everyone with the focus being mainly on Africa. Africa has always been misrepresented in many ways and I do hope that my site is not going to 					follow the 
    				same pattern that other sites have.</p>
    		<p>We are investing time and skills so we can bring you a site thats easy and freindly to use so please visit us more often so you can see the difference and the progress that we are making everyday.</p><p><strong>Shout-Africa</strong> is a community website built with the intention of providing entertainment, news and a discussion forum for everyone with the focus being mainly on Africa. Africa has always been misrepresented in many ways and I do hope that my site is not going to follow the same pattern that other sites have.</p>
    		<ul>
    			<li><a href="#">Php webdevelopers wanted</a></li>
    			<li><a href="#">Database Administrators wanted (MySQL prefered)</a></li>
    			<li><a href="#">Graphics designers wanted</a></li>
    			<li><a href="#">Journalist wanted</a></li>
    			<li><a href="#">Of course we need your stories</a></li>
    		</ul>
    		<p>All the positions are for development purposes initially and might become permanent and paid for positions. I shall aim to respond to all applications for the roles soon. Also the links are not yet activated because we are still working on sorting out the application procedure so that its easy for the both of us. </p>
    	</div>
    	<div id="right">
    		<h2>Recent Updates</h2>
    		<p><strong>[26/20/2009]</strong> Zimbabwe Unity gorvernment, how far can they go pretending all is fine?<a href="#">More…</a></p>
    		<p><strong>[26/20/2009]</strong> Is South Africa ready to host the World Cup, and is their football team strong enough to give Africa their first trophy? <a href="#">More…</a></p>
    		<p><strong>[26/20/2009]</strong>Drought reaped through Southern Africa whilst the Western World suffers from the worst finacial crisis it has ever known. So who is there to help us out? <a href="#">More…</a></p>
    		<ul>
    			<li><a href="#">Barclays premiership</a></li>
    			<li><a href="#">IT in Africa</a></li>
    			<li><a href="#">Swahili for all Southern Africa</a></li>
    			<li><a href="#">Broadband intiative for Africa</a></li>
    		</ul>
    		<p><strong>[26/10/2009]</strong> Zimbabwe Unity gorvernment, how far can they go pretending all is fine?<a href="#">More…</a></p>
    		<p><strong>[26/10/2009]</strong> Is South Africa ready to host the World Cup, and is their football team strong enough to give Africa their first trophy? <a href="#">More…</a></p>
    		<p><strong>[26/10/2009]</strong>Drought reaped through Southern Africa whilst the Western World suffers from the worst finacial crisis it has ever known. So who is there to help us out? <a href="#">More…</a></p>
    		<h2>Other news today</h2>
    		<ul>
    			<li><a href="#">Barclays premiership</a></li>
    			<li><a href="#">IT in Africa</a></li>
    			<li><a href="#">Swahili for all Southern Africa</a></li>
    			<li><a href="#">Broadband intiative for Africa</a></li>
    		</ul>
    	</div>
    </div>
    
                <div id="push">
                </div>
                <!--closes content--></div>
        <!--closes wrap--></div>
            <div id="footer">
                <p>
                    Copyright &copy; 2009 www.Shout-africa.com. Designed by 
                    <a href="http://www.freecsstemplates.org" class="link1">
                    Free CSS Templates.</a> Inspired by Misheck 
                </p>
            </div>
    </body>
    </html>
    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

  • #10
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    I will give it a try this afternoon. Thanks

  • #11
    New Coder
    Join Date
    Dec 2008
    Posts
    81
    Thanks
    11
    Thanked 1 Time in 1 Post
    Thanks Excavator thats what I was looking for. Thanks


  •  

    Posting Permissions

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