My input form (SACCC Form has the center section (Event Date/Time). I would like to put the Month, Day and Year inline instead of stacked as it is now.
I tried various techniques, but nothing is doing what I want. I need to figure this out.
Any suggestions would help.
P.S. Not sure how to validate a PHP file so not sure how “clean” it is.
F
You don’t really have enough room for that in the current layout.
Still, the basic way to do it would be to remove this:
label {
display: block;
}
and, assuming you want them all together in one lone row, also this:
fieldset li {
padding-bottom: 0.5em;
[COLOR="Red"] float: left;[/COLOR]
}
Tried this but it did not work.
I don’t want all of the fieldsets to do this, just the middle one.
F
Put a special class on it then.
<fieldset class="middle">
.middle label {
display: block;
}
and, assuming you want them all together in one lone row, also this:
fieldset.middle li {
padding-bottom: 0.5em;
[COLOR="Red"] float: left;[/COLOR]
}
OK, there will be a better word than middle, but you get the idea.
To align form controls and labels its best to use inline-block rather than floating as you can control each line more easily plus they vertically align correctly also.
Here’s a basic example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
width:350px;
margin:auto;
}
.formtest label {
display:inline-block;
vertical-align:middle;
width:90px;
text-align:right;
margin:10px 0;
}
.formtest input {
width:200px;
margin:10px 0;
vertical-align:middle;
}
</style>
</head>
<body>
<form class="formtest" id="form1" method="post" action="">
<fieldset>
<legend>Address Details</legend>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />
<br />
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" />
<br />
<label for="address1">Address 1:</label>
<input type="text" name="address1" id="address1" />
<br />
<label for="address2">Address 2:</label>
<input type="text" name="address2" id="address2" />
<br />
<label for="address3">Address 3:</label>
<input type="text" name="address3" id="address3" />
<br />
<label for="address4">Address 4:</label>
<input type="text" name="address4" id="address4" />
<br />
<label for="city">City:</label>
<input type="text" name="City" id="city" />
<br />
<label for="state">State:</label>
<input type="text" name="state" id="state" />
<br />
<label class="zip" for="zip">Zip:</label>
<input type="text" name="zip" id="zip" />
<br />
<label for="tel">Telephone:</label>
<input type="text" name="tel" id="tel" />
<br />
</fieldset>
</form>
</body>
</html>