Jump to content
Stef's Coding Community
Sign in to follow this  
perryc

Need help with the sticky footer

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...