vendredi 27 mars 2015

Lining up fields in a form

I'm having trouble lining up all the fields in my form neatly. Any suggestions?


I want the outside edges of the three input fields to line up with eachother, and the space between the fields vertically to be the same as the space between the name and email fields... Thanks for the help! :)





form {
background-color: #3d549a;
}
input {
border: none;
width: 400px;
padding: 15px;
border-radius: 5px
}
textarea {
height: 10em;
resize: vertical;
font-family: avenir;
font-size: 17px;
color: #fff;
font-weight: 100;
border: none;
width: 860px;
padding: 15px;
border-radius: 5px
}
.buttonblue {
padding-left: 90px;
background-color: #31b9e9;
font-family: avenir;
font-size: 16px;
width: 300px;
height: 75px;
color: #fff;
padding: 0;
border: none;
border-radius: 5px;
box-shadow: 0 5px 1px #21a1c6
}



<table width="100%" style="background-color: #3d549a" height="820px">

<tr height="250">
<td valign="bottom" align="center" width="100%" colspan="4">
<span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
<hr color="#273a72" width="75" align="centre">
<span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span>
</td>
</tr>

<tr>
<td <td width="100%" align="center">
<form class="form" action="/my-handling-form-page" method="post">
<p>
<input class="required" type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72;" />
<input class="required" type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72;" />

</p>

<p>
</br>
<textarea class="required" id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>

</p>
<p>
</br>
</br>
<button class="buttonblue" type="submit">SEND MESSAGE</button>
</br>
</br>
</br>
</br>
</p>
</form>
</td>
</tr>
</table>



Aucun commentaire:

Enregistrer un commentaire