SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mighty Form CSS layout help needed

    Hi Guys and Gals,

    Ive got this beast of a form to try and tame, I have attached a screenshot of a basic contact form that I have already designed and this is how I want the "poorly form" to look ( example label names are all neatly lined up alongside flush input boxes not like the "poorly form" pink fields shown.)

    p.s (Ive only left the pink BG in so you can see exactly all the fields in the form, there natural colour will be white)

    p.p.s (I havnt decided which fields should be mandatory, so Ive left this code in for the time being)

    Any help greatly appreciated , cheers Ralph for steering me back on track :-)

    Ben

    HTML code is as follows :

    <div class="orderFormContainer">
    <form class="orderEPC" action="order.php" method="post">
    <fieldset>
    <legend><span>Your Contact Details/span></legend>

    <div>
    <label for="bName"><strong class="mandatory">&diams;</strong>&nbsp;Business Name</label>
    <input class="input-wide" name="bName" id="bName" type="text"/>
    </div>

    <div>
    <label for="title"><strong class="mandatory">&diams;</strong>&nbsp;Title</label>
    <select>
    <option value="mr">Mr</option>
    <option value="mrs">Mrs</option>
    <option value="miss">Miss</option>
    <option value="ms">Ms</option>
    <option value="dr">Dr</option>
    </select>
    </div>

    <div>
    <label for="fName"><strong class="mandatory">&diams;</strong>&nbsp;First Name</label>
    <input class="input-wide" name="fName" id="fName" type="text"/>
    </div>

    <div>
    <label for="lName"><strong class="mandatory">&diams;</strong>&nbsp;Last Name</label>
    <input class="input-wide" name="lName" id="lName" type="text"/>
    </div>

    <div>
    <label for="tDay"><strong class="mandatory">&diams;</strong>&nbsp;Telephone &#40;Day&#41;</label>
    <input class="input-wide" name="tDay" id="tDay" type="text"/>
    </div>

    <div>
    <label for="tEve"><strong class="mandatory">&diams;</strong>&nbsp;Telephone &#40;Eve&#41;</label>
    <input class="input-wide" name="tEve" id="tEve" type="text"/>
    </div>

    <div>
    <label for="eMail"><strong class="mandatory">&diams;</strong>&nbsp;E-mail Address</label>
    <input class="input-wide" name="eMail" id="eMail" type="text"/>
    </div>

    <legend><span>Details for property requiring report/span></legend>

    <div>
    <label for="aNumRdTwn"><strong class="mandatory">&diams;</strong>&nbsp;Address(Number,Road &amp; Town)</label>
    <input class="input-wide" name="aNumRdTwn" id="ANumRdTwn" type="text"/>
    </div>

    <div>
    <label for="cAndC"><strong class="mandatory">&diams;</strong>&nbsp;City &amp; County</label>
    <input class="input-wide" name="cAndC" id="cAndC" type="text"/>
    </div>

    <div>
    <label for="pAccess"><strong class="mandatory">&diams;</strong>&nbsp;Property Access</label>
    <select>
    <option value="hKey">Have keys call contact</option>
    <option value="pEmpty">Have keys property empty</option>
    <option value="wNotify">Will notify you when we have the keys</option>
    <option value="oAgent">Other agent has keys call contact</option>
    </select>
    </div>

    <div>
    <label for="contact"><strong class="mandatory">&diams;</strong>&nbsp;Contact is</label>
    <select>
    <option value="vendor">Vendor</option>
    <option value="landlord">Landlord</option>
    <option value="tenant">Tenant</option>
    <option value="agent">Agent</option>
    <option value="porter">Porter</option>
    <option value="other">Other &#40;Give details in "Other Information" below&#41;</option>
    </select>
    </div>

    <div>
    <label for="cName"><strong class="mandatory">&diams;</strong>&nbsp;Contact Name</label>
    <input class="input-wide" name="cName" id="cName" type="text"/>
    </div>


    <div>
    <label for="cTDay"><strong class="mandatory">&diams;</strong>&nbsp;Telephone &#40;Day&#41;</label>
    <input class="input-wide" name="cTDay" id="cTDay" type="text"/>
    </div>

    <div>
    <label for="cTEve"><strong class="mandatory">&diams;</strong>&nbsp;Telephone &#40;Eve&#41;</label>
    <input class="input-wide" name="cTEve" id="cTEve" type="text"/>
    </div>

    <div>
    <label for="bedrooms"><strong class="mandatory">&diams;</strong>&nbsp;Number of bedrooms</label>
    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="7Plus">7 or More</option>
    </select>
    </div>

    <div>
    <label for="floorplan">Tick if a floorplan is required</label>
    <input type=checkbox name=”floor”></input>
    </div>

    <div>
    <label for="output">EPC Total Price</label>
    <input class="output" name="output" id="output"/>
    </div>

    <div>
    <label for="otherInfo">Other Information</label>
    <textarea class="input-wide input-textarea " id="otherInfo" name="otherInfo" rows="5" cols="30"></textarea>
    </div>

    <div>
    <label for="spam">Anti-Spam Question&#58; Is fire hot or cold ?</label>
    <input class="spam" name="spam" id="spam"/>
    </div>

    <div>
    <label for="terms"><strong class="mandatory">&diams;</strong>&nbsp;Select Terms and Conditions</label>
    <select>
    <option value="no">No</option>
    <option value="yes">Yes</option>
    </select>
    </div>

    CSS code written so far:

    .orderFormContainer legend{
    color:#000;
    font-size:1.2em;
    margin:1em 0;
    }

    /*Styles the actual input field*/
    .orderFormContainer .input-wide{
    width:250px;
    height:24px;
    font-size:1em;
    background-colorink;
    padding:0.2em 0.5em 0.2em 0.75em;
    }

    /*Styles the space between the input boxes*/
    .orderFormContainer div{
    margin:0 0 0.5em;
    padding: 0.25em 0;
    }

    /*styles the innards of the input fields*/
    .orderFormContainer select,.orderFormContainer .spam, .orderFormContainer .output{
    font-size:1em;
    padding:0.1em;
    background-colorink;
    }
    /*styles the "other information" input box*/
    .orderFormContainer .input-textarea{
    height:100px;
    width:250px;
    padding:0.4em 0.5em;
    font-size:1em;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    i can't see your screen shots yet - however I found some coding mistakes
    Code:
    <label for="title"><strong class="mandatory">&diams;</strong>&nbsp;Title</label>
    <select>
    <option value="mr">Mr</option>
    <option value="mrs">Mrs</option>
    <option value="miss">Miss</option>
    <option value="ms">Ms</option>
    <option value="dr">Dr</option>
    </select>
    should be
    HTML Code:
    <label for="title"><strong class="mandatory">&diams;</strong>&nbsp;Title</label>
    <select name="title" id="title">
    <option value="mr">Mr</option>
    <option value="mrs">Mrs</option>
    <option value="miss">Miss</option>
    <option value="ms">Ms</option>
    <option value="dr">Dr</option>
    </select>
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,

    Cheers for the quick reply,

    Ive just looked back at that code I submitted, and Im missing the "name" and "id" attributes on all the "SELECT" code segments, does this mean Im to replicate what you said on each one but with their own unique name and ID ?

    Cheers

    Ben

  4. #4
    SitePoint Enthusiast PenguinsRock's Avatar
    Join Date
    Apr 2010
    Location
    Scotland, UK
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ben,

    Try adding the following to your css and that will sort out your alignment issues.:

    Code CSS:
    label{
    display:inline-block;
    width:250px;
    }

    Hope this helps!

    C

    P.S. And yes, it is good practice to add unique name and id attributes to <select> tags.


Bookmarks

Posting Permissions

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