Code Snippets

HTML/CSS Source Code

Welcome to Dream.In.Code
	Become an Expert! Join 244,303 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 788 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Floating Ad Banner at Bottom of Screen

This is the code I'm using to display the fixed position banner at the bottom of the browser window. This is also referred to as the "catfish" banner on SitePoint. Credit for the CSS goes to howtocreate.co.uk and the original code can be found here: http://www.howtocreate.co.uk/fixedPosition.html

Submitted By: skyhawk133

Actions:

Rating:

Views: 27,174

Language: HTML/CSS

Last Modified: April 11, 2006

Instructions: Just paste this in your page.

Snippet

<style type="text/css">
<!--
#fixme {
/* IE 5.0/Win and other lesser browsers will use this */
position: absolute; right: 0px; bottom: 0px;
}
body > div#fixme {
/* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */
position: fixed;
}
--></style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( +0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
<div id="fixme" style="height: 120px; width: 100%;">
<div style="z-index: 5; background: url(http://home.dreamincode.net/images/catfish/catfish_tile2.gif); width: 100%; height: 120px;">
<div style="float: left; position: relative; left: 0; top: 0;"><a href="http://forums.dreamincode.net/showtopic14671.htm"><img src="http://home.dreamincode.net/images/catfish/catfish2.gif" height="120" border="0"></a></div>
<div style="float: right; position: relative; text-align: right; top: 75px; font-size: 10px; font-weight: bold;"><a onClick="hiderow('fixme');return true;" style="cursor: pointer;">Close Me</a></div>
<div style="float: left; position: relative; top: 80px; text-align: center; font-size: 12px; font-weight: bold; font-style: italic;"><a href="http://forums.dreamincode.net/showtopic14671.htm">Celebrate 5 Years of Dream.In.Code:<br>Win a Laser Engraved IPod Nano & Caffeine!</a></div>
</div>
</div>

Copy & Paste

<style type="text/css">

<!--
#fixme {
     /* IE 5.0/Win and other lesser browsers will use this */
     position: absolute; right: 0px; bottom: 0px;

}
body > div#fixme {
     /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */
     position: fixed;
}
--></style>

<div id="fixme" style="height: 120px; width: 100%;">
   
   <div style="z-index: 5; background: url(http://home.dreamincode.net/images/catfish/catfish_tile2.gif); width: 100%; height: 120px;">
      <div style="float: left; position: relative; left: 0; top: 0;"><a href="http://forums.dreamincode.net/showtopic14671.htm"><img src="http://home.dreamincode.net/images/catfish/catfish2.gif" height="120" border="0"></a></div>
      <div style="float: right; position: relative; text-align: right; top: 75px; font-size: 10px; font-weight: bold;"><a onClick="hiderow('fixme');return true;" style="cursor: pointer;">Close Me</a></div>
      <div style="float: left; position: relative; top: 80px; text-align: center; font-size: 12px; font-weight: bold; font-style: italic;"><a href="http://forums.dreamincode.net/showtopic14671.htm">Celebrate 5 Years of Dream.In.Code:<br>Win a Laser Engraved IPod Nano & Caffeine!</a></div>
   </div>
</div>