Problems with CSS positioning

**ZekeLL** · 05-26-2008, 11:24 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...ges/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!

**sandyk3** · 05-26-2008, 04:35 PM

Did you see ladynred's reply.... you still have absolute positioning on your div's. Try doing what she said to do in reply to your last post.

**ZekeLL** · 05-26-2008, 08:23 PM

Quote:

Originally Posted by sandyk3

Did you see ladynred's reply.... you still have absolute positioning on your div's. Try doing what she said to do in reply to your last post.

Yeah, I've seen it. But I don't know how to control the position of an element with that code, there are no left or top values at all. Do you know the answer to that?

**LadynRed** · 05-27-2008, 02:53 PM

Quote:

there are no left or top values at all.

That is because YOU DO NOT NEED THEM !!! Get that out of your head, right now, or you will never get your head around this.

Did you try my code ? Did you see ANYTHING that was not where you wanted it ?

**wayfarer07** · 05-28-2008, 05:03 PM

Yet another reason not to use Dreamweaver for display.

I do happen to use Dreamweaver, but only because of its excellent code highlighting, project organization, FTP functions, and keyboard shortcuts.

First of all, the comments about absolute positioning are completely true. You should never use absolute positioning until you TOTALLY understand the difference between absolute and relative positioning, and their relationship with each other. This is very important. Even once you understand this important difference, it is still to be used sparingly, as it interrupts the natural flow of your documents.

Instead of using Dreamweaver for display, I recommend this extension for Firefox: http://www.getfirebug.com/

This will allow you to do live testing in Firefox, which is a standards-compliant browser (Dreamweaver is not).

**beta** · 05-28-2008, 05:33 PM

Dearest Zekell. There is a popular saying in the world of courtship that goes something like "If you love them, let them go".

Take that famous wisdom and apply it to your css positioning and you will not loose any more tears. Control is one thing, but domination is something only the slightly twisted few appreciate. Web browsers do not belong with them! Set the divs free, they will appreciate the space and will make the effort to look beautiful again.