PDA

View Full Version : Footer placement on css layout



justplaindoug
Jan 21st, 2009, 09:56 PM
I have made some progress after getting some assistance but since this is a new world to me (using only css for layout) I am getting stumped.

I cannot get the footer to sit correctly at the bottom of the info.

I want it at the bottom of the screen when there is not enough info to cause a scroll- however when it does scroll I want it at the bottom.

I have done some searching and found info on a "container" class putting it at min height 100% but that isnt' working.

Leads me to think there might be something I am doing wrong.

I have run both the css and html through the w3 validator and both are green.

So any suggestions...I am stumped.

link (http://www.kcrockyhorror.com/test.html)

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>KCRockyHorror.com - The Home of Fishnets and Floorshows</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<div class="logo">
</div>
</div>
<div id="leftnavigation">
<h1>This Way to Denton</h1>
<p>Testing the css</p>
</div>
<div id="content">
<h1>dasdfa</h1>
<p>

The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.


The latest stable release of WordPress (Version 2.7) is available in two formats from the links to your right. If you have no idea what to do with this download, we recommend signing up with one of our web hosting partners that offers a one click install of WordPress or getting a free account on WordPress.com.
What’s Next?

With our famous 5-minute installation, setting up WordPress for the first time is simple. We’ve created a handy guide to see you through the installation process. If you're upgrading your existing installation, we've got a guide for that, too. And should you run into any trouble along the way, our support forums are a great resource, where seasoned WordPress experts volunteer their time to help you get the most out of your blog.
</p>

</div>
<div id="rightnavigation">
<h1>Upcoming Events</h1>
<p>February 21st<br />
10pm Show at the Screenland</p>
<p>March 21st<br />
The Stripping of the Green!<br />
Our special St. Patricks Show
</p>
</div>
<div id="footer">
<!--#include file="footer.html" -->

</div>
</body>
</html>


css code

* {
margin:0;
padding:0;
}
a:link {
color: #FFFFFF;
}
body {
margin : 0;
padding : 0;
border-color : #cc0000;
background:url(Argylebl.jpg);
background-attachment:fixed;
background-color : #000000;
color : #ffffff;
}
p, ul, ol, li {
font : 10pt Arial,geneva,helvetica;
}
h1 {
font : bold 14pt Arial, Helvetica, geneva;
}
h2 {
font : bold 12pt Arial, Helvetica, geneva;
}
#leftnavigation {
position : absolute;
left : 0;
width : 15%;
height: 50%;
margin-left : 10px;
margin-top : 170px;
color : #000000;
padding : 3px;
background-color:#666;
}


#rightnavigation {
position : absolute;
right : 0;
margin-right: 10px;
top : 170px;
width : 15%;
height: 50%;
padding-left : 10px;
color : #000000;
padding : 3px;
background-color:#666
}
#header {
position : absolute;
width:100%;
height: 150px;
margin-right: 0px;
top : 0px;
color : #ffffff;
background-image:url(header.jpg);
background-color:#000000;

}

.logo {
float:left;
background-image:url(fishnetslogo.jpg);
background-repeat:no-repeat;
height:150px;
width:262px;
}

#header p h1{
padding-left: 10px;
padding-top: 10px
}

#footer {
position:absolute;
width:100%;
bottom:0px;
color: #ffffff;
background-image:url(footer.jpg);
background-color:#000;
}



#footer p {
font-family:Tahoma, Geneva, sans-serif;
padding-right:10px;
float:right;
height:50px;
line-height:50px;
}


#content {
position: absolute;
top : 0px;
margin : 200px 25% 0 25%;
width : 50%;
padding : 3px;
background-color:#666;
color : #000000;
}
#content h1, #content h2 {
color : #cc0000;
}

TIA

BoldUlysses
Jan 21st, 2009, 10:05 PM
I think what you might be interested in is the CSS Sticky Footer (http://ryanfait.com/sticky-footer/). The footer stays stuck to the bottom until you have enough content to scroll the page, at which point it flows below the content.

Here's a gutted version I made:


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

<title>Template 14</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">

* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width:500px;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}

.header, .wrapper p {
background:#ccc;
}

.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

.footer {
background:#eee;
width:500px;
margin:0 auto;
}

</style>

</head>
<body>

<div class="wrapper">

<div class="header">
<h1>CSS Sticky Footer</h1>
</div>

<p>Content goes here.</p>

<div class="push"></div>

</div>

<div class="footer">
<p>Footer goes here.</p>
</div>

</body>
</html>

jcdevelopment
Jan 21st, 2009, 10:07 PM
have you looked into to stick footer (http://ryanfait.com/sticky-footer/) at all. Does this help you?

EDIT** I was late

justplaindoug
Jan 21st, 2009, 10:18 PM
i tried that stick footer- but it didn't work. Thats what I was talking about in the first post as something I tried. Makes me think something is wrong with my code.

I don't want to just copy and paste this and slap my stuff in- i want to learn why mine isn't working.

BoldUlysses
Jan 21st, 2009, 10:28 PM
From experience, the sticky footer does tend to be a finicky method. To make it work on one of my sites I had to start over with the sticky footer template and add layout elements one at a time, checking the browser each time to make sure the footer was still working. If an element broke the footer, I backed up and tried an alternate method. Fortunately once I got past the basic layout elements and into the detail, the process sped up considerably.

There may be other methods of achieving the effect you want, but I'm not aware of them. Others may be. In that sense, I can't simply tell you why your method (as in the original post) isn't working.

Hope that helps! :)

jcdevelopment
Jan 21st, 2009, 10:30 PM
its not working because of position absolute on both the wrapper and the footer. The wrapper itself needs to be a height of 100%. Thast way not matter what the footer will be at the bottom.

i took your code and did this... you may need to change a few things but it should work.


html, body {
height: 100%;
}


#content {
background-color:#666666;
color:#000000;
margin:200px 25% 0;
padding:3px;
min-height: 100%;
height: auto !important;
height:100%;
width:50%;
}

#footer {
background-color:#000000;
background-image:url(footer.jpg);
color:#FFFFFF;
width:100%;
}

justplaindoug
Jan 21st, 2009, 10:48 PM
From experience, the sticky footer does tend to be a finicky method. To make it work on one of my sites I had to start over with the sticky footer template and add layout elements one at a time, checking the browser each time to make sure the footer was still working. If an element broke the footer, I backed up and tried an alternate method. Fortunately once I got past the basic layout elements and into the detail, the process sped up considerably.

There may be other methods of achieving the effect you want, but I'm not aware of them. Others may be. In that sense, I can't simply tell you why your method (as in the original post) isn't working.

Hope that helps! :)

Here's the thing- and it's because I am new to css I am sure. I feel like I am missing some huge point. Like why I can't get it to fall at the bottom of the info. Period. I guess I need to read up on my positioning. I just for the life of me figure out why everything is going where I want...except the footer. It's infuriating.

BoldUlysses
Jan 21st, 2009, 11:04 PM
It's easy enough to get the footer to fall below the content regardless; making it stick to the bottom of the window with less content than would fill the window is the hard part.

The "huge point" you might be missing is that positioning something absolutely (in this case, both your footer and your content) takes it out of the normal "document flow" and means that it will no longer flow beneath your content. This is why many caution against overuse of absolute positioning.

Try removing position:absolute from both and see what happens.