Подскажите плз как правильно сделать форму с помощью css.
После 'Date:' все выглядит криво...
Если кто знает как это правильно сделать, подскажите плз.
<html>
<head>
<title>form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet"></head><body>
<form action="blabla.com" method="post">
<div id="user-login-form">
<div class="form-item">
<label>Your Name: </label>
<input maxlength="60" name="name" size="15" value="" class="form-text" type="text"> *
</div>
<div class="form-item">
<label>Test here: </label>
<input type="checkbox" name="faaa" value="bb"> *
</div>
<div class="form-item">
<label>Your Surname: </label>
<input maxlength="60" name="name" size="15" value="" class="form-text" type="text">hello
</div>
<div class="form-item">
<label>E-mail address: </label>
<select name="" class="form-text">
<option value="aa">text 1 goes here</option>
<option value="bb">text 2 goes here</option>
</select>
* </div>
<div class="form-item">
<label>Your text: </label>
<input maxlength="60" name="name" size="15" value="" class="form-text" type="text">
</div>
<div class="form-item">
<label>Your 2: </label>
<input maxlength="60" name="name" size="15" value="" class="form-text" type="text">
</div>
<div class="form-item">
<label>Date:</label>
Text:
<select name="" class="form-text2">
<option value="aa">1982</option>
<option value="bb">2007</option>
</select>
Year:
<select name="" class="form-text2">
<option value="aa">1982</option>
<option value="bb">2007</option>
</select>
</div>
<div class="form-item">
<label>Your 4: </label>
<input maxlength="60" name="name" size="15" value="" class="form-text" type="text">
</div>
<div class="form-item">
<input name="op" value="Send" class="form-submit" type="submit">
</div>
</div>
</form>
</body></html>
===============
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background: #ffffff;
height:100%;
padding: 0px;
margin: 0px;
}
.form-item{
padding-top: 5px;
padding-left: 100px;
}
label{
width: 200px;
color: #000000;
font-weight: bold;
float: left;
text-align:right;
padding-top:3px;
}
#user-login-form input {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #5C88E1;
border-right-color: #5C88E1;
border-bottom-color: #5C88E1;
border-left-color: #5C88E1;
background-color: #ffffff;
}
#user-login-form .form-submit
{
margin-top: 5px;
margin-left:100px;
font-weight: bold;
color: #000000;
padding-bottom: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #828282;
border-right-color: #828282;
border-bottom-color: #828282;
border-left-color: #828282;
}
#user-login-form .form-text {
width:300px;
}
#user-login-form .form-text2 {
width:100px;
}
#nn1 {
width: 200px;
color: #000000;
font-weight: bold;
float: left;
text-align:right;
padding-top:3px;
}
#nn2 {
}
span{
color:#FF0000;
padding-bottom:2px;
}