...
PDA

Form alignment issue

cc4digital
04-27-2011, 09: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, 10: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, 10: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-27-2011, 11:59 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum