Jump to content

Forms positioning trouble? Totally puzzled


thrombox
 Share

Recommended Posts

I've posted this in the CSS section despite it being HTML as I have not yet transferred all the Styles to the Style Sheet as I'm a little stuck at the moment.This is a contact form I created off a site. I can't seem to position it on my webpage it just jumps to the bottom. This is what I've been doing =-Trying to position the <form> part using top: 100px and left:20px in the styles part.-Trying to create a id="FormMain" and then editing the #FormMain{} in CSS (Please note I have been doing this with other HTML and have no difficulty exportign styles to a CSS, even when I create an ID it just doesn't seem to do anything to it)-Trying to add styles in the <td colspan>Can anyone please tell me what I'm doing wrong? You can load the following HTML to see exactly what I'm seeing. Any help much appreciated.Here is the HTML:<form enctype="multipart/form-data" action="http://free.allforms.mailjol.net/u/f9435624396.php" method="POST" style="margin: 0px"><table border="0" cellpadding="6" cellspacing="0" style="text-align: left; border: 4px solid #7090B0; border-collapse: collapse" width="1%" bgcolor="#F0F0F0"><tr><td colspan="2" bgcolor="#7090B0" style="font-size: 14px; font-family: Verdana; color: #FFFFFF; font-weight: bold; padding: 4px">Contact Us</td></tr><tr><td colspan="2" style="padding: 8px; font-size:11px; font-family: Verdana; color: #000000">Please fill the form below to contact us. Max total image size 3mb (please optimise images for web). We look forward to hearing from you.</td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">1.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Name: *<br><input type="Text" name="Name:" size="71" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">2.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">E-mail: *<br><input type="Text" name="E-mail:" size="71" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">3.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Subject: *<br><input type="Text" name="Subject:" size="71" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">4.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Message: *<br><textarea rows="4" cols="71" style="font-size: 11px; font-family: Verdana" name="Message:"></textarea></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">5.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Upload 1:<br><input type="file" name="Upload 1:" size="59" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">6.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Upload 2:<br><input type="file" name="Upload 2:" size="59" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td colspan="2" align="center" style="padding: 8px"><input type="submit" name="submit" value="Submit" style="font-size: 11px; font-family: Verdana">  <input type="reset" name="reset" value="Reset" style="font-size: 11px; font-family: Verdana"></td></tr></table></form>

Edited by thrombox
Link to comment
Share on other sites

Sounds like you're trying to use absolute/relative positioning to place your form. I would advise against doing this (unless you have a very good reason) because this type of placement of elements can get to be very messy, very quickly, and is rarely the same in all browsers. Stick to margins/padding/float for element placement. They give much more consistent results.

Link to comment
Share on other sites

Shadow I think your right.Despite having done several tutorials on positioning I still find them confusing.Originally I thought they were a good idea as they are a prerequisite for z-indexing? Am I correct?Another good thing about absolutes is, if I change a certain element from the top left it move all the other absolutes in line with it? Is this correct?It seems to be doing so?Thats what could possibly be pushing my contact form to the bottom. Is there anyway of giving an order to bypass any absolutes?***Update: apologies I know whats going wrong a simple type error, somehow a closing end of the sidemenu bar got cut off.Apologies. I think it's fixed.

Edited by thrombox
Link to comment
Share on other sites

Shadow I think your right.Despite having done several tutorials on positioning I still find them confusing.Originally I thought they were a good idea as they are a prerequisite for z-indexing? Am I correct?
I'm not sure about the z-indexing thing. Personally, I've never been able to get z-index to work for me. Any time I try using it, I fail.Anyhow, there are few situations that demand positioning. Most layouts can be achieved using margins, paddings, and floats. Oh, and modifying the display too.So, if you wanna try getting your form placed using these properties, we'd be glad to help you work out any bugs or fine tune things. :)
Another good thing about absolutes is, if I change a certain element from the top left it move all the other absolutes in line with it? Is this correct?It seems to be doing so?
Depends on what you mean by "all the other absolutes in line with it". Any child elements will be moved. Sibling elements will not. Edited by ShadowMage
Link to comment
Share on other sites

like form design, except for tables parttableless form

#myform{margin:0;}#myform input, #myform textarea { font-size: 11px; font-family: Verdana;}#outerdiv{text-align: left; border: 4px solid #7090B0; background-color:#F0F0F0; width:38.5%; overflow:auto; float:left; font-family: Verdana;}.rowone{background-color:#7090B0;font-size: 14px;color: #FFFFFF; font-weight: bold; padding: 4px;}.rowtwo{padding: 6px; font-size:11px;color: #000000;}.rowthree{font-size: 30px; color: #C0C0C0; font-weight: bold; padding-left: 20px; clear:both; overflow:auto; margin-bottom:12px;}.rowfour{padding: 8px; text-align:center;clear:both;}.cellone{float:left; padding-right:10px;}.celltwo{font-size: 11px;font-weight: bold; padding-right: 20px; color: #000000; float:left;}.celltwo span{ display:block;}

<form enctype="multipart/form-data" action="http://free.allforms.mailjol.net/u/f9435624396.php" method="POST" id="myform"><div id="outerdiv"><div class="rowone">Contact Us</div><div class="rowtwo">Please fill the form below to contact us. Max total image size 3mb (please optimise images for web). We look forward to hearing from you.</div><div class="rowthree">	<div class="cellone">1.</div>	<div class="celltwo"><span>Name: *</span><input type="Text" name="Name:" size="71">	</div></div><div class="rowthree">	<div class="cellone">2.</div>	<div class="celltwo"><span>E-mail: *</span><input type="Text" name="E-mail:" size="71">	</div></div><div class="rowthree">	<div class="cellone">3.</div>	<div class="celltwo"><span>Subject: *</span><input type="Text" name="Subject:" size="71">	</div></div><div class="rowthree">	<div class="cellone">4.</div>	<div class="celltwo"><span>Message: *</span><textarea rows="4" cols="71" name="Message:"></textarea>	</div></div><div class="rowthree">	<div class="cellone">5.</div>	<div class="celltwo"><span>Upload 1:</span><input type="file" name="Upload 1:" size="59">	</div></div><div class="rowthree">	<div class="cellone">6.</div>	<div class="celltwo"><span>Upload 2:</span><input type="file" name="Upload 2:" size="59">	</div></div><div class="rowfour"><input type="submit" name="submit" value="Submit">  <input type="reset" name="reset" value="Reset"></div></div></form>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...