We help IT Professionals succeed at work.

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?
Comment
Watch Question

Jason C. LevineDon't talk to me.
SILVER EXPERT

Commented:
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?

Author

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>
Jason C. LevineDon't talk to me.
SILVER EXPERT

Commented:
>> 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?
Jason C. LevineDon't talk to me.
SILVER EXPERT

Commented:
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.

Author

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?
Don't talk to me.
SILVER EXPERT
Commented:
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

Author

Commented:
Thanks a lot for your help
Jason C. LevineDon't talk to me.
SILVER EXPERT

Commented:
>> 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/

Author

Commented:
Sounds good I appreciate it
Jason C. LevineDon't talk to me.
SILVER EXPERT

Commented:
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

Author

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.

Author

Commented:
How do I get my curser on the left or right side of the layers you created?
Jason C. LevineDon't talk to me.
SILVER EXPERT

Commented:
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.

Author

Commented:
Ok I will dive into the reading.   Thanks a lot for your help

Explore More ContentExplore courses, solutions, and other research materials related to this topic.