css and footer

or89 · 20-06-2007 12:19pm #1

how do u make a footer stick to end of page for multiple pages,

my changes in css only effect my files sometimes and other times have no effect although i think im doing the same thing

Evil Phil · 20-06-2007 12:33pm

I'll just pop this over to Webmaster & Flash. You'll get a better response there.

or89 · 20-06-2007 12:55pm

thanks

forbairt · 20-06-2007 12:56pm

By end of pages what do you mean exactly ...

You want the footer to hover at the bottom .. even if your text goes down further ... ?

do you have an example of what you mean ?

or89 · 20-06-2007 1:12pm

What im trying to do is, if the content is less then the size of the page the footer will stay at the end. if the content is greater than the size of the page the footer will move down.

the code is to long and its broken up, so i took a screen shot, and attached a bit of code

my footer:

<div id="footer">

<p>AIT Department.</p>
<p>Last update 09/06/2004.</p>

<p>For more information contact
<a href=
<%
response.write( email )
%>
>
<%
response.write( name )
End Sub
GetInfo()
%>
</a>
</p>
<span id=ctl00_LblCopyright> 2006 Company.</span>

</div>

CSS:

#footer { width:770px;
text-align:center;
margin:0 100px;
height:100px;
border-top: #999999 dotted thin;
PADDING-LEFT: 7px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #999999;
PADDING-TOP: 7px;
TEXT-DECORATION: none;
text-align:center;
font-style:italic
}

forbairt · 20-06-2007 1:33pm

This do the job for you ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Forbairt Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body{ height:100%;
min-height:100%
}

#container{
min-height:100%;
height: auto;
}

* html #container{
height:100%;
}

#content{
min-height:100%;
}

#footer{
  background-color: #FF0000;
  text-align: center;
  width:98%;
}
</style>
<script type="text/javascript">
function resizer(){
iHeight = 0;

if( typeof window.innerHeight != "undefined" ) {
	iHeight = window.innerHeight;
}

if( typeof document.documentElement.clientHeight != "undefined" ) {
	iHeight = ( document.documentElement.clientHeight > iHeight ) ? document.documentElement.clientHeight : iHeight;
}

if( typeof document.getElementsByTagName( "body" )[ 0 ].clientHeight != "undefined" ) {
	iHeight = ( document.getElementsByTagName( "body" )[ 0 ].clientHeight > iHeight ) ? document.getElementsByTagName( "body" )[ 0 ].clientHeight : iHeight;
}

div = document.getElementById( "footer" );
iTop = div.offsetTop;
d = div;
while( d = d.offsetParent ) {
	iTop += d.offsetTop;
}

div = document.getElementById( "footer" );
div.style.position = "absolute";
if( iHeight > iTop ) {
	div.style.top = ( iHeight - ( 39 + div.style.height ) ) + "px";
}

div.style.display = "block";
}
</script>
</head>
<body onload="resizer();">

<div id="container">
<p>The Mental is about Donegal boy, Joe Boyle, who fails to fit in. It is about his struggle to find a safe place in the world, which only leads him further down a road of frustration, isolation and ultimately breakdown. In St. Conal&#8217;s institution, Letterkenny, he becomes aware of a past resident, Seosamh Mac Grianna, the Irish language writer, who spent the last thirty years of his life there. We also glimpse upon the lives of many of those who have lived and died in the asylum. Untimately it&#8217;s a show about the human need to be seen and recognised by another person, the need to belong.</p>
<div id="footer">&copy; forbairt</div>
</div>
</body>
</html>

or89 · 20-06-2007 1:59pm

there's potental! im just trying to get it to work with my code now, what u done looks about right,
thanks for the help and your time:)

forbairt · 20-06-2007 2:14pm

no problem if you're still stuck later ... drop me a pm

css and footer

Comments