Adding New Image and Text to an Existing Page Created with Tables

Question

Working in DW 5.5
I'm trying to add a new image/link and small amount of text to an existing web page that was created with tables and centered.  I am using AP Divs. One for the image and one for the text.  Everything functions fine, but I can't get the new items to anchor and re-center with the rest of the page.  I am not able to overide the "Absolute Positioning".  I've tried different solutions from various tutorials but I can't seem to make them work with tables.
The added items are a Facebook button and text.
Go to:  http://www.sugarhollowfarms.net/index.html  to see the problem.
Please help. I'm not that experienced.

Answer 1

Make a back-up of the page first before you implement the changes below!
Take the below bit of code from <div id="FBlogo">...... to.......... </div> <!-- end FBlogo -->
and insert it directly after the opening div tag FWTableContainer and before your opening table tag (see position below):
<div id="FWTableContainer209091602">
<div id="FBlogo"><a href="#"><img src="images/fb.png" alt="fb" width="62" height="62" onClick="MM_openBrWindow('http://www.facebook.com/SugarHollowFarms','facebook','toolbar=yes,location=yes,status=yes, menubar=yes,scrollbars=yes,resizable=yes,width=1000,height=800')"></a>
<p class="bodytext"><strong>Join us<br>
on Facebook</strong></p></div><!-- end FBlogo -->
<table border="0" cellpadding="0" cellspacing="0" width="800">
Then add - position: relative; - to the FWTableContainer css (as shown below):
#FWTableContainer209091602 {
    /* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */
    position:relative;
    margin:auto;
    width:800px;
    height:600px;
    text-align:left;
    top: 20px;
    background-image: url(images/homepage_new3.jpg);
    border: medium solid #336600;
    position: relative;
Amend the css for FBlogo to as below:
#FBlogo {
    position:absolute;
    left:700px;
    top:380px;
    width:91px;
    z-index:1;
    text-align: center;
Amend the css for bodytext as below:
.bodytext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 13px;
    margin: 0;
    padding: 0;