Page 1 of 2
footer won't stay at the bottom
Posted: Mon Aug 05, 2013 2:46 pm
by dorlow
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: Select all
{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: Select all
{
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: Select all
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>
Re: footer won't stay at the bottom
Posted: Mon Aug 05, 2013 3:18 pm
by velden
I don't believe it's smart (nor valid) to put the footer code outside the body tags.
So move it just above the closing <__body> tag.
Then make sure the body has a min-height : 100% and position : relative. (body should NOT have height : 100%, but html should).
Then the footer: position : absolute; bottom : 0;
That should make it stick at the body (which is NOT per se the viewport as content maybe larger then the viewport).
You might want to take some precautions to make sure that when the viewport is not that high, you don't overwrite the contents with the absolute positioned footer.
E.g. if your footer height is 40px, make sure that the 'content' part has a padding-bottom of 50px.
There should be a LOT of examples out there on the internet.
Re: footer won't stay at the bottom
Posted: Mon Aug 05, 2013 5:27 pm
by Dr.CSS
Always keep everything within the </__body> <__body>...
This will show you how to 'stick it' to the bottom...
http://www.w3schools.com/css/css_positioning.asp
Re: footer won't stay at the bottom
Posted: Mon Aug 05, 2013 6:03 pm
by Rolf
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 6:42 pm
by dorlow
ok, not working for me. I tried the position bottom thing and it worked on the first homepage. Went right below the "Alumni" link on the left. As soon as I clicked other links where there's body content below the alumni link on the left, it still went right under the alumni link going through whatever content was there.
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 6:50 pm
by velden
If you leave it on for an hour, we could have a look what's going wrong.
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 7:19 pm
by dorlow
Ok, I turned it back on. Thank you!
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 7:25 pm
by dorlow
Also, I'd like for there to be a little space in between the Alumni last entry and the footer. Not just smashed right up to it. Also I think the footer used to be blue but it almost looks like it's blue with a white transparent layer on top of it. I think it used to be the same blue as the top bar.
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 7:45 pm
by velden
Have a look at your stylesheets and add some lines.
With those lines I already see a footer at the bottom:
Code: Select all
div#footer {
background-color: #EAE9E2;
border-top: 2px solid #DAD9D0;
bottom: 0; /* added */
clear: both;
color: #5A5954;
position: absolute; /* added */
width: 100%; /* added */
}
Code: Select all
body {
background: url("uploads/template/bodybg.png") repeat-x scroll center top #FFFFFF;
color: #333333;
min-height: 100%; /* added */
position: relative; /* added */
}
BUT there's something strange: your header div has a height of 150px but it contains the content div. I think that the content div should be outside the header div.
The fixed height of the header div breaks the 'flow'.
ps. doesn't have this school some budget for some help to get this site 'in shape'. After that you can probably easily maintain it with cmsms.
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 7:58 pm
by dorlow
Not sure if I'm missing something you wrote. I changed my footer and body to match exactly what you put in your last post and it broke the website. All the fonts went to some kind of times new roman and the footer was still in the middle of the page. I put it back the way it was.
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 7:59 pm
by dorlow
Here's my whole stylesheet... I'm wondering what you see on by just looking at the source of the website isn't showing you the whole picture... Your edits didn't really match my style sheet.
Code: Select all
/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
/*
padding sets the space between the left menus to the side of the browser... adds blank white space
although 0 to 10 made some space but 10 to 300 didn't change...
*/
padding:300;
}
/*
Set initial font styles
*/
body {
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size: 75.01%;
line-height: 1em;
}
.footer, .push {
height: 4em;
}
/*
set font size for all divs,
this overrides some body rules
*/
div {
font-size: 1em;
}
/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
border: 0;
}
/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
background-color: inherit;
color: #0f86c8;
text-decoration: underline;
}
a:visited {
background-color: inherit;
color: #0f86c8; /* a different color can be used for visited links */
}
/* remove underline on hover and change color */
a:hover {
text-decoration: none;
color: #31346e;
}
/*****************
basic layout
*****************/
body {
background:url(uploads/template/bodybg.png) top center repeat-x #fff;
color: #333;
}
/* center wrapper, min max width */
div#pagewrapper {
margin: 0 auto; /* this centers wrapper */
max-width: 80em; /* IE wont understand these, so we will use javascript magick */
min-width: 60em;
color: black;
}
/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
height: 150px; /* adjust according your image size */
background: url(uploads/template/header.png) top center no-repeat;
position:relative;
}
div#header h1 a {
/* you can set your own image here */
/* background:url(uploads/template/logo.png) no-repeat center center; */
/*Removed logo in upper left of website per Kari Paulen on 5-23-2012 */
display: block;
height: 150px; /* adjust according your image size */
width:150px;
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}
div#address {
position:absolute;
left:0px;
/*
left used to be 140. Changed it to 0 to move address left where paw print used to be
*/
top:23px;
font-size:14px;
font-weight:bold;
color:#686868;
line-height:1.2em;
}
#address h1 {
color:#30307a;
font-family:"fantasy", serif;
font-weight:bold;
font-style:italic;
font-size:32px;
line-height:1.4em;
}
div#news {
width:290px;
position:absolute;
top:20px;
right:240px;
height:130px;
overflow:hidden;
margin:0px;
}
/*
Removed upper right buttons below
*/
/*
#buttons {
position:absolute;
right:0px;
top:30px;
}
*/
/*
#buttons li {
list-style-type:none;
padding:10px 30px;
}
/*
#buttons li a {
font-size:18px;
font-weight:bold;
color:#fff;
text-decoration:none;
}
*/
#buttons li a:hover {
background:transparent;
color:#303079;
}
*/
/*
Buttons on right color background below
*/
/*
#buttons li.blue {
background:url(uploads/template/buttonblue.png) center center no-repeat;
}
#buttons li.green {
background:url(uploads/template/buttongreen.png) center center no-repeat;
}
#buttons li.orange {
background:url(uploads/template/buttonorange.png) center center no-repeat;
}
*/
/* position for the search box */
div#search {
padding:20px 0px 20px 20px;
}
#search .label {
color:#a6a6a6;
text-align:left;
padding:5px 0;
}
#search input {
border:1px solid #cbb204;
color:#8c7802;
background:#fffce8;
padding:4px;
}
#search input.submit {
background:#cbb204;
color:#fff;
border:0px;
font-weight:bold;
}
div.breadcrumbs {
padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
font-size: 90%; /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
margin: 0 1em; /* css shorthand rule will be opened to be "0 1em 0 1em" */
border-bottom: 1px dotted #000;
}
div.breadcrumbs span.lastitem {
font-weight:bold;
}
div#content {
margin: 1.5em auto 2em 0; /* some air above and under menu and content */
}
div#main {
margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
margin-right: 20%; /* and some air on the right */
}
div#sidebar {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 26%; /* sidebar width, if you change this please also change #main margins */
display: inline; /* FIX IE double margin bug */
margin-left: 0;
/* padding: 10.5em; puts padding before menu on left side. commenting out because not looking quite right. with just this, bar still goes all the way across and doesn't look right.*/
}
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#footer p {
font-size: 0.8em;
padding: 1.5em; /* some air for footer */
text-align: center; /* centered text */
margin: 0;
clear: both;
}
div#footer p a {
color: #5a5954;* needed becouse footer link would be same color as background otherwise */
clear: both;
}
/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
height: 1px;
padding: 1em;
border-bottom: 1px dotted black;
margin: 1em;
}
/* relational links under content */
div.left49 {
width: 49%; /* 50% for both left and right might lead to rounding error on some browser */
}
div.right49 {
float: right;
width: 49%;
text-align: right;
}
/********************
CONTENT STYLING
*********************/
div#content {
}
/* HEADINGS */
div#content h1 {
font-size: 2em; /* font size for h1 */
line-height: 1em;
margin: 0;
color: #31346e;
}
div#content h2 {
color: #31346e;
font-size: 1.8em;
text-align: left;
line-height: 2em;
font-family:"Times New Roman", serif;
font-style:italic;
}
div#content h3 {
color: #31346e;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 0 0.5em 0;
}
div#content h4 {
color: #294B5F;
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
div#content h5 {
color: #294B5F;
font-size: 1.1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
h6 {
color: #294B5F;
font-size: 1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
/* END HEADINGS */
/* TEXT */
p {
font-size: 1em;
margin: 0 0 1.5em 0; /* some air around p elements */
line-height: 1.4em;
padding: 0;
}
blockquote {
border-left: 10px solid #ddd;
margin-left: 10px;
}
strong, b {
/* explicit setting for these */
font-weight: bold;
}
em, i {
/* explicit setting for these */
font-style:italic;
}
/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}
pre {
border: 1px solid #000; /* black border for pre blocks */
background-color: #ddd;
margin: 0 1em 1em 1em;
padding: 0.5em;
line-height: 1.5em;
font-size: 90%;
}
/* Separating the divs on the template explanation page, with some bottom-border */
div.templatecode {
margin: 0 0 2.5em;
}
/* END TEXT */
/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
font-size: 1.0em;
line-height: 1.4em;
margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
margin: 0 0 0.25em 3em;
}
/* definition lists topics on bold */
div#main dl dt {
font-weight: bold;
margin: 0 0 0 1em;
}
div#main dl dd {
margin: 0 0 1em 1em;
}
div#main dl {
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid #c0c0c0;
}
/* END LISTS */
#above_content {
padding:5px 10px 25px 10px;
font-size:1.3em;
font-weight:bold;
color:#ff0000;
line-height:1.3em;
}
#above_content a {
text-decoration:underline;
}
#above_content p {
display:inline;
}
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 8:01 pm
by dorlow
heres my footer stylesheet...
Code: Select all
{
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Then here's my template layout...
Code: Select all
{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 *}
{* 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 *}
{* Moving footer inside body that found in some online articles does make footer almost right on main page, but footer stays same distance from top of screen on all pages so other pages cuts off text because the page length is different.
*}
<div id="footer">
{global_content name='footer'}
</div>
{* End Footer *}
<__body>
</__html>
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 8:11 pm
by velden
Here's my whole stylesheet... I'm wondering what you see on by just looking at the source of the website isn't showing you the whole picture... Your edits didn't really match my style sheet.
use Firefox and Firebug and you'll see what I see.
Looking at your opening post and the template you posted there I can see that it says '{* End Header *}' BUT the header div is NOT closed there. In stead it is closed after closing the content div.
Then the css I posted should be added to the corresponding, existing css.
So find A body rule (you have at least two in your stylesheet) and the #footer rule and add the lines from my example.
But the html should be repaired too because that's causing troubles as well.
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 8:39 pm
by dorlow
I installed that add-on in Firefox and I'm not trusting it. It's saying my footer's HTML code is this...
Code: Select all
© Copyright Lakeview Community
<a id="_GPLITA_0" title="Click to Continue > by CouponDropDown" style="text-decoration:underline" href="#" in_rurl="REMOVED">Schools</a>
Looks like it's trying to insert spyware HTML code into the website. What in the world is Coupon Drop Down? Like if I were to copy the HTML it's producing, fix it but forget to take those coupon html links out, next thing I know I have advertising on the website. Maybe i'm understanding the add-on wrong...
Re: footer won't stay at the bottom
Posted: Tue Aug 06, 2013 10:38 pm
by Dr.CSS
You have some HTML errors that may make the page not behave as it should, extra </__script> in the head, <ul> <ul> above the menu, etc., clean these up and then try the footer...
I haven't seen a footer on that site so far, if it is messing up the site to have it, copy a page, hide from menu, copy the template and add the footer to it and attach that the new copied template to it, I do this for testing...