Hi guys, I am so frustrated. I hope you can help me. I've been working on this the whole weekend and couldn't figure it out yet. I spent over 8 hours doing research online and I still couldn't figure it out, so I really hope you can help me. OK, here's the deal: I wanted to create a contact form, but not a regular one (I know how to create one of those already.) I want to have one of those really cute forms with an image on as a background, but I am having problems. Here's 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>Untitled Document</title> <style type="text/css"> <!-- #apDiv1 { left:290px; top:19px; width:650px; z-index:1; } #name { position:absolute; left:296px; top:90px; width:267px; height:40px; z-index:1; } #email { position:absolute; left:296px; top:135px; width:267px; height:40px; z-index:2; } #phone { position:absolute; left:296px; top:180px; width:267px; height:40px; z-index:3; } #message { position:absolute; left:40px; top:272px; width:581px; z-index:4; text-align: center; } #button { position:absolute; left:166px; top:486px; width:317px; height:108px; z-index:5; text-align: center; } .fieldfontsize { font-size: 24px; } --> </style> </head> <body> <form> <div id="name"> <input name="Name" type="text" class="fieldfontsize" id="Name" size="24" /> </div> <div id="email"> <input name="Email" type="text" class="fieldfontsize" id="Email" size="24" /> </div> <div id="phone"> <input name="Phone" type="text" class="fieldfontsize" id="Phone" size="24" /> </div> <div id="message"> <textarea name="Message" cols="50" rows="6" class="fieldfontsize" id="Message"></textarea> </div> <div id="button"><img src="http://www.theoutsourcingcompany.com/tryarg/images/button.jpg" width="285" height="110" /></div> <div id="apDiv1"><img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" /></div> </form> </body> </html> Now, my questions are: 1) Am I doing the right thing by using APdivs or I should use a table instead? 2) The field for the message looks OK in Dreamweaver and it's out of the box in Firefox. Check it out: http://www.theoutsourcingcompany.com/tryarg/images/problem.jpg 3) Should I use absolute positioning? Or fixed, relative, static? I would love to put the text fields relative to the APdiv that contains the whole thing. How do I do this? When I use static positioning no matter what left and top values I assign to it, it just won't move. Same thing for fixed. And I think I understand the concept of relative, but it is relative to where an element is supposed to be. Where are they supposed to be??? 4) I want to center the main APdiv, but I can't... I do text-align=center but it still stays on the right. 5) When I tried to use regular div tags instead of APdivs, I assign left and top values, I see everything layed out great in Dreamweaver, and then when I click F12 to see it in Firefox, all the layers do whatever they want and they go all over the page. See http://www.theoutsourcingcompany.com/tryarg/images/problem2.jpg 6) If someone has sample HTML code that works and shows how to create a form overlapping an image, I would be thankful to you forever. I told my boss that I was going to have this ready by tomorrow (Monday) and I would really appreciate some help. If someone is online and you want to IM, that'd be awesome. Thank you so much for your help, you are really taking some headache away from me. Zeke
1) What is an APdiv? Absolute Positioned? 2) Set a width for the textarea, rows and cols vary in size depending on the browser 3) Not really. I don't use positioning at all (research floating) 4) Add "margin:0 auto" 5) When the width of the page changes left and top don't move (if you center the page, everything will still be only 3px to the left or whatever value you assigned)
You shouldn't be using divs at all in your case. Input boxes are block-level elements. You should be applying the IDs on the Inputs rather than wrap them in a div. That should resolve itself once you've properly applied the rules mentioned above. Absolute positioning is awkward. Relative basically means that any margins/padding you apply will be applied to it's relative position. In example, you place a header with a paragraph under it. In relative position, the paragraph will appear under the header. If you add a margin-top to the paragraph, it will move down relatively to it's current position. As rochow mentioned, simply add the margin: 0 auto rule to center a block-level element in it's parent. Don't rely on Dreamweaver; it's rendering engine is sub-par at best, even worse than IE's when it comes to more complex CSS. Most of my layouts break in Dreamweaver's preview but work flawlessly in Firefox/IE. Code for the browsers, not for the coding tool. CSS: /* Assuming you are not using a tiled background. If so, simply edit the top left no-repeat section. */ form#contact { background: url("images/formBackground.jpg") top left no-repeat; } Code (markup): XHTML: <form id="contact">Content</form> Code (markup):
Give me a link to a live example of your contact form (along with the images you want to use) and I'll show you. In the meantime, this might be worth studying from: http://www.dan-schulz.com/temp/css-form-example/