PDA

View Full Version : Layers - Positioning


Violenteer
02-15-2007, 09:42 PM
Hello Everyone,

OK. I realise thise quesiton will have asked in the past. But I could not find it.

Fairly new to dreamweaver. Photoshop and Illustrator background, but loving webdesign, the coding is a real bitch though, bit like a mother in law I once had. CSS is doing me no favours either (like a girlfriend I once had), but I can get through that.

Layers: I insert a layer into the dreamweaver file. I have my table and table cells setup. All is nice. My images are slice. Nice and small. Everything looks great. I have positioned my layers where I want them. I preview. Wammo! All my layers have moved!

I have to go into dreamweaver and adjust them so that actually look out of alignment in there, so that they can be aligned in IE.

Dumb question? If you dont ask you dont know.

davidj
02-16-2007, 05:51 AM
are you controlling your layers using CSS?

Violenteer
02-16-2007, 06:00 AM
No. I was hoping not to. But eviently there in lies my mistake...

I have several layers over each other. Does that mean I will have to have a seperate style for each layer? Some have different text and such.

davidj
02-16-2007, 06:13 AM
you need to control each layer using a CSS

example..


<!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>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:10px;
top:15px;
width:742px;
height:88px;
z-index:1;
background-color: #336699;
}
#Layer2 {
position:absolute;
left:9px;
top:108px;
width:156px;
height:461px;
z-index:2;
background-color: #0066CC;
}
#Layer3 {
position:absolute;
left:174px;
top:110px;
width:576px;
height:48px;
z-index:3;
background-color: #339999;
}
#Layer4 {
position:absolute;
left:173px;
top:163px;
width:578px;
height:406px;
z-index:4;
background-color: #00CC66;
}
-->
</style>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
<div id="Layer4"></div>
</body>
</html>



i would seperate the CSS from the HTML