Dreamweaver Layout & Table issues

[CWhitlow]

I created a web template in Photoshop CS, I then sliced it up and saved all the individual pics including the buttons and rollovers. I used Dreamweaver layout to reassemble the images so the web template looks normal. However, now I'm stuck on how to add text over the template without losing the images. I've tried to add layers but I found they are absolute and when the screen size changes the text is all over the place.

So I started the site reconstruction over and used plain tables and cells instead of the layout feature. However, when doing this Firefox leaves white borders between the images (menu, header, etc.) I view in IE6 and it looked fine. I'm very confused at this point. The properites has borders and padding set to 0.

Currently, I have the layout version hosted at http://www.regentcrown.com if anyone could please provide some hints that would be great. Thanks.

[KDLA]

You should use your graphics as background images, rather than images. That way, you can place text over them. You can position the images in divs with CSS positioning, or style each table cell with CSS styles.

Reference: http://www.w3.org/TR/REC-CSS2/colors.html#q2

KDLA

[CWhitlow]

Okay so I did what you suggested, however, I'm having trouble setting the divs where I want them, do I just add positioning tags in the code? I'm using Dreamweaver and I'm having trouble moving them around the page.

Thanks for your reponse.

[KDLA]

Yeah. This might help you: http://www.w3schools.com/css/css_positioning.asp

[CWhitlow]

Ok KDLA, I took your advice and read through both sites and have created the page using only div tags and CSS with the images as backgrounds for the body. However, I have run into a brickwall. Two part question at my site: http://www.regentcrown.com in firefox browser everything seems to fit together nicley, even though the leftmargin2 slice shows to be off in Dreamweaver. When viewed through IE6 it shows the same way I see it in Dreamweaver. How do I position my div tag to fit into that space? Also, how can I center the entire page? Thanks again for your help, I look forward to your reply.

[KDLA]

Is there a reason why you segmented it that way? The area under the navigation bar (tan column/white content area) could be one large div. Might be easier.

Usually, you div the largest sections of your page first, then nest divs inside of those that are smaller. Your page can be put together like this:
#wrapper - the entire page -- this is where you indicate it being centered
#banner - area with your lighthouse logo
#navigation - horizontal area under the banner
#content - tan column/white center
then you nest two divs within this:
- floated on the left: text in the tan column
- actual content area
#footer - bottom credits

To center the page:
body{
text-align: center;}

#wrapper{
margin-left: auto;
margin-right: auto;
width: ###px; /* you need to set this; it should be the width of your entire page*/
text-align: left;
}

KDLA

[CWhitlow]

Thanks for the recommendations, I sliced it that way because I read on some tutorial that you should break up the areas that will contain text. But I don't think it was for Div tags and CSS I think it was for tables and frames. Thank you though, I will recode it tomorrow.

[KDLA]

Keep up the good work! It's aggravating now, but you're learning some really good stuff. Just that you're attempting this in CSS rather than tables puts your efforts above many "professional" designers! :)

KDLA

[CWhitlow]

KDLA,

Thanks for your help, I just wanted to keep you updated I have recoded most of the pages on the site, I'm having trouble getting IE to look like firefox, it is frustrating having to work around for it to look the same. If you could check out the site and give me some tips that would be great. Thanks again for all your help.