CSS Codes
CSS Layouts

<html>
<head>

<style type="text/css">

.stickynote{
position:absolute;
visibility:hidden;
width: 300px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
box-shadow: 3px 3px 8px #818181;
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="stickynote.js">

/***********************************************
* Sticky Note Script (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var mysticky=new stickynote({
content:{divid:'stickynote1', source:'inline'},
showfrequency:'always',
hidebox:5
})

var mysticky2=new stickynote({
content:{divid:'stickynote2', source:'stickydata.txt'},
pos:['right', 'bottom'],
showfrequency:'always' //<--no comma following last setting!
})

</script></head>

<body>

<div id="stickynote1" class="stickynote">
<img src="spaceship.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>

</div>

</body>
</html>