...

View Full Version : another footer problem



misheck
10-28-2009, 11:23 PM
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
/** 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

<!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>

Jazz914
10-28-2009, 11:28 PM
#footer {
clear: both;
width: 680px;
margin: 0px auto;
padding: 5px 10px;
border: 1px solid #000099;
position: absolute;
bottom: 0;
height: PUT YOUR HEIGHT HERE;
}

Excavator
10-28-2009, 11:34 PM
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

misheck
10-28-2009, 11:43 PM
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.

Excavator
10-28-2009, 11:54 PM
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.

Jazz914
10-29-2009, 12:16 AM
ooh sorry I miss understood.

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

Excavator
10-29-2009, 12:35 AM
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?

misheck
10-29-2009, 08:43 AM
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?

Excavator
10-29-2009, 09:10 AM
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
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
<!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>

misheck
10-29-2009, 09:16 AM
I will give it a try this afternoon. Thanks

misheck
10-29-2009, 02:35 PM
Thanks Excavator thats what I was looking for. Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum