PDA

View Full Version : Form alignment issue



cc4digital
04-27-2011, 10:13 PM
I am new to web design and I have been working on this issue for a while. I tried putting my form in a table, using blocks with absolute, and I just can not get thing to align.
Any suggestion or help would be much appreciated--:thumbsup:

Here is what I currently have:
http://charlescoughlin.com/cssissue/current.jpg

Here is what I want or something close--See alignment of time next to date:
http://charlescoughlin.com/cssissue/wanted.jpg

Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">

body {
background-color:white;
}
#wrapper {
width: 650px;
background-color:#b49a66;
margin: 20px auto;
border:#394891 solid;
border-width:5px;
}
fieldset{
margin:10px;
padding:10px;
border:1px solid #09c0d4;
margin-bottom:15px;
width: 650px;
}
legend{
padding:10px;/*gives a bit of padding between the border and the test*/
color:#EEBA6A;
font-weight:800;
font-size: 1.2em;
}

/*label.blocklabel {display: block; position: relative; margin: 12px 0px;}
label.blocklabel input {position: absolute; left: 300px;}

#smonth {position: absolute; left: 150px;}
#sday {position: absolute; left: 250px;}
*/

</style>

</head>

<body>
<form action="" >

<fieldset>
<legend>Appointment Setup:</legend>

<label class="blocklabel">Start Date:
<select id="smonth" name="smonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">Feburary</option>
</select>

<select id="sday" name="sday">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

</select><input type="text" name="syear" id="year" maxlength="4" size="4" />
</label>

<label class="blocklabel"> Start Time:
<input type="text" name="shour" maxlength="2" size="2" />
<input type="text" name="smin" maxlength="2" size="2" />
<select name="smer">
<option value="AM">AM </option>
<option value="PM">PM </option>
</select>
</label>

<p></p>

<label class="blocklabel">End Date:
<select name="emonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">Feburary</option>
</select>
<select name="eday">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</select><input type="text" name="eyear" id="year" maxlength="4" size="4" />
</label>
<label class="blocklabel"> End Time:</span>
<input text="text" name="ehour" maxlength="2" size="2" />
<input text="text" name="emin" maxlength="2" size="2" />
<select name="emer">
<option value="AM">AM </option>
<option value="PM">PM </option>
</select>
</label>
<p> </p>
<label class="blocklabel">Time Interval
<input type="text" name="interval" size="2" maxlength="2" />
</label>
</body>
</html>

teedoff
04-27-2011, 11:04 PM
Have a look at this simple table with your inputs.


<form action="#" >
<h3>Appointment Setup:</h3>
<table>
<tr>
<td>Start Date:</td>
<td><select id="smonth" name="smonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">Feburary</option>
</select></td>
<td><select id="sday" name="sday">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
<td><input type="text" name="syear" id="year" maxlength="4" size="4" /></td>
<td>Start Time:</td>
<td><input type="text" name="shour" maxlength="2" size="2" /></td>
<td><input type="text" name="smin" maxlength="2" size="2" /></td>
<td><select name="smer">
<option value="AM">AM </option>
<option value="PM">PM </option>
</select></td>
</tr>
<tr>
<td>End Date:</td>
<td><select name="emonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">Feburary</option>
</select></td>
<td><select name="eday">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
<td><input type="text" name="eyear" id="year" maxlength="4" size="4" /></td>
<td>End Time:</td>
<td><input text="text" name="ehour" maxlength="2" size="2" /></td>
<td><input text="text" name="emin" maxlength="2" size="2" /></td>
<td><select name="emer">
<option value="AM">AM </option>
<option value="PM">PM </option>
</select></td>
</tr>
<tr>
<td colspan="8" align="center">Time Interval:
<input type="text" name="interval" size="2" maxlength="2" /></td>
</tr>
</table>
</form>

cc4digital
04-27-2011, 11:46 PM
I tried putting this in a table and had many problems. That is what I was trying to do and "yes" it is correct. Thanks.

I do have one other question: I was told it is not a good idea to put this in a table because it is not data, but instead a form. I was told to use float. But that seems to become a huge nightmare because of the drop down boxes.

What do you think? If you were programming would you use the table technique or do this a different way?

teedoff
04-28-2011, 12:59 AM
I dont see anything wrong with putting forms in tables. Whats not good is using tables for whole page layouts. Form fields can be considered culumnar data anyway.