CSS Help with Forms

[simpson733]

hey guys,

i have a website currently running like this: HI Communication: Introduces Clear 4G WiMax Pre-Order Form

but i want to make it look like http://www.hicommunication.com/preorder/images/final.png

is there anyone that can help me with the form section.

Thanks.

 

[killay]

Well first of

-Your font in your picture is the same for everything, so why don't you set the font in your body{}.

body{
   text-align:center;
   font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
}

-Next, your titles
Enter Your Information & Pick a Plan
First of you forgot to add the "pick a plan" and second of all you setup <h5> instead of <h4>

<h4>Enter Your Information:</h4>
Name: <input name="name" type="text">
Phone Number: <input name="number" type="text">
Address: <input name="address" type="text">
City: <input name="city" type="text">
State: <select name="state"><option value="hawaii">Hawaii</option></select>
Email Address <input name="email" type="text"><br>
<h4>Pick a Plan</h4>

- Now for the "Pick a Plan" radiobuttons... I guess the easiest way to fix it is to use a table with one or two rows and 4 collumns. Don't forget to set the alignment to center for the cells.

- Oh and the input-fields I think simply adding <br /> after the input fields you want to break. (I think, not so sure about this)


Hope this helped.

EDIT: I know it ain't everything, but I dont have much time on my hands ftm

 

[adamo]

First I would structurize the form properly
maybe somthings in the line of

<fieldset>
  <legend>Enter Your Information:</legend>
  <p>
      <label for='name'>Name:</label>
      <input type="text" id="name" name="name" />
      <label for="phone">Phone Number:</label>
  </p>
  <p> second row of form ...</p>
</fieldset>
<fieldset> 
  <legend>Pick a plan</legend>
 <ul>
  <li>
    <img src="" />
    <input type='radio' ... />
  </li>
  <li>
    <img src="" />
    <input type='radio' ... />
  </li>
 </ul>
</fieldset>

For the css

fieldset{margin: 30px 10px}
fieldset p{margin-bottom:5px;}
fieldset li{float:left; width:25%; height:100px;} /* you can also put a width in px if you know it sometimes the browsers will display it different when put in % */
fieldset li img{display:block;}
fieldset li {text-align:center;} /* to center the images and radio buttons */

Of course this is just a basic idea now you need to adjust it to look like on the image. You can also use the h4(5,6) instead of the legend tag.