Layers shifting when previewing in browser

I am creating a web site.  I am adding layers to manipuate the location better.  When I preview the page in a browser it shifts left a few inches.  Is there a reason for this?
TriCountyITAsked:
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.

Jason C. LevineNo oneCommented:
Hi TriCountyIT,

Yes.  If you are using absolutely positioned layers, the browser preview is going look a little different than Design View, but it shouldn't be a few inches.

Can you show us a test page?
0
TriCountyITAuthor Commented:
Here is my code.....Is there any way to get it so it doesnt do that??



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>GetTemplate.com - Dark Theme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer1 {
      position:absolute;
      width:763px;
      height:250px;
      z-index:1;
      left: 108px;
      top: 357px;
}
.style1 {
      font-size: 14pt;
      color: #4EC2FC;
}
.style2 {font-size: 24pt}
#Layer2 {
      position:absolute;
      width:202px;
      height:132px;
      z-index:1;
      left: 381px;
      top: 371px;
}
#Layer3 {
      position:absolute;
      width:208px;
      height:75px;
      z-index:1;
      left: 248px;
      top: 340px;
}
-->
</style>
</head>
<body><script type='text/javascript'>

//HV Menu- by Ger Versluis (http://www.burmees.nl/)
//Submitted to Dynamic Drive (http://www.dynamicdrive.com)
//Visit http://www.dynamicdrive.com for this script and more

function Go(){return}

</script>
<script type='text/javascript' src='exmplmenu_var.js'></script>
<script type='text/javascript' src='menu_com.js'></script>
<noscript>Your browser does not support script</noscript>

<div id="HEADER">
  <h1 class="style2">Tri-County Hospital </h1>
  <table width="259" border="0">
    <tr>
      <td width="98" height="23">&nbsp;</td>
      <td width="151"><span class="style1">Company Intranet </span></td>
    </tr>
  </table>
  <p>&nbsp; </p>
  <p>
    <label></label>
 
  <div class="Visual"> </div>
</div>
<div id="CONTENT">
  <div id='MenuPos' style='position:relative'></div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="Layer3">ffsdfsdfsdf</div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</body>
</html>
0
Jason C. LevineNo oneCommented:
>> Here is my code.....Is there any way to get it so it doesnt do that??

Yes, but you need to make some decisions.  Do you want the site to be centered on the page, or aligned to the left?  Where do you want MenuPos to be relative to other elements?  Where does Layer3 go?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Jason C. LevineNo oneCommented:
Also, your style definition is Layer 1, Layer 2, etc.  But the HTML shows div IDs with content, header, etc.  So when you preview that page, the CSS is not getting picked up properly.
0
TriCountyITAuthor Commented:
See most of what you said there doesnt really make sense to me :) I am just starting to get into web page design and I am sure I am doing things wrong.  What do you mean relative to other elemenst?
0
Jason C. LevineNo oneCommented:
Okay, you need to go back to the basics and start doing some reading on what CSS does.  There are whole books devoted to this, so I cannot just type a few paragraphs and enlighten you.    Here's a brief summary, and I will give you some links for more reading

When you create what DW calls a layer, you are setting the div to be a static object that appears X pixels from the top and Y pixels from the side of the screen.  As you found out, this kind of absolute positioning quickly breaks down in the wild.

Instead, you have to use CSS to arrange the divs relative to the position of other divs.  You start be creating one big div that is aligned left, right, or center and then you put all other divs inside that one and use the float and clear properties of CSS to control how they show up.

Here's some more reading.  I also urge you to go an get a good book on CSS and really start learning in depth.

http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html
http://www.elated.com/articles/css-positioning/
http://www.yourhtmlsource.com/stylesheets/csslayout.html
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
TriCountyITAuthor Commented:
Thanks a lot for your help
0
Jason C. LevineNo oneCommented:
>> Thanks a lot for your help

You're welcome.  As you read, post specific questions to the following Zones (pick any two aside from CSS):

Misc Web Dev
HTML
CSS (always use this one :)
Dreamweaver

and there are tons of Experts who can assist.  I could easily rewrite your code to be relatively positioned, but doing so won't get you to understand it and your understanding of the concepts is crucial to going forward.

Once you get a basic handle on positioning, see the power of it by looking at this:

http://www.csszengarden.com/
0
TriCountyITAuthor Commented:
Sounds good I appreciate it
0
Jason C. LevineNo oneCommented:
Here, try this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<title>GetTemplate.com - Dark Theme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#HEADER {
	position:relative;
	width:100%;
	height:250px;
}
.style1 {
      font-size: 14pt;
      color: #4EC2FC;
}
.style2 {font-size: 24pt}
#CONTENT {
	width:202px;
	height:132px;
	clear: both;
	margin: auto;
}
#Layer3 {
	width:208px;
	height:75px;
	margin: auto;
}
#CONTAINER {
	margin: auto;
	width: 75%;
}
-->
</style>
</head>
<body><script type='text/javascript'>
 
//HV Menu- by Ger Versluis (http://www.burmees.nl/)
//Submitted to Dynamic Drive (http://www.dynamicdrive.com)
//Visit http://www.dynamicdrive.com for this script and more
 
function Go(){return}
 
</script>
<script type='text/javascript' src='exmplmenu_var.js'></script>
<script type='text/javascript' src='menu_com.js'></script>
<noscript>Your browser does not support script</noscript>
<div id="CONTAINER">
<div id="HEADER">
  <h1 class="style2">Tri-County Hospital </h1>
  <table width="259" border="0">
    <tr>
      <td width="98" height="23">&nbsp;</td>
      <td width="151"><span class="style1">Company Intranet </span></td>
    </tr>
  </table>
  <p>&nbsp; </p>
  <p>
    <label></label>
  <div class="Visual"> </div>
</div>
<div id="CONTENT">
  <div id='MenuPos' style='position:relative; width: 100%;'>Menu goes here</div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="Layer3">ffsdfsdfsdf</div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>
</body>
</html>

Open in new window

0
TriCountyITAuthor Commented:
That looks really good but I dont know how to make those layers like you did that arent floating.  I got this site as a templater.
0
TriCountyITAuthor Commented:
How do I get my curser on the left or right side of the layers you created?
0
Jason C. LevineNo oneCommented:
This is where you need an understanding of the CSS code.  The first div (container) is set to be 75% of the width of the screen and centered.  Everything else is part of it and the CSS controls what goes where.
0
TriCountyITAuthor Commented:
Ok I will dive into the reading.   Thanks a lot for your help
0
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.