Problems with CSS positioning

Z

ZekeLL

New Member
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:

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!
 
Niteo

Niteo

New Member
Try This. It works on my end. I don't know if i fixed it how you want, but it looks good to me.

basically i took the width and switched it from the soft percentage to a hard pixel cuz the form is based on a set-sized graphic so the use of percentages is unnecessary.

HTML: 
<!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:0px;
	top:27px;
	width:600px;
	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:344px;
	top:95px;
	z-index:1;
}
#Email {
	position:absolute;
	left:344px;
	top:140px;
	z-index:1;
}
#Phone {
	position:absolute;
	left:344px;
	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>
 
You must log in or register to reply here.
Top