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> Code (markup): 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!
Hi ZekeLL, I believe I've already answered most of these questions in another one of your threads: forums.digitalpoint.com/showthread.php?t=857061
I'm guessing you want the form to be centered on the page right? I fixed up some of your code and made a few improvements too. Also, like steelfrog said in his reply to one of your threads, you don't need to put input fields in divs. It's somewhat redundant. <!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 { width:800px; margin:0 auto; position:relative; text-align:center; } #quoteform { background:url(http://www.theoutsourcingcompany.com/tryarg/images/form.jpg) top left no-repeat; width:650px; height:608px; margin:0 auto; position:relative; } #quoteform #Name2 { margin-top:80px; } .fontfields { margin:10px 0 0 200px; width:250px; font-size: 24px; } --> </style> </head> <body> <div id="maincontent"> <div id="quoteform"> <form> <input name="Name" type="text" class="fontfields" id="Name2" /> <input name="Name" type="text" class="fontfields" id="Email2" /> <input name="Name" type="text" class="fontfields" id="Phone2" /> </form> </div> </div> </body> </html> Code (markup):
Positioning should be one of the last things you learn imo...My guess is your problem doesn't actually require positioning, and where this is not the case try to avoid it.