[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Help adapting my code to include a Sticky Footer

Posted on 2012-08-28
3
Medium Priority
?
1,231 Views
Last Modified: 2012-08-29
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

0
Comment
Question by:Tezdread
  • 3
3 Comments
 
LVL 1

Author Comment

by:Tezdread
ID: 38345715
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
 
LVL 1

Accepted Solution

by:
Tezdread earned 0 total points
ID: 38346201
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
 
LVL 1

Author Closing Comment

by:Tezdread
ID: 38346276
Solved it myself
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
Make the most of your online learning experience.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question