Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Form alignment issue

    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--

    Here is what I currently have:


    Here is what I want or something close--See alignment of time next to date:


    Here is my code:
    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>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Have a look at this simple table with your inputs.

    Code:
     <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>
    Teed

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •