I'm the administrator of the website
http://www.lakeviewschools.net
.
I can't remember how long back, but sometime in the last few years, the footer broke. Some reason it just sits half way through the webpage. So, for now I have it commented out in the template. I just googled how to write an html footer (I'm really not a great developer.) I pasted some html code in there and uncommented it to see what would happen and it went through the bitter bottom of the 4 icons on the page. But if I changed to the elementary page, it went right through the middle of the page. Does anyone know any tricks to get it to stay at the bottom? Here's the code...
Here's the template...
Code:
{process_pagedata}
<!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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{literal}
<script type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}
</script>
{literal}
<script language="javascript" type="text/javascript" src="/scripts/budgetbadge/budgetBadge.js"></script>
{/literal}
</head>
<body>
<hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "For template: Left menu + 1 column" *}
<div id="header">
<h1>{cms_selflink page="home" text="$sitename"}</h1>
<hr class="accessibility" />
<div id="helpmenu">{menu start_page="top-help-menu" number_of_levels="1" template="default"}</div>
{*
<div id="address">{global_content name="district_address"}</div>
*}
<div id="transparency_reporting">{global_content_name="transparency_reporting"}</div>
<div id="news">{global_content name="news"}</div>
{*
<div id="buttons">{global_content name="buttons"}</div>
*}
{* End Header *}
<div id="menu_horiz">{menu start_page="school-menu" number_of_levels="1"}</div>
{* Start Content (Navigation and Content columns) *}
<div id="content">
{* Start Sidebar *}
<div id="sidebar">
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
{* End Navigation *}
{* Start Search *}
{*
<div id="search">
{search searchtext="Enter Keywords..."}
</div>
*}
{* End Search *}
</div>
{* End Sidebar *}
{* Start Content Area *}
<div id="main">
<div style="float: right;">{print showbutton=true script=true}</div>
<h2>{title}</h2>
{content} <br />
<hr class="accessibility" />
</div>
{* End Content Area *}
</div>
{* End Content *}
</div>{* end pagewrapper *}
</body>
{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
{* Something is wrong with the footer. If uncommented, doesn't adjust right with website *}
{*
<div id="footer">
{global_content name='footer'}
</div>
*}
{* End Footer *}
</html>
Then here's the footer stylesheet...
Code:
{
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
actually that last footer is some code I just pasted off the web. The original code, which gives the same exact results is this...
Code:
div#footer {
clear: both; /* keep footer below content and menu */
color: #5a5954;
background-color: #eae9e2; /* same bg color as in header */
border-top:2px solid #dad9d0;
}
<div id="footer">
{global_content name='footer'}
</div>