Adding a sticky note style box to content

Now I want to be able to add a floating block similar to the related content block I added earlier. But I also want to be able to add as blocks as I want and control where at in the entry it appears.

So instead I used css and some images to create one the author could create when and where needed. (The author must be able to use the full html input format or the code will not come through)

Using Gimp I created a plain white image (220 width 400 height - Height is not as important as We're just going to take a slice of it). Place a new layer into that that image with a width of 200 and a height of 300.

Now with that layer selected choose - Filters >> Light and Shadow >> Drop Shadow

For this image I want a shadow down and right - I stick with the default for this and it creates a nice shadow.

I then save as GIMP xcf file so I can work with it later. I then flatten the image so I can select areas to create 3 images from. A slice from the header body and footer which I saved as

• sticky_header.jpg (width:220 height:21)
• sticky_body.jpg(width:220 height:24 - could be as small as a few pixels as we're repeating on this axis)
• sticy_footer.jpg (width:220 height:36)

Now I define one master div in my css file (I'm currently using / modfying the garland them -The image files are all uploaded to an /themes/garland/images while the css file is /themes/garland/style.css)

.stickynote {
float:left;
width:220px;
padding:0;
background:transparent;
}

Followed by the three divs that will make up the sticky note

.stickynote .stickyhead{
width:220px;
height:21px;
  background: transparent url(images/sticky_header.jpg) no-repeat;
}
.stickynote .stickybody{
width:220px;
background: transparent url(images/sticky_body.jpg) repeat-y;
padding:5px;
}
.stickynote .stickyfoot{
width:220px;
height:36px;
  background: transparent url(images/sticky_footer.jpg) no-repeat;
}

Now when writing an entry I add in FCKeditor Source View

<div class="stickynote">
<div class="stickyhead">&nbsp;</div>
<div class="stickybody">The Body</div>
<div class="stickyfoot">&nbsp;</div>
</div>

The &nbsp; I added because certain browsers (IE) seem to not show a div even if the height and width are set if there is no content in it. 

Problems: Need to give the author full html filter privileges , The author needs to be comfortable editing source to create, Using early or first thing in an entry places it in the teaser which can look strange or not as intended, It is better to uncheck the publishing otiopns - published to view the entry before publishing.

FCKeditor should in non source view display the block as it is defined in my CSS but so far it is not. This could be a caching issue and will test and update this if this changes. (It eventually did)