Footer on bottom
Posted: Tue Jul 29, 2008 6:11 pm
This is my site dev.neil-harding.co.uk.
I do have a global content thingy for a footer but have disabled it as when i apply it it sits just below the content. Now on some pages this content is short and the footer appears half way up the screen. Is there a way of getting it to sit on the bottom no matter how big the conent is??
Here is my HTML and CSS stuff
CSS
Template
I do have a global content thingy for a footer but have disabled it as when i apply it it sits just below the content. Now on some pages this content is short and the footer appears half way up the screen. Is there a way of getting it to sit on the bottom no matter how big the conent is??
Here is my HTML and CSS stuff
CSS
Code: Select all
/**
Main Elements
*/
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
font: normal 0.85em Tahoma, 'Trebuchet MS', sans-serif;
color: #999999; /** #6A6A6A **/
background-image: url(uploads/images/filler-background.jpg); /** Link to the image you created **/
background-repeat: repeat-y; /** Repeats the image vertically **/
background-position: center; /** Centers the Background image **/
background-color: #001100; /** Website BG colour (matches canvas colour in Step 1) **/
}
/* Headers */
h1 {font-size: x-large; color: red; text-align: center;}
h2 {font-size: large; color:blue;}
h3 {font-size: normal; color:green;}
a {
color: #F88F26;
background-color: inherit;
text-decoration: none
}
a:hover {
color: #FFF;
background-color: inherit;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 950px;
height: 100%;
position: relative;
}
#header {
width: auto;
text-align: center;
border-bottom: .2em red solid
}
/* sidebar */
#sidebar {
float: right;
width: 20%;
margin: 10px 0; padding: 0;
}
#sidebar ul.sidemenu {
list-style:none;
margin: 0;
padding: 5px 0 15px 0;
}
#sidebar ul.sidemenu li {
padding: 0 10px;
}
#sidebar ul.sidemenu a {
display: block;
font-weight:bold;
color: #6A6A6A;
height: 1.5em;
text-decoration: none;
padding:.3em 0 .3em 15px;
background: #000;
border-bottom: 2px dashed #ffffff;
line-height: 1.5em;
}
#sidebar ul.sidemenu a.top{
border-top: 2px dashed #ffffff;
}
#sidebar ul.sidemenu a:hover {
padding: .3em 0 .3em 10px;
background: #000;
border-left: 5px solid #D30F16;
color: #D30F16;
}
#sidebar .sidebox {
background: #000;
margin: 5px 15px 10px 15px;
}
#content {
font: normal 1.1em Tahoma, 'Trebuchet MS', sans-serif;
margin-top: 1em;
width: 76%;
padding: .5em;
}
#footer {
font: normal 0.75em Tahoma, 'Trebuchet MS', sans-serif;
position:absolute;
bottom:0;
width:100%;
text-align: center;
}
#menu {
font: normal 1.1em Tahoma, 'Trebuchet MS', sans-serif red;
}
img {
padding: 1em;
}Code: Select all
<!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" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
</__body>
<!-- start wrapper -->
<div id="wrapper">
<!-- start header -->
<div id="header">
<img src="uploads/images/logo.jpg" alt="there should be a logo">
</div>
<!-- end header -->
<div id="sidebar" >
{cms_module module='menumanager' template='blackboy' start_level='1' number_of_levels='1'}
</div>
<!-- start content -->
<div id="content">
<h1>{title}</h1><br \>
{content}
</div>
<!-- end content -->
</div>
<!-- end wrapper div -->
<__body>
</__html>