Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Forms Web

Well, Heres my problem , my radio buttons dont want to align with the text on the side , so theres button on left and text on the right , they wont align and these buttons are strange because of they look anyways ;d

http://codepen.io/anon/pen/xvywB

Hereswhat i did

1 Answer

thomascawthorn
thomascawthorn
22,985 Points
thomascawthorn
thomascawthorn
22,985 Points

I think your label text is outside of your label. I'm not sure how they do it on the video but I would say:

<label for ="over_13" class="light">13 or Older<input type="radio" id="over_13" name="user_age"></label>

 <label for="under_13" class="light"> 13 Younger<input type="radio" id="under_13" name="user_age"></label>

Wrapping the input inside the label keeps everything together - I think your styling is making them look a little spaced out right now.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Uh, i tried this code but it doesnt work :/ Im making a copy from what i learned on forms but im trying to learn how to style them and i find it pretty dificult since they dont got any videos on it : / As yesterday the form camed out so i suppose they dont got how to style it .

Well im putting my own code , im not re-styling it because i need to learn how to do any form i like you and well , theres alot of situations/challenges ,

thomascawthorn
thomascawthorn
22,985 Points

That's cool, this code should work with the right css.

If you want them inline, try creating a class 'inline_radio' and set width: 30% to 0.

.inline_radio {
  width:0;
}
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

It works fine for the text but it doesnt work for the radio button. Its somewhere in the middle floating . The text is inline now but the radio buttons are just not there : P

thomascawthorn
thomascawthorn
22,985 Points

Say whaaaattt. Okay, try removing the 30% on the label also - but just the label for the radio buttons

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

it doesnt seem to work or im doing something wrong here :

http://codepen.io/anon/pen/xvywB

thomascawthorn
thomascawthorn
22,985 Points

Ah, so you've added two "class" attributes to your labels.

I've got quite close with:

HTML

<br>
<label>Age:</label>
 <br>
<label for ="over_13" class="light inline_radio">13 or Older<input type="radio" id="over_13" name="user_age"></label>
<label for="under_13" class="light inline_radio"> 13 Younger<input type="radio" id="under_13" name="user_age"></label>

I just removed display:inline and it looks a little better

CSS

label.inline_radio {
  width: 50%;
  display:block;
  line-height: auto;
}

label.light{
    /*display: inline;*/
}
thomascawthorn
thomascawthorn
22,985 Points

This will give you something that is inline - but out of place.

The width:350px on .form-wrap is pushing the radio buttons down:

.form-wrap input {
    width: 350px;
    clear: both;
    margin:5px ;
    height:2em;
    background: #9EA39B
}

you can fix by setting

label.inline_radio > input {
  width: 0
}

and then add spacing with margins to make it look nice ;)

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank you but Hmm it doesnt look quite right : /