Help adapting my code to include a Sticky Footer

Hey,

I'm trying to build the basic structure of a page that will eventually become my first Wordpress theme and a Dreamweaver template and I've ran into a problem.

I want the Footer to be 'Sticky' I have tried using code out there (cssstickyfooter.com, to name just one) but it messes everything up that I've already got in place.

I've tried using other peoples code and fitting my design into it causes me headaches too.

So I've signed up on here for a month and hope that some good people can help me.

Here's my code so far, as you'll see I have some of the properties used in others Sticky footer code but what messes things up for me is that I don't want the Header n Footer to go across the screen and I've also added some CSS to give my Main Container a drop shadow left and right.

<!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>Untitled Document</title>
<style type="text/css" />
body {
	background-color: #fff;
}

* { 
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 1000px;
	margin: auto;
}
#container {
	background-color: #9F6;
	width: 950px;
	-moz-box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;
}
#header {
	background-color: #060;
	height: 220px;
}

#footer {
	background-color: #060;
	height: 150px;
}
#content {
	background-color: #CCC;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="container">
  <div id="header">Header</div>
<div id="content">
  <p>Content</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>

Open in new window

LVL 1
TezdreadAsked:
Who is Participating?
 
TezdreadConnect With a Mentor Author Commented:
Making progress...

I've got the sticky working and the fixed width, which was the main issue I was having when posting this so I've solved the problem.

However this raises another issue that someone maybe able to help me with. How can I create a drop shadow around the outer & footer that is Vertically aligned only? Currently the way I have it set, it means you can see the shadow on top of the footer.

I've split the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Draft-Template-v2.2</title>
<link href="expanding.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer">
    <div id="header"></div>
  <div id="main_content"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

Open in new window


@charset "utf-8";
/* CSS Document */
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
body {
	overflow-y: scroll;
	background-color: #DADADA;
}
#outer {
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	width: 1000px;
	margin:auto;
	min-height:100%;
	margin-top:-123px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	-moz-box-shadow: 0 0 20px 0 #999;
	-webkit-box-shadow: 0 0 20px 0 #999;
	background-color: #FFF;
}

* html #outer {
    height:100%
}
#header {
	border-top:123px solid #fff; /* soak up negative margin and allows header to start at top of page*/
	height:200px;
	background-color: #060;
	width:100%;
}
#main_content{
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFF;
}

#footer {/* footer now sits at bottom of window*/
	height: 123px;
	background-repeat: no-repeat;
	width:1000px;
	margin:auto;
	border-left: 1px solid #0e4700;
	border-right: 1px solid #0e4700;
	clear:both;
	background-color: #060;
	-moz-box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

Open in new window

0
 
TezdreadAuthor Commented:
Ok still trying to get this working and I think I may have made progress but it's still not working...the problem may be that I'm looking at this all wrong so I'll add where I'm trying to get to and maybe there are other, easier options?

I want to be able to easily (after knowing how!) produce Wordpress sites\themes. I'll use a Photoshop template and the width, header, content and footer dimensions will match up to a Dreamweaver template, then that will be split to give me the various php files used to create the Wordpress theme.

I've tried adapting the Twenty Ten theme but because there is so much code connected to more code it's a bit overwhelming so I was hoping that if I can build one theme (many times) I will be able to expand my knowledge bit by bit until I can create a Wordpress theme from almost any Photoshop design (big ambitions hey!)

Anyway this is where I'm at.

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

html, body {
height: 100%;
background-color: #fff;
}
* { 
margin: 0;
padding: 0;
}
#wrapper {
width: 1000px;
margin: auto;
min-height: 100%;
}
#container {
background-color: #9F6;
width: 950px;
padding-bottom:150px;
margin:auto;

}
#header {
background-color: #060;
height: 220px;
}
#content {
background-color: #CCC;
}
#footer {
position: relative;
background-color: #060;
height: 150px;
width:950px;
margin-top: -150px;
clear:both;
margin:auto;
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrapper {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">Header</div>
<div id="content">
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Open in new window



I moved the Footer DIV outside of the Wrapper DIV and it pushes the Footer down but off the screen :-/

I've also removed the 2 lines of CSS that gave the drop-shadow effect around the Container DIV.
0
 
TezdreadAuthor Commented:
Solved it myself
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.