View Full Version : Positioning of a form

08-04-2010, 11:10 PM
Hi I'm currently attempting to code my first website (I am a graphic designer by trade but want to learn web).

The website can be found at http://www.spmcreative.co.uk/patrickedward

The form I have added in, doesn't seem to distribute evenly. Id like the name to be higher up towards the quick enquiry heading and then the gaps to be even between the input areas.

Any Ideas on how to achieve this?

Kind Regards
Simon Moore

08-04-2010, 11:29 PM
you *can* use <p> tags for form layouts, generally I prefer <div> or an unordered list - google it, there's a lot of good material for formatting forms.

using your code. Remove any trace of "<br>" then use this CSS:

/* your css */
.form label {
display:block; /* i prefer to add this */
margin-bottom:5px; /* adjust this to control spacing between LABEL and INPUT */

/* to remove the spacing between the title graphic and the form */
#main2 p:first { margin-bottom:0px; }
/* but semantically it would be more correct to use a
<h2 class="enquiry">Quick Enquiry</h2> for instance and this CSS */

h2.enquiry {
text-indent:-999em /* hide text */
background:url(/img/Quick.png) no-repeat;
width:203px; height:29px; /* match these to image dimensions */
margin-bottom:5px; /* adjust this */
/* end optional */

<!-- your new HTML -->
<form class="form">
<p class="name">
<label for="name">Name</label>
<input type="text" id="name" name="name">

<p class="email">
<label for="email">E-mail</label>
<input type="text" id="email" name="email">

<p class="web">
<label for="web">Phone</label>
<input type="text" id="web" name="web">

<p class="text">
<textarea name="text" id="itsalltext_generated_id_text_1"></textarea>

<p class="submit">
<input type="submit" value="Send">


08-04-2010, 11:30 PM
also Get FireBug (http://getfirebug.com/)

it'll speed up your learning to no end - helps you to see why there's spaces/margins/gaps etc, get exact measurements, adjust them on the fly bla bla..great tool

08-05-2010, 12:03 AM
Thanks thats a great help really appriciate it. I will also get firebug. Thanks again.