Floating Banner With Close Button

One day… when I surfing on some local site like detik.com, 21cineplex.com, etc.. I always see floating banner stay on bottom page whenever I scroll down my browser. I try to explore that site and hope that I can learn how to make it. But wew some script on all site always hidden.
Hmm.. Ok, I have the other plan. I Googling for floating banner and finally I found it. I’ll share the script for you.
(The original code was taken from http://www.dreamincode.net/code/snippet370.htm)

^?Download download.txt

<!-- 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:<br>Win a Laser Engraved IPod Nano & Caffeine!</a></div>
   </div>
</div>

Yeah thats script is working..^^ But ups.. why close button is not working? First I think that’s script not support multi platform browse.. but when I try to open my site with Mozilla or IE.. It’s same. Close Button not working. Ok don’t worry, I had modified that script specially for close button. I change close me link into:

^?Download download.txt

1	<a onclick="javascript:document.getElementById('fixme').style.display='none';return true;" style="cursor: pointer;">Close Me</a>

Yeah, It’s working then.. hehe.
Let’s try and modify it by your self.. See ya

Fansi Says:
August 7th, 2009 at 10:27 am
This IS what I have been desperately looking for! Thank you! I’m going to try this now. Anyway, I found a simple CSS code that will effects a picture/banner to be ‘fixed’ anywhere on my page, and it’s working. The only weakness is it won’t appear above a flash animation placed on the page.
Fansi Says:
August 7th, 2009 at 10:50 am
Hi again.

I tried your codes and it’s working, but it’s still being covered by flash animations on my page ^_^ Go try yourself. Is there any way to place this banner without having to be covered by flash animations?
Einchi Says:
August 7th, 2009 at 11:31 am
You ‘r welcome Fansi. In this floating banner I didn’t use flash banner animation. Did you mean, you want to change banner with flash animation? I think you need to change code under

and modified with your CSS. I’ll try to change with embed flash later..
Fansi Says:
August 7th, 2009 at 11:41 am
What I meant is the banner’s position is placed behind the flash animation. Check http://cahayaabaditeknik.com (it’s just a test site) to see what I mean
I know it’s a matter of z-index thingie, but I still haven’t figured it out yet. Any helps would be appreciated ^_^
Einchi Says:
August 7th, 2009 at 11:55 am
I think you must put your code in the bottom. Just view my source page. I think, It’s only about your CSS.. Nice site Fansi^^. Are you develop it by your self?
Fansi Says:
August 7th, 2009 at 12:35 pm
I put it in the bottom. If you scroll the page you see my banner is always on the bottom of the page. But my flash animation is kind of blocking the banner to display fully. Maybe there’s something wrong with my flash T_T. Oh thank you ^_^ well I used a wp theme and 99% modified it. ^_^
Einchi Says:
August 7th, 2009 at 1:09 pm
I’m not sure you put it in bottom. Are you using wordpress? In my wordpress I put it on footer of my theme. Maybe you have wrong place. I have Flash on my site to.. My stat for count my visitor using Flash. Did you try to open your site using Mozilla? Your banner shown on top.
Fansi Says:
August 7th, 2009 at 2:30 pm
Yes I noticed you have a stat flash banner and there’s nothing bad happens. That’s why I thought there’s something wrong with my flash T_T I put the code in the footer and the result is the banner doesn’t start showing from the very left of the page. I guess the header is a right place for my case. I checked the site in Firefox 3 and Chrome, the banner is in the bottom. I’m so confused… T_T
samad Says:
December 31st, 2009 at 6:08 pm
how can i fix it on the center of my page when my index page loads i want to place it on the middle, like above my texts,
please

Einchi