www.webdeveloper.com
Results 1 to 5 of 5

Thread: label and form input

  1. #1
    Join Date
    Mar 2006
    Location
    Canada
    Posts
    1,197

    label and form input

    Hi Below is the code for my form and the css to format it, the problem I'm having is that the input fields are pushed down one row

    any ideas




    form code
    Code:
    <label for="Street_address">
    <input id="Street_address" name="Street_address" type="text" /></label> <br />
    
    <label for="post_office_box">
    Other Address Info:
    <input id="post_office_box" name="post_office_box" type="text" />
    </label><br />
    
    <label for="city">
    City:
    <input id="city" name="city" type="text" />
    </label><br />
    
    <label for="province">
    Province:
    <input id="province" name="province" type="text" />
    </label><br />
    
    <label for="postal">
    Postal Code:
    <input id="postal" name="postal" type="text" />
    </label><br />
    CSS
    Code:
    #register fieldset{
      	display: block;
    	margin: 0 auto 1em auto;
    	padding: 0em 1em 1em 1em;
        border:3px groove #EEFAEA;
        width: 300px;
        }
        
    #register input{
    	width: 125px;
    	float:right;
    	
    	}
    	
    #register select{
    	width: 125px;
    	float:right;
    	
    	}
    #register input.submit{
    
    	float:left;
    	
    	}
    webpage link http://www.tomorrownextweek.com/fami...gisterPage.php
    Kevin

  2. #2
    Join Date
    Apr 2004
    Location
    Shreveport, La
    Posts
    65
    Not sure what all you have going on, but I would take the float out of the input, and select tags, and add an align attribute to your register element.

    Code:
    // start css
    
    #register fieldset{
      	display: block;
    	margin: 0 auto 1em auto;
    	padding: 0em 1em 1em 1em;
        border:3px groove #EEFAEA;
        width: 300px;
        }
        
    #register input{
    	width: 125px;
    	}
    	
    #register select{
    	width: 125px;
    	
    	}
    #register input.submit{
    	float:left;
    	
    	}
    // End CSS
    // Start HTML
    
    <div id="register" align="right">
    <label for="Street_address">Street Address:<input id="Street_address" name="Street_address" type="text" /></label> <br />
    
    <label for="post_office_box">
    Other Address Info:
    <input id="post_office_box" name="post_office_box" type="text" />
    </label><br />
    
    <label for="city">
    City:
    <input id="city" name="city" type="text" />
    </label><br />
    
    <label for="province">
    Province:
    <input id="province" name="province" type="text" />
    </label><br />
    
    <label for="postal">
    Postal Code:
    <input id="postal" name="postal" type="text" />
    </label><br />
    </div>

  3. #3
    Join Date
    Mar 2006
    Location
    Canada
    Posts
    1,197
    thank you for the replay, I'm trying to get the label to line up with the input box. currently the input boxes are pushed down one row lower then the label

    ie

    label name
    TEXT BOX

    I'm not shure what you mean by align
    Kevin

  4. #4
    Join Date
    Apr 2004
    Location
    Shreveport, La
    Posts
    65
    where you have: <div id="center">
    try turning it to: <div id="center" align="right"> in your html.

    And delete 'float:right' from your 'input' and 'select' selectors.

    see if that's more of what you are going for.

  5. #5
    Join Date
    Mar 2006
    Location
    Canada
    Posts
    1,197
    Thank you for the help I desided to use a table
    Kevin

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles