May
Div Tags change position! I can’t control them
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…es/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…s/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
Relevant Links