ZekeLL
26 May 2008, 10:23 AM
Hi guys, when I try to create layers (AP divs) with Dreamweaver, everything looks great, but when I preview that in a browser, the layers change their positions.
I am very frustrated since I've been trying to figure out why for almost 2 days, and I can't. Please help me!
Check out this screenshot: http://www.theoutsourcingcompany.com/tryarg/images/proof1.jpg
This is the code:
<!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=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
#maincontent {
left:186px;
top:27px;
width:80%;
height:608px;
z-index:1;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center center;
position: relative;
text-align: center;
}
#Name {
position:absolute;
left:372px;
top:95px;
z-index:1;
}
#Email {
position:absolute;
left:372px;
top:140px;
z-index:1;
}
#Phone {
position:absolute;
left:372px;
top:185px;
z-index:1;
}
.fontfields {
font-size: 24px;
}
-->
</style>
</head>
<body>
<div id="maincontent">
<form>
<div id="Name">
<input name="Name" type="text" class="fontfields" id="Name2" />
</div>
<div id="Email">
<input name="Name" type="text" class="fontfields" id="Email2" />
</div>
<div id="Phone">
<input name="Name" type="text" class="fontfields" id="Phone2" />
</div>
<img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" />
</form>
</div>
</body>
</html>
If you know what the problem is, please help me. I am really confused with absolute, relative, fixed, and static positioning. I understand the concepts but I can't position the layers wherever I want.
Thank you!
I am very frustrated since I've been trying to figure out why for almost 2 days, and I can't. Please help me!
Check out this screenshot: http://www.theoutsourcingcompany.com/tryarg/images/proof1.jpg
This is the code:
<!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=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
#maincontent {
left:186px;
top:27px;
width:80%;
height:608px;
z-index:1;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center center;
position: relative;
text-align: center;
}
#Name {
position:absolute;
left:372px;
top:95px;
z-index:1;
}
#Email {
position:absolute;
left:372px;
top:140px;
z-index:1;
}
#Phone {
position:absolute;
left:372px;
top:185px;
z-index:1;
}
.fontfields {
font-size: 24px;
}
-->
</style>
</head>
<body>
<div id="maincontent">
<form>
<div id="Name">
<input name="Name" type="text" class="fontfields" id="Name2" />
</div>
<div id="Email">
<input name="Name" type="text" class="fontfields" id="Email2" />
</div>
<div id="Phone">
<input name="Name" type="text" class="fontfields" id="Phone2" />
</div>
<img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" />
</form>
</div>
</body>
</html>
If you know what the problem is, please help me. I am really confused with absolute, relative, fixed, and static positioning. I understand the concepts but I can't position the layers wherever I want.
Thank you!