CSS Forum

**ZekeLL** · 05-25-2008, 11:44 PM

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">

</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

**sandyk3** · 05-26-2008, 01:50 AM

I copied your code into Dreamweaver and in your message div I added clear: both; and overflow: hidden;. That seemed to line up your message box. I also added float:left; to the name div and everything came into order in FF and IE7 BUt it shouldn't. You don't need absolute positioning with float. This might be a starting ground for you but I'm sure LadynRed will have your answer. I'm going to be watching this post as I want to know what I should be taking out of the name div as well.

**LadynRed** · 05-26-2008, 09:31 AM

Sandy's spot on

You need to remove all that position:absolute, it's NOT necessary and also not a good idea, it can cause a lot of headaches, especially with IE.

Quote:

1) Am I doing the right thing by using APdivs or I should use a table instead?

No, and HEL* NO !! Learn to use the normal document flow and floats, you'll be on the right track.

Quote:

3) Should I use absolute positioning? Or fixed, relative, static?

Get out of your head the idea that you have to position everything, you don't. You can safely put position:relative on your main container/wrapper so that if you DO need to position some other element, it's positioned relative to the container and not the <body>.

Quote:

4) I want to center the main APdiv, but I can't... I do text-align=center but it still stays on the right.

Another reason NOT to use absolute positioning. Give the main div a width, then add margin: 0 auto, that will center it, even in IE6. For IE5.5 and below, you need text-align: center in your properties for <body> to center.

Quote:

5) When I tried to use regular div tags instead of APdivs, I assign left and top values

Left and top will ONLY work with absolute or relative positioning. To put things where you want them w/o positioning, you use margins and padding.

Quote:

And I think I understand the concept of relative, but it is relative to where an element is supposed to be.

Nope, you have not yet grasped the concept of positioning. It's one of the tougher things to grasp. The positioned div will be positioned relative to it's nearest positioned ancestor. Try this tutorial: http://www.barelyfitz.com/screencast...s/positioning/
and read this: http://www.brainjar.com/css/positioning/

I'll post the fixed code in a bit.

**LadynRed** · 05-26-2008, 09:49 AM

Here's the revised code - it works, but I would not recommend building a form this way at all, it's very bad for accessibility:

Quote:

<!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">

</style>
</head>

<body>
<div id="wrapper">
<form>
<div id="name">
<input type="text" id="Name" size="24" />
</div>
<div id="email">
<input type="text" id="Email" size="24" />
</div>
<div id="phone">
<input type="text" id="Phone" size="24" />
</div>
<div id="message">
<textarea cols="40" rows="6" id="Message"></textarea>
</div>

</form>

<img class="button" src="http://www.theoutsourcingcompany.com/tryarg/images/button.jpg" width="285" height="110" />
</div> 
</body>
</html>

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

Hey, thank you so much! The code works great. What I don't get is how do you set the position of the divs. For example, if I wanted to move the divs that contain the text fields, how do I do that? I understand that you said I have to stop thinking I need to position everything, but how do I control the position of the text fields? What if I want to move them left or down about 20 pixels?

I am going to take a look at the tutorial you just recommended.

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

And since you said that you wouldn't build a form like this since it's bad for accessibility, how would you do it?

Thanks again!

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

Quote:

What I don't get is how do you set the position of the divs

You don't NEED positioning! The normal document flow is used - which means elements flow from the top to the bottom and for left and right control you use MARGINS AND PADDING. You can clearly see where I've added margins to your elements.

Quote:

And since you said that you wouldn't build a form like this since it's bad for accessibility, how would you do it?

1 - I would never use a full sized image as you have and I would NOT use an image for TEXT when ACTUAL TEXT can (and should) be used. People with disabilities, especially those using screen readers, cannot 'read' the text that's embedded in your image.

2 - I wouldn't be putting each form element into a div, it's not necessary.

You might want to read thru this tutorial:
http://www.sitepoint.com/article/fancy-form-design-css