benjamin.morgan
New Member
I am trying to style this form and I ran into a problem when the label ran into 2 lines . I am not using this form for real but I need to know how to do this.
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
<style type="text/css">
.outform {
list-style:none;
padding:10px;
padding-top:0px;
padding-bottom:0px;
width:80%;
margin:0;
background-color:black;
}
.outform li{
height:40px;
line-height:40px;
background-color:green;
padding:5px;
clear:both;
list-style:none;
border-bottom:2px solid black;
}
.outform input {
float:left;
height:100%;
}
.outform label {
width:140px;
float:left;
height:30px;
}
</style>
</head>
<body>
<form method="post" action="quote.php">
<ul class="outform">
<li>
<label> Name </label>
<input type="text" value="" />
</li>
<li>
<label>Last Name</label>
<input type="text" value="" />
</li>
<li>
<label>Email * </label>
<input type="text" value="" />
</li>
<li>
<label>Multi Line Label is here</label>
<textarea rows="4" cols="30"></textarea>
</li>
<li>
<label>yet another Multi Line Label is here</label>
<textarea rows="4" cols="30"></textarea>
</li>
</ul>
</form>
</body>
</html>
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
<style type="text/css">
.outform {
list-style:none;
padding:10px;
padding-top:0px;
padding-bottom:0px;
width:80%;
margin:0;
background-color:black;
}
.outform li{
height:40px;
line-height:40px;
background-color:green;
padding:5px;
clear:both;
list-style:none;
border-bottom:2px solid black;
}
.outform input {
float:left;
height:100%;
}
.outform label {
width:140px;
float:left;
height:30px;
}
</style>
</head>
<body>
<form method="post" action="quote.php">
<ul class="outform">
<li>
<label> Name </label>
<input type="text" value="" />
</li>
<li>
<label>Last Name</label>
<input type="text" value="" />
</li>
<li>
<label>Email * </label>
<input type="text" value="" />
</li>
<li>
<label>Multi Line Label is here</label>
<textarea rows="4" cols="30"></textarea>
</li>
<li>
<label>yet another Multi Line Label is here</label>
<textarea rows="4" cols="30"></textarea>
</li>
</ul>
</form>
</body>
</html>