Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

Need help with the sticky footer

perryc

By perryc
in CSS

 Share

Recommended Posts

perryc Newbie

perryc

Posted
Posted

Im having some trouble with getting the sticky footer right. If someone could help me fix this it would be very much appreciated.

 

Heres my 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>Perry's Design - Home</title>

<link href="reset.css" rel="stylesheet" type="text/css" />

<link href="perrysdesign.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

 

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

 

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<body onload="MM_preloadImages('images/nav_bar_hover_01.png','images/nav_bar_hover_03.png','images/nav_bar_hover_10.png','images/nav_bar_hover_05.png','images/nav_bar_hover_07.png')">

<div id="header"></div>

<div id="wrapper">

<div id="nav"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/nav_bar_hover_01.png',1)"><img src="images/nav_bar_01.png" alt="Link to http://www.perrysdesign.com" name="Image1" width="151" height="56" border="0" id="Image1" /></a>  <a href="pages/about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/nav_bar_hover_03.png',1)"><img src="images/nav_bar_03.png" alt="link to http://www.perrysdesign.com/about.html" name="Image2" width="151" height="56" border="0" id="Image2" /></a>  <a href="pages/services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nav_bar_hover_10.png',1)"><img src="images/nav_bar_05.png" alt="link to http://www.perrysdesign.com/services.html" name="Image3" width="151" height="56" border="0" id="Image3" /></a>  <a href="pages/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/nav_bar_hover_05.png',1)"><img src="images/nav_bar_07.png" alt="link to http://www.perrysdesign.com/contact.html" name="Image4" width="151" height="56" border="0" id="Image4" /></a>  <a href="pages/portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/nav_bar_hover_07.png',1)"><img src="images/nav_bar_09.png" alt="link to http://www.perrysdesign.com/portfolio.html" name="portfolio" width="152" height="56" border="0" id="portfolio" /></a></div>

<div id="content">Content</div>

 

</div>

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

<div id="footer">

<p><span class="footer_text"></span><span class="footer_text_left"></span>© Perry's Design 2011</p>

<p> </p>

<p> All rights reserved. No part of this publication may be reproduced in any material form or transmitted to any other person without </p>

<p>the prior written permission of Perry’s Design except as permitted under the Copyright Act of 1968 or unless expressly permitted in writing by Perry’s Design. </p>

</div>

</body>

</html>

 

 

Now here is my Reset CSS file:

 

 

@charset "UTF-8";

/* CSS Document */

 

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

 

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

font-family: Arial, Helvetica, sans-serif;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

background-color: #FFFFF6;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

 

 

 

Finally here is my CSS file i have been working on:

 

@charset "UTF-8";

/* CSS Document */

 

#header { height: 150px;

background-color: #FFFFF6;

background-image: url(images/header.png);

background-repeat: no-repeat;

text-align: center;

background-position: center;

 

 

}

 

#nav { height: 100px;

margin-top: 30px;

background-color: #FFFFF6;

text-align: center;

 

}

 

#content {

height: 500px;

margin-top: 30px;

backgorund-color: #FFFFF6;

font-family: Arial, Helvetica, sans-serif;

}

 

#quote { height: 50px;

margin-top: 30px;

background-color: #FFFFF6;

 

}

 

.footer, .push { height: 4em;

 

 

}

 

#footer {

height: 100px;

margin-top: 30px;

background-color: #000000;

color: #FFFFFF;

font-size: 16px;

padding-top: 30px;

text-align: center;

 

}

 

.footer_text {

font-size: 16px;

font-family: Arial, Helvetica, sans-serif;

text-align: center;

}

 

.footer_text_left {

text-align: left;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

}

 

#wrapper { width: 850px;

background-color: #FFFFF6;

margin: 0 auto -4em;

height: auto !important;

height: 100%;

 

 

}

 

a {

font-family: Arial Black, Gadget, sans-serif;

color: #000;

background-image: url(images/nav_bar_01.png);

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #309;

}

a:hover {

text-decoration: none;

color: #ff7b05;

}

a:active {

text-decoration: none;

color: #09F;

}

 

 

 

 

Thanks for your help,

 

 

 

Cody Perry

falkencreative Newbie

falkencreative

Posted
Posted

Looks like you are missing a couple lines of CSS:

 

html, body {
height: 100%;
}

and

 

min-height: 100%;
height: auto !important;

on your #wrapper. You also need to place your header and #push within the wrapper and update the height of your footer. Your code says the footer should be 4em high (".footer, .push { height: 4em; }"), but it is actually 160px high (100px + 30px of top margin and padding.) Also the 500px height you have set on #content may be causing the page to be longer than necessary.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...