SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS for input

  1. #1
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for input

    Someone please help me to align those radio buttons to the right and also some vertical space for the text.

    u: protectyourdesigndev
    p: z%#N>4ar6qR7

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    1. they are already aligned to the right???

    2. Use labels. Every form should have them.

    One thing you can do is wrap labels around inputs. Some people don't like to do this but it is perfectly legal:

    Code:
    <div class="form_row"><div class="radio">
    <label for="typeind"><span>Individual:</span> 3.00 + VAT per upload or  150 + VAT for unlimited uploads <input type="radio" name="typeid" id="typeind" value="3" checked="checked" /></label>
    
    <label for="typebus"><span>Business:</span> 3.00 + VAT per upload or  1,500 for unlimited uploads <input type="radio" name="typeid" id="typebus" value="4" /></label>
    </div>
    </div>
    You can't repeat id's like you did, so I changed them. The label's for attribute links it with the input explicitly (the input being inside also links it implicitly but personally I always link with for attributes anyway) by matching the unique id of the input.
    The span is one option to force a newline after individual. Whether you use a span or a br tag depends on whether you believe the newline is necessary in the content or not. Looking at it, my opinion is it means the same thing even if Individual: some text is like so in the content, so I chose a span. But no biggie either way.

    If you don't like the idea of wrapping labels:
    Code:
    <div class="form_row"><div class="radio">
    <label for="typeind"><span>Individual:</span> 3.00 + VAT per upload or  150 + VAT for unlimited uploads</label> <input type="radio" name="typeid" id="typeind" value="3" checked="checked" />
    
    <label for="typebus"><span>Business:</span> 3.00 + VAT per upload or  1,500 for unlimited uploads</label> <input type="radio" name="typeid" id="typebus" value="4" />
    </div>
    </div>
    I think this way might be a bit harder to style. Posisbly floating the labels left and the inputs right will get what you want, but you said you wanted the radio's to the right and they look to be to the right to me...

    If they don't seem to the right, please state which browser... I only looked in Firefox on Ubuntu Linux. I can take a screen shot if you'd like.

    Anyway, once you have your label text in a label, you can do stuff like give the top one (or both) a bottom margin to give more vertical space between questions. You could also use a br tag, but using two of them means it belongs in the CSS.

    You can also wrap some other block around each label-input pair:
    <div>
    <label for="">Text</label>
    <input type="radio" name="" id="" />
    </div>

    Some people use p's for this... whatever. Div is a little less meaningless which is attractive. When I do the label-wrapping-the-input thing, it's partially to avoid wrapping blocks around each label-input pair. I set the labels themselves as blocks, usually wrap all the label text in a span and float that left, then let the inputs just do their thing. The float then has clear: left and maybe overflow: hidden for float enclosement if necessary.

  3. #3
    SitePoint Addict sorin21us's Avatar
    Join Date
    Mar 2009
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Stomme poes


Bookmarks

Posting Permissions

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