facebox "close" button position

[traq]

1) Script Title:
Facebox image & content viewer 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem:
I'm linking some pages via facebox that have a lot of content. I don't expect them to be read often (mostly legal stuff and other dry info), so I'm not too worried about having to scroll through them in a narrow window...

HOWEVER, I was hoping someone could help me move the "CLOSE" button from the bottom of the viewer window to the top -so people don't have to scroll all the way down to close it if they open it accidentally. could it be done through css, without messing with the script itself? I'm trying to figure out css, but it's an uphill battle. Thanks, everyone!

page is here (http://sandbox.arrowheadsps.org/myweb17/home.htm) ("More about USPS" link)

[ddadmin]

Simply locate inside the .js file the following portion:


<td class="b"/> \
<td class="body"> \
<div class="content"> \
</div> \
<div class="footer"> \
<a href="#" class="close"> \
<img src="'+this.close_image+'" title="close" class="close_image" /> \
</a> \
</div> \

The part in red pertains to the footer area, including the Close button. You can move that upwards, such as:


<td class="b"/> \
<td class="body"> \
<div class="footer"> \
<a href="#" class="close"> \
<img src="'+this.close_image+'" title="close" class="close_image" /> \
</a> \
</div> \
<div class="content"> \
</div> \

[traq]

very cool. I thought it might be that simple, but I tried it last night and it started causing script errors, so I kinda freaked out and stopped messing with it. I guess I cut-n-pasted wrong, because it works fine now. thanks!

[nashatwork]

Apart from repositioning your close image or down you can also define it's absolute position and even change the imge and have a close button similar to digg. here is what I tried by simply using style instead:

<div id="facebox" style="display:none;"> \
<div class="popup"> \
<table> \
<tbody> \
<tr> \
<td class="tl"/><td class="b"/><td class="tr"/> \
</tr> \
<tr> \
<td class="b"/> \
<td class="body"> \
<div class="content"> \
</div> \
<div class="footer" style="display:block;height:36px;position:absolute;right:20px;text-decoration:none;text-indent:-2000em;top:8px;width:36px;"> \
<a href="#" class="close"> \
<img src="images_facebox/closelabel.gif" title="close" class="close_image" /> \
</a> \
</div> \
</td> \
<td class="b"/> \
</tr> \
<tr> \
<td class="bl"/><td class="b"/><td class="br"/> \
</tr> \
</tbody> \
</table> \
</div> \
</div>'

Hope this helps...

[traq]

um... actually, this problem was solved over a year and a half ago, but thanks.
It was before I knew how to put "resolved" on my threads. if any mods or admins are reading, this thread can be closed.