[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Layers shifting when previewing in browser

Posted on 2008-01-28
14
Medium Priority
?
220 Views
Last Modified: 2010-04-25
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?
0
Comment
Question by:TriCountyIT
  • 7
  • 7
14 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20762017
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
 

Author Comment

by:TriCountyIT
ID: 20762089
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20762181
>> 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20762201
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
 

Author Comment

by:TriCountyIT
ID: 20763706
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
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 20763922
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
 

Author Closing Comment

by:TriCountyIT
ID: 31425720
Thanks a lot for your help
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20764036
>> 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
 

Author Comment

by:TriCountyIT
ID: 20764053
Sounds good I appreciate it
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20764098
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
 

Author Comment

by:TriCountyIT
ID: 20764210
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
 

Author Comment

by:TriCountyIT
ID: 20764231
How do I get my curser on the left or right side of the layers you created?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20764550
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
 

Author Comment

by:TriCountyIT
ID: 20764583
Ok I will dive into the reading.   Thanks a lot for your help
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question