Dreamweaver layer positioning regardless of screen resolution.

I really need assistance because I am pulling my hair out! I am creating a website in Dreamweaver 8. I have used layers to insert text as well as images on the page. The problem is that I created the site with my computer set at 1024 resolution. If I get on a computer with a different resolution everything on the page gets shifted.

If anyone can please give me any assistance I would love it!!!

Rich
moose21Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Peter HartCommented:
yep - that's the problem - you have disigned the page to a particular resolution.  I had the same problem
in the end I stopped using layers on dreamweaver and now use CSS to position the text

or if you want look atthe code generated by the layer (go to code design view) at the top ofthepage is a
style (probably called #layer 1
change       position:absolute;
to       position:relative;

what sort of layout are you after?
0
moose21Author Commented:
For the time being I just wanted to build a basic index page to learn how to get this resolution thing down. I want to be able to have images and text that will stay centered regardless of the resolution. My problem is that I just graduated from college from the only thing they decided not to teach us was CSS and is sounds like thats what I need.
0
Peter HartCommented:
for a quick fix - use tables  (no bigger than 760 pixels wide)
put the text, images  in the table - then adjust the table to have zero border (i.e. invisible)
then centre the table in the page - this will work for all screens.
use columns and table wiinth table for centring
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Peter HartCommented:
try this dreamweaver page has one talbe 700 wide and another table inside
both centred.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
<table width="700" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td><p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="78%" border="0" align="center" cellpadding="2" cellspacing="2">
      <tr>
        <td width="49%">this is text </td>
        <td width="51%">this coulde be a image </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
moose21Author Commented:
I copied that code and put an image in there and some text and ITS PERFECT when I change resolution, just what I have been wanting. I just wish I knew exactly what you did. It is a hard concept to add other images and text and what not?

Thanks man, you gave me hope!
Rich
0
moose21Author Commented:
I used layers cause it was easy for me to place items anywhere on the page. Is is hard to place tables anywhere on the page?
0
Peter HartCommented:
well depends.
there are lots ofways to use dreamweaver. table are a good way to force the layout and is works in all browsers (IE, firefox,safari)
you should be able to manipulate the table to do want you want. its best to suck it and see.
try changin the tables width from 700 pixels to 100 %  (change ther pixel to percent) and change the 700 to 100  - then the table fills the screen what ever resolution - bit like amazon.
0
moose21Author Commented:
Ok sounds good. Lets say I want a menu down the left side, a little menu on the top, and images down the right side, is is hard to position tables???
0
Peter HartCommented:
here a quick set of tables with color
cut and paste into a page and save
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
<table width="90%" height="497" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td height="43" colspan="3"><table width="100%" border="0" cellpadding="2" cellspacing="2" bgcolor="#00CCFF">
      <tr>
        <td height="71"><div align="center">TITLE</div></td>
      </tr>
      <tr>
        <td>home contact info menu </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="12%" valign="top"><table width="90%" border="0" cellpadding="2" cellspacing="2" bordercolor="#0066FF" bgcolor="#999999">
      <tr>
        <td>side menu1 </td>
      </tr>
      <tr>
        <td>side menu</td>
      </tr>
      <tr>
        <td>side menu</td>
      </tr>
      <tr>
        <td>side menu</td>
      </tr>
      <tr>
        <td height="139">&nbsp;</td>
      </tr>
    </table></td>
    <td width="72%" valign="top"><table width="99%" border="0" cellspacing="2" cellpadding="2">
      <tr>
        <td height="202" valign="top">this is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv his is the main body of text.ghv </td>
      </tr>
    </table></td>
    <td width="16%" valign="top"><table width="90%" border="0" cellpadding="2" cellspacing="2" bgcolor="#CCCC99">
      <tr>
        <td><div align="center">image 1 </div></td>
      </tr>
      <tr>
        <td><div align="center">image 2 </div></td>
      </tr>
      <tr>
        <td><div align="center">image 3 </div></td>
      </tr>
      <tr>
        <td height="223">&nbsp;</td>
      </tr>
      <tr>
        <td height="240">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Peter HartCommented:
if you open dreamweaver and goto file - new
select general, select "starter pages" in first column and in second column select a page design /layout you want  - try the "SPA home page"  this may be whatyou want.
0
moose21Author Commented:
Damn your good! So did you just make one big table and then just add other tables inside?
0
Peter HartCommented:
yep - just tables with tables inside - make the positioning of elements within a table easier. - once you play around with different ideas, you'll soon get the hang of it. I found dreamweaver is very good.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.