Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to anchor the footer to bottom of page

Posted on 2009-02-10
8
Medium Priority
?
2,083 Views
Last Modified: 2013-12-25
I am confused as heck about how to do this properly. IF you check out http://www.rockinghamsheriff.com/savan.php and many other pages on that site you will notice the footer just hangs around the middle of the page, unless you are running something like 640x480. Normally I guess that wouldnt be a problem but because of the way I created the background image that is centered and tiled vertically down the page, it creates the existing look that is very bad IMO. Is there another way to do this that I am missing? As you can probably see by the code I am far from an expert so the simpler the solution the better:) Thanks in advance!
0
Comment
Question by:BIZNETplus
  • 3
  • 2
  • 2
7 Comments
 
LVL 8

Expert Comment

by:ccpjc
ID: 23605976
Don't quite get what you mean, the footer is at the bottom of all the pages
do you mean have a scrollable box on each page?
0
 

Author Comment

by:BIZNETplus
ID: 23606097
Really? what resolution are you in?
0
 
LVL 8

Expert Comment

by:ccpjc
ID: 23606106
1280x800
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:BIZNETplus
ID: 23606136
Oh ok, I see now it doesn't happen until the vertical res exceeds 800. In 1280x1024 you definitely would see what I mean.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23611860
I re-coded the page with absolute links and DIVs.  DIVs are much better with positioning than tables are.  I tested in IE 7 and FF3.  You should be fine with resolution too as the positions are all relative to the main container.
<!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>Rockingham County Sheriff's Office - SAVAN</title>
<script type="text/javascript" src="stmenu.js"></script>
<LINK REL=StyleSheet HREF="http://www.rockinghamsheriff.com/style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="http://www.rockinghamsheriff.com/style.css" TYPE="text/css" MEDIA=screen>
<style type="text/css">
<!--
.style1 {
	color: #ffd700;
	text-align: center;
	vertical-align: middle;
}
#footer {
	position:absolute;
	width:100%;
	height:39px;
	z-index:1;
	background-image: url(http://www.rockinghamsheriff.com/images/footer.gif);
	bottom: -20px;
	text-align: center;
	background-repeat: no-repeat;
	padding-top: 10px;
	padding-bottom: 10px;
	left: 7px;
}
#container {
	position:absolute;
	width:800px;
	height:100%;
	z-index:25;
	top: 0px; /* counter the body center */
	background-image: url(http://www.rockinghamsheriff.com/images/bg.gif);
	background-repeat: repeat-y;
	background-position: center center;
	background-color: #BEA67D;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	clear: both;
}
#header {
	position:relative;
	width:auto;
	height:auto;
	z-index:2;
	top: 0px;
	text-align: center;
}
#content {
	position:relative;
	width:785px;
	height:auto;
	top: auto;
	bottom: auto;
	clear: both;
	padding: 10px;
}
body {
	background-image: url(http://www.rockinghamsheriff.com/images/gfh.gif);
	
}
-->
</style>
</head>
 
<table width="785" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
<body align="center">
<div id="container">
<div id="header"><img src="http://www.rockinghamsheriff.com/images/banner.gif" alt="Banner Image" width="785" height="150" align="middle" />
<script type="text/javascript" src="http://www.rockinghamsheriff.com/stmenu.js"></script><script type="text/javascript">
<!--
stm_bm(["menu1a91",820,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","785",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,0,7,5,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","bg_01.gif",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Home      ","","",-1,-1,0,"index.php","_self","","","","",5,5,0,"","",0,0,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",3,1,0,0,"#FFFFF7","#000000","#FFD700","#FFFFFF","bold 9pt 'Arial','Verdana'","bold 9pt 'Arial','Verdana'",0,0],111,0);
stm_ai("p0i1",[6,1,"#000000","",-1,-1,0]);
stm_aix("p0i2","p0i0",[0,"News","","",-1,-1,0,"","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",1],111,0);
stm_bpx("p1","p0",[1,4,0,2,0,5,0,0,80,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.30)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.30)",-2,80,0,0,"#666666","#000000",""]);
stm_aix("p1i0","p0i0",[0,"Sheriff\'s Blog","","",-1,-1,0,"blog.php","_self","","","","",0,0,0,"","",0,0,0,0,1,"#F9E0CA",1,"#666666",0,"","",3,1,0,0,"#FFFFFF","#FFFFFF","#FFD700","#FFFFFF","9pt 'Arial','Verdana'","9pt 'Arial','Verdana'"],111,0);
stm_aix("p1i1","p1i0",[0,"Press Releases","","",-1,-1,0,"press.php"],111,0);
stm_aix("p1i2","p1i0",[0,"Alerts","","",-1,-1,0,"alerts.php"],111,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Information"],111,0);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Our Mission","","",-1,-1,0,"mission.php"],111,18);
stm_aix("p2i1","p1i0",[0,"Domestic Violence","","",-1,-1,0,"dom_vio.php"],111,18);
stm_aix("p2i2","p1i0",[0,"SAVAN","","",-1,-1,0,"savan.php"],111,0);
stm_aix("p2i3","p1i0",[0,"Sex Offender Registry","","",-1,-1,0,"reg.php"],111,18);
stm_aix("p2i4","p1i0",[0,"Firearm Permits","","",-1,-1,0,"firearm.php"],111,18);
stm_aix("p2i5","p1i0",[0,"Fingerprinting","","",-1,-1,0,"finger.php"],111,18);
stm_aix("p2i6","p1i0",[0,"Civil Process","","",-1,-1,0,"civil.php"],111,18);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Programs"],111,0);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p1i0",[0,"Community Watch","","",-1,-1,0,"watch.php"],111,0);
stm_aix("p3i1","p1i0",[0,"CrimeStoppers","","",-1,-1,0,"crime_stoppers.php"],111,0);
stm_aix("p3i2","p1i0",[0,"G.R.E.A.T. Training","","",-1,-1,0,"great.php"],111,0);
stm_aix("p3i3","p0i1",[]);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Units"],111,0);
stm_bpx("p4","p1",[]);
stm_aix("p4i0","p1i0",[0,"Uniformed Patrol","","",-1,-1,0,"patrol.php"],0,18);
stm_aix("p4i1","p1i0",[0,"Investigations","","",-1,-1,0,"investigations.php"],0,18);
stm_aix("p4i2","p1i0",[0,"Detention","","",-1,-1,0,"detention.php"],0,18);
stm_aix("p4i3","p1i0",[0,"Civil Records","","",-1,-1,0,"records.php"],0,18);
stm_aix("p4i4","p1i0",[0,"SRT","","",-1,-1,0,"srt.php"],0,18);
stm_aix("p4i5","p1i0",[0,"K9","","",-1,-1,0,"k9.php"],0,18);
stm_aix("p4i6","p1i0",[0,"School Resource Officers","","",-1,-1,0,"sro.php"],0,18);
stm_aix("p4i7","p1i0",[0,"Dive Team","","",-1,-1,0,"dive.php"],0,18);
stm_aix("p4i8","p1i0",[0,"Animal Control","","",-1,-1,0,"animal.php"],0,18);
stm_ep();
stm_aix("p0i9","p0i1",[]);
stm_aix("p0i10","p0i2",[0,"Careers      ","","",-1,-1,0,"careers.php","_self","","","","",5,5,0,"","",0,0],111,0);
stm_aix("p0i11","p0i1",[]);
stm_aix("p0i12","p0i10",[0,"Contact      ","","",-1,-1,0,"contact.php"],111,0);
stm_ep();
stm_em();
//-->
</script></div>
 
<div id="content"><p class="header">SAVAN</p>
              <p class="body">The North  Carolina SAVAN (Statewide Automated Victim Assistance and Notification) System  is a service through which victims of crime can use the telephone or internet  to search for information regarding their offenders custody status and  register to receive telephone and email notification when their offenders  custody status changes.&nbsp;</p>              
  <p align="center" class="body"><a href="http://www.vinelink.com/vinelink/siteInfoAction.do?siteId=34003" target="_blank">Click here to access the SAVAN notification system</a></div>
 
 
<div align="center" class="footer" id="footer"><span class="style1">Rockingham County Sheriff's Office " Copyright ©2008 " Phone: 336-634-3030 " Dial 911 for Emergencies " 
    <a href="http://www.biznetplus.com" target="_blank">Design by BIZNETplus</a></span></div>
 
</div>
</body>
</html>

Open in new window

0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 23611888
Oops........wrong one.  Try this one instead
<!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>Rockingham County Sheriff's Office - SAVAN</title>
<script type="text/javascript" src="stmenu.js"></script>
<LINK REL=StyleSheet HREF="http://www.rockinghamsheriff.com/style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="http://www.rockinghamsheriff.com/style.css" TYPE="text/css" MEDIA=screen>
<style type="text/css">
<!--
.style1 {
	color: #ffd700;
	text-align: center;
	vertical-align: middle;
}
#footer {
	position:absolute;
	width:100%;
	height:39px;
	z-index:1;
	background-image: url(http://www.rockinghamsheriff.com/images/footer.gif);
	bottom: -20px;
	text-align: center;
	background-repeat: no-repeat;
	padding-top: 10px;
	padding-bottom: 10px;
	left: 7px;
}
#container {
	position:absolute;
	width:800px;
	height:100%;
	z-index:25;
	top: 0px; /* counter the body center */
	background-image: url(http://www.rockinghamsheriff.com/images/bg.gif);
	background-repeat: repeat-y;
	background-position: center center;
	background-color: #BEA67D;
		margin: 0 auto;   /* align for good browsers */
		text-align: left; /* counter the body center */
}
#header {
	position:relative;
	width:auto;
	height:auto;
	z-index:2;
	top: 0px;
	text-align: center;
}
#content {
	position:relative;
	width:785px;
	height:auto;
	top: auto;
	bottom: auto;
	clear: both;
	padding: 10px;
}
body {
	background-image: url(http://www.rockinghamsheriff.com/images/gfh.gif);
	
}
-->
</style>
</head>
 
<table width="785" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
<body align="center">
<div id="container">
<div id="header"><img src="http://www.rockinghamsheriff.com/images/banner.gif" alt="Banner Image" width="785" height="150" align="middle" />
<script type="text/javascript" src="http://www.rockinghamsheriff.com/stmenu.js"></script><script type="text/javascript">
<!--
stm_bm(["menu1a91",820,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","785",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,0,7,5,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","bg_01.gif",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Home      ","","",-1,-1,0,"index.php","_self","","","","",5,5,0,"","",0,0,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",3,1,0,0,"#FFFFF7","#000000","#FFD700","#FFFFFF","bold 9pt 'Arial','Verdana'","bold 9pt 'Arial','Verdana'",0,0],111,0);
stm_ai("p0i1",[6,1,"#000000","",-1,-1,0]);
stm_aix("p0i2","p0i0",[0,"News","","",-1,-1,0,"","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",1],111,0);
stm_bpx("p1","p0",[1,4,0,2,0,5,0,0,80,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.30)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.30)",-2,80,0,0,"#666666","#000000",""]);
stm_aix("p1i0","p0i0",[0,"Sheriff\'s Blog","","",-1,-1,0,"blog.php","_self","","","","",0,0,0,"","",0,0,0,0,1,"#F9E0CA",1,"#666666",0,"","",3,1,0,0,"#FFFFFF","#FFFFFF","#FFD700","#FFFFFF","9pt 'Arial','Verdana'","9pt 'Arial','Verdana'"],111,0);
stm_aix("p1i1","p1i0",[0,"Press Releases","","",-1,-1,0,"press.php"],111,0);
stm_aix("p1i2","p1i0",[0,"Alerts","","",-1,-1,0,"alerts.php"],111,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Information"],111,0);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Our Mission","","",-1,-1,0,"mission.php"],111,18);
stm_aix("p2i1","p1i0",[0,"Domestic Violence","","",-1,-1,0,"dom_vio.php"],111,18);
stm_aix("p2i2","p1i0",[0,"SAVAN","","",-1,-1,0,"savan.php"],111,0);
stm_aix("p2i3","p1i0",[0,"Sex Offender Registry","","",-1,-1,0,"reg.php"],111,18);
stm_aix("p2i4","p1i0",[0,"Firearm Permits","","",-1,-1,0,"firearm.php"],111,18);
stm_aix("p2i5","p1i0",[0,"Fingerprinting","","",-1,-1,0,"finger.php"],111,18);
stm_aix("p2i6","p1i0",[0,"Civil Process","","",-1,-1,0,"civil.php"],111,18);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Programs"],111,0);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p1i0",[0,"Community Watch","","",-1,-1,0,"watch.php"],111,0);
stm_aix("p3i1","p1i0",[0,"CrimeStoppers","","",-1,-1,0,"crime_stoppers.php"],111,0);
stm_aix("p3i2","p1i0",[0,"G.R.E.A.T. Training","","",-1,-1,0,"great.php"],111,0);
stm_aix("p3i3","p0i1",[]);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Units"],111,0);
stm_bpx("p4","p1",[]);
stm_aix("p4i0","p1i0",[0,"Uniformed Patrol","","",-1,-1,0,"patrol.php"],0,18);
stm_aix("p4i1","p1i0",[0,"Investigations","","",-1,-1,0,"investigations.php"],0,18);
stm_aix("p4i2","p1i0",[0,"Detention","","",-1,-1,0,"detention.php"],0,18);
stm_aix("p4i3","p1i0",[0,"Civil Records","","",-1,-1,0,"records.php"],0,18);
stm_aix("p4i4","p1i0",[0,"SRT","","",-1,-1,0,"srt.php"],0,18);
stm_aix("p4i5","p1i0",[0,"K9","","",-1,-1,0,"k9.php"],0,18);
stm_aix("p4i6","p1i0",[0,"School Resource Officers","","",-1,-1,0,"sro.php"],0,18);
stm_aix("p4i7","p1i0",[0,"Dive Team","","",-1,-1,0,"dive.php"],0,18);
stm_aix("p4i8","p1i0",[0,"Animal Control","","",-1,-1,0,"animal.php"],0,18);
stm_ep();
stm_aix("p0i9","p0i1",[]);
stm_aix("p0i10","p0i2",[0,"Careers      ","","",-1,-1,0,"careers.php","_self","","","","",5,5,0,"","",0,0],111,0);
stm_aix("p0i11","p0i1",[]);
stm_aix("p0i12","p0i10",[0,"Contact      ","","",-1,-1,0,"contact.php"],111,0);
stm_ep();
stm_em();
//-->
</script></div>
 
<div id="content"><p class="header">SAVAN</p>
              <p class="body">The North  Carolina SAVAN (Statewide Automated Victim Assistance and Notification) System  is a service through which victims of crime can use the telephone or internet  to search for information regarding their offenders custody status and  register to receive telephone and email notification when their offenders  custody status changes.&nbsp;</p>              
  <p align="center" class="body"><a href="http://www.vinelink.com/vinelink/siteInfoAction.do?siteId=34003" target="_blank">Click here to access the SAVAN notification system</a></div>
 
 
<div align="center" class="footer" id="footer"><span class="style1">Rockingham County Sheriff's Office " Copyright ©2008 " Phone: 336-634-3030 " Dial 911 for Emergencies " 
    <a href="http://www.biznetplus.com" target="_blank">Design by BIZNETplus</a></span></div>
 
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:BIZNETplus
ID: 23811870
Wow, i didnt expect anyone to recode the whole page for me. Not to sound ungrateful but is there a way to fix this issue without having to recode each page? That is just to much work for the project unfortunately.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Suggested Courses

569 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