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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help aligning checkboxes

    Hiya all.
    I'm relatively new to HTML and CSS. I am trying to create a form and have all the checkboxs aligned in a verticle row in the center of the page, but at the moment they are not and they are wrapping back to the very left of the page. I was wondering if anyone could help with this problem as its driving me mad!
    Thanks very much for your help,
    Stephen.

    Code:
    <div class="row" id="hobbies">
                        <span class="label">
                                <label for="hobbies">Your hobbies/intrests:</label>
                            </span>
                            <span class="formw">
                                Animals<input type="checkbox" name="animals" value="yes" /><br/>
                               Arts and Crafts<input type="checkbox" name="aac" value="yes" /><br/>
                               Collecting<input type="checkbox" name="collecting" value="yes" /><br/>
                               Culture<input type="checkbox" name="culture" value="yes" /><br/>
                               DIY<input type="checkbox" name="diy" value="yes" /><br/>
                               Electronics and computing<input type="checkbox" name="eac" value="yes" /><br/>
                               Food and Wine<input type="checkbox" name="faw" value="yes" /><br/>
                               Gardening<input type="checkbox" name="gardening" value="yes" /><br/>
                               Health and personal development<input type="checkbox" name="hapd" value="yes" /><br/>
                               History<input type="checkbox" name="history" value="yes" /><br/>
                               Language and literature<input type="checkbox" name="lal" value="yes" /><br/>
                               Music<input type="checkbox" name="none" value="yes" /><br/>
                               None<input type="checkbox" name="none" value="yes" /><br/>
                               Sport<input type="checkbox" name="sport" value="yes" /><br/>
                               
                                <label for="hOther">Other  </label>
    							<input type="text" size="20" maxlength="20" name="otherHob" id="oHob" />
                                <br />
                                <br />
                            </span>
                    </div>
    Code:
    div.row span.formw {float: center;
    				 text-align: left;}

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    There is no float: center;. And text-align: left does exactly what it says: aligning text left. Form controls are inline elements, by the way, and treated like text for that matter.

    Also I don’t see any form element (which you need to use form controls) and you don’t use labels correctly.

    Code:
    <form id="hobbies" action="" method="get">
    	<fieldset>
    		<legend>Your hobbies/intrests:</legend>
    		<div>
    			<label for="animals">Animals</label><input id="animals" type="checkbox" name="animals" value="yes" /><br/>
    			<label for="aac">Arts and Crafts</label><input type="checkbox" name="aac" id="aac" value="yes" /><br/>
    			<label for="collecting">Collecting</label><input type="checkbox" name="collecting" id="collecting" value="yes" /><br/>
    			<label for="culture">Culture</label><input type="checkbox" name="culture" id="culture" value="yes" /><br/>
    			<label for="diy">DIY</label><input type="checkbox" name="diy" id="diy" value="yes" /><br/>
    		</div>
    	</fieldset>
    	<fieldset>
    		<legend>Other</label>
    		<input type="text" size="20" maxlength="20" name="otherHob" id="oHob" />
    	</fieldset>
    </form>
    This is how a correct form looks like. Labels must be associated with a form control, either by wrapping them around those or by having the value of the for attribute match the value of the form control’s ID. You can then style it with CSS according to your needs (i. e. hide fieldset borders, margins, and paddings, align elements, etc.

    For the alignment of the checkboxes you can either apply a left padding or margin to the surrounding div or you apply a width to that div and assign margin: auto;
    Last edited by VIPStephan; 04-02-2009 at 02:37 PM.

  • Users who have thanked VIPStephan for this post:

    sted999 (04-02-2009)

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for those tips VIPStephan. I got the examples for labeling off another website. I can see that your approach is much simpler.

    Thanks again


  •  

    Posting Permissions

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