Topic: Some Issues... (Page 1 of 1)

Hey everyone! I'm new to the board and a recent Internet Technologies graduate. I've been asked to optimize a website for search engines for a customer and I recommended to them that they allow me to change the content of their site from an image to text. Since the site was designed using tables I decided to use a DIV element so that I could change the image itself, take the text off of it that is, and then place text over the image with the DIV. It looks great except in resolutions other than 1024 x 768 which I knew would happen since I used absolute positioning but now I'm not 100% sure how to go about fixing it. I've tried a few things but nothing worked, I was hoping someone more experienced and willing to share their knowledge could help me.

Original Site: http://www.empresswatergardens.com/
What I've Done: http://webdesign.brandyblue.com/EWG/

You can see that when you resize your browser with my version that the text stays where I put it, which is what it's supposed to do. If I change to a relative positioning it messes up the table layout. I don't think they want to pay me to redo their site using a CSS only layout. I may be forgetting something I've learned in the past... Oh and to add, I've been reading some of the other posts and it sounds like using absolute positioning is baaaad. I've tried relative positioning though, and it causes the tables to mess up.

Thanks so much! I hope this is in the right section of the boards.

Brandy

(Edited by dappledoxie on 05-23-2006 20:19)

Redoing the whole layout in a CSS only variation might be what is best for search engine optimization.

It appears that the layout is very strait forward and could benefit for a bit of a cleanup, maybe even sharpenning up the images. But that is not here or where you want to go.

If you are going to end up using tables for the layout use the tables, don't try to break out of them with an absolute positioned div.

What I would recommend is to keep the original layout (sizes etc) but set main_r2_c6.jpg (minus the text) as a background image. You can then set appropriate paddings on the TD element to position your text correctly.

<table border="0" cellpadding="0" cellspacing="0" width="583">
  <tr>
    <td style="background: url('images/nav_home_main_r2_c6.jpg'); width: 583; height:417px;padding-top: 50px;padding-left:100px; padding-right: 200px;">
      Your text goes in here.
    </td>
  </tr>
  <tr>
    <td><img name="main_r10_c6" src="images/nav_home/main_r10_c6.jpg" width="583" height="81" border="0" id="main_r10_c6" alt="Empress Water Gardens is located at 2911 Rives Chapel Church Road in Siler City, NC 27344." /></td>
  </tr>
</table>

You will have to modify the padding values, but that should provide a good starting point.

Dan @ Code Town

Thank you so much for your help, I'm going to do that

*Edit* Wanted to add that it works like a charm Thanks again!

(Edited by dappledoxie on 05-24-2006 15:43)