I recently started my own business and am on a budget so decided to design the web page myselt with Photoshop and Dreamweaver 8. It went well except for the fact that my page won't center itself on screens, and b/c I created it on a display that is 1920x1080 I don't have good results on smaller screens. I used layers, and can't convert to tables b/c of the overlapping layers I have. I treid recreating the whole page again and not using overlapping layers, but once I converted to tables and viewed in browser I found that my buttons were moved all around. I'm really having a difficult time with this and have spend the last two days trying various fixes with no luck...Any help would be apprecitated - the site is up and here is the link www.digitalrootsstudio.com
Thanks in advance
Using absolutely positioned layers to build your site is possibly the worst decision you could make.
What you have done is given your layers a positive left position which positions them way over to the right of the screen.
Its NOT a good idea to use absolutely positioned layers if you want to center your design BUT if you do then start with a 'container' <div> which is positioned relatively (see css code below) and as wide as your layout. This will then contain ALL of your absolutely positioned layers. The absolutely positioned layers take their left/top co-ordinates from the top/left of the 'container' <div>
margin: 0 auto;
Using the above method will centre a design which is reliant on absolutely positioned layers.
Thanks so much for you response. So I would put the above text right after the body tag on top of html? Do I need to put the above code again at the end of the html, or only on top?
Layers seemed the easiest way to lay it out, and then once it didn't work I decided to try doing layers, then convert to tables, but I kept running into issues with alignment of my buttons on the left hand side. B/c I new to this I know I'm probably missing a bunch of tools that would make my life easier, but unfortunately I had limited time and money to put this together.
Thanks again for your help!
So I would put the above text right after the body tag on top of html? Do I need to put the above code again at the end of the html, or only on top?
Then all your absolutely positioned layers go here
</div><! close the container-->
below is a simple example of absolute layers inside a relatively positioned container <div>. Note how the absolutely positioned layers move when you re-size the browser viewport window.
I stress using absolutely positioned layers is NOT a good solution to be using but it may be the only solution if you know little about website construction.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
margin: 0 auto; /*this centers the page */
<div id="one">Absolute layer one</div>
<div id="two">Absolute layer two</div>
</div><!-- close container -->
Layers seemed the easiest way to lay it out,
A common newbie mistake. APDivs/Layers seldom work well for primary layouts. Here's why.
This 3-part tutorial discusses the process of taking your Design comp in Pshop or Fireworks to CSS Layout in DW.
Part 1 - Initial Design
Part 2 - Markup preparation
Part 3 - Layout and CSS