PDA

View Full Version : Problems with CSS positioning


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!
Wickham
26 May 2008, 01:37 PM
You have a containing div #maincontent with an image and a form layered over it. The image is 650px wide x 608px high but the #maincontent is 80% wide x 608px high, so the width will vary depending on what screen resolution the viewer is using and the image will change its position, sometimes the image 650px will be more than 80% so it will start at the left side of #maincontent but sometimes in a large screen resolution the 80% will be more than 650px so the image will move away from the left edge of #maincontent and centralise because of the text-align: center; which will alter the position of the form over it.

I suggest that you make the #maincontent 650px wide to match the image inside and make it position: relative and delete the left: 186px. This will make #maincontent the same width as the image and will centralise both in any screen resolution.

The form elements then need to be repositioned.

#maincontent { position: relative;
/*left:186px;*/
top:27px;
width:650px;/*was 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:312px;/*was 372px;*/
top:80px;/*was 95px;*/
z-index:1;
}
#Email {
position:absolute;
left:312px;/*was 372px;*/
top:125px;/*was 140px;*/
z-index:1;
}
#Phone {
position:absolute;
left:312px;/*was 372px;*/
top:170px;/*was 185px;*/
z-index:1;
}
.fontfields {
font-size: 24px;
}