Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning of a form

    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

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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:

    Code:
    /* your css */
    .form label {
    color:#999999;
    display:block; /* i prefer to add this */
    margin-bottom:5px; /* adjust this to control spacing between LABEL and INPUT */
    margin-left:0;
    } 
    
    /* 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>  
      
        <p class="email">  
            <label for="email">E-mail</label>
            <input type="text" id="email" name="email">  
        </p>  
    
        <p class="web">  
             <label for="web">Phone</label>
             <input type="text" id="web" name="web">   
        </p>  
      
        <p class="text">  
            <textarea name="text" id="itsalltext_generated_id_text_1"></textarea> 
        </p>  
      
        <p class="submit">  
            <input type="submit" value="Send">  
        </p>  
      
    </form>
    Last edited by met; 08-04-2010 at 11:31 PM.

  • #3
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    also Get FireBug

    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

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thanks thats a great help really appriciate it. I will also get firebug. Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •