3 Replies - 2883 Views - Last Post: 28 April 2010 - 11:46 PM

#1 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1949
  • View blog
  • Posts: 20,376
  • Joined: 17-March 01

Floating Ad Banner at Bottom of Screen

Posted 11 April 2006 - 11:53 AM

Description: Just paste this in your page. 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.howtocrea...edPosition.html
<!-- Original Code: http://www.howtocreate.co.uk/fixedPosition.html -->
<!-- Snippet With Example: http://code.dreamincode.net/snippet370.htm -->

<!-- CSS with support for IE -->
<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]-->

<!-- HTML CODE FOR ACTUAL BANNER -->
<div id="fixme" style="height: 120px; width: 100%;">
   <!-- EDIT BANNER CONTENTS BELOW -->
   <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:
Win a Laser Engraved IPod Nano & Caffeine!</a></div>
   </div>
</div>



Is This A Good Question/Topic? 0
  • +

Replies To: Floating Ad Banner at Bottom of Screen

#2 element94  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 01-June 09

Re: Floating Ad Banner at Bottom of Screen

Posted 31 May 2009 - 11:33 PM

Seems like the close link doesn't work. What am i missing ?
Was This Post Helpful? 0
  • +
  • -

#3 murtuza89  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-August 09

Re: Floating Ad Banner at Bottom of Screen

Posted 10 August 2009 - 06:25 AM

This code has worked for me. Only thing you forgot to add is the z-index=100; code. Rest all is perfectly working for my site. Also I dont think this code supports other versions than the IE7. Your code inserts the code in Comment quotes. Please check it.
Was This Post Helpful? 0
  • +
  • -

#4 melissabonet  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 28-April 10

Re: Floating Ad Banner at Bottom of Screen

Posted 28 April 2010 - 11:46 PM

any chance you could post the missing code to close the panel ?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1