Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Form Aligment Input , text ...

Well , i want the text to be on the same line as the input and i want the input , every input to be on the right with the same distance:

Heres my code

<!DOCTYPE html>

<html> <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up </title>
    <link rel="stylesheet" href="normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css.css">

</head>
<body>
    <div class="form-wrap">
        <form>

            <h1> Sign Up </h1>

            <label for="name">Name:</label>
            <input type="text" id="name" name="user_name">
            <br>
            <label for="surname">Surname:</label>
            <input type="text" id="surname" name="user_surname">
            <br>
            <label for="email">Email:</label>
            <input type="email" id="email" name="user_email">
            <br>
            <label for="pdw">Password:</label>
            <input type="password" id="pdw" name="user_password">
            <br>
            <label for="rep-pdw">Repeat Password:</label>
            <input type="password" id="rep-pdw" name="user_rep-pdw">

        </form> 
    </div><!-- form-wrap -->
</body>

</html>

And CSS:

.form-wrap {

    width: 250px;
    clear: both;
    margin:0 auto;
}
.form-wrap input {
    width: 100%;
    clear: both;
}
.form-wrap label{
    float: left;
    position: relative;e
}

9 Answers

David Curtis
David Curtis
11,301 Points

You can find the code you want here, I fixed it for you: http://codepen.io/dacur/pen/KJmxg

Is that what you wanted?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

oh yes , i wanted to make something like that

David Curtis
David Curtis
11,301 Points

thanks, glad it worked for you.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Issues you've got are you've got the input width at 100% and clearing both left and right so there's no room for another element to sit there and if there was, they'd be cleared below. Also, there's no float:left. You don't need to add a relative position to the element either, unless you're absolutely positioning an element in relation to it, in this instance you aren't.

What you need to do is give the label a left float, a width of say 30% or whatever fits and line-height of 27px. That's the standard input height and it'll center the text to the input box. Then you'll need to give the input a width of 100% minus the label's width, float that left as well.

You'll end up with the label sitting to the left of the input box, input boxes all aligned one under the other and label text centered vertically to the input.

David Curtis
David Curtis
11,301 Points
David Curtis
David Curtis
11,301 Points

it looks fine for me, but perhaps i don't understand what you're wanting. take a look at the screenshot here: http://imgur.com/nIpN78u

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank you for your help but now the name if on the right of the input and " Name"is on top of input witch the last input is alone anyway , thought their on the right of the input and dont wanna move to the left of the input. ANd if i change input float to the right , it wont align with the text even if i change line-height.

.form-wrap {

    width: 450px;
    clear: both;
    margin:0 auto;
}
.form-wrap input {
    width: 100px;
    clear: both;
    float:left;/* Even if i put on right, it wont work and line-height doesnt help tp straight it */
}
.form-wrap label{
    float: left;
    position: relative;
    width:30%;
    line-height: 27px;
}
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

because i want the input , like David wrote it but straight in one line , from vertical |

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank You Very Much , iv months to solve this code : P . Since i joined treehouse , i learned alot with the help of videos and great people :)

David Curtis
David Curtis
11,301 Points

me, too, treehouse is a great place to learn! :)

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

I have a question, is it good just to go up with videos and just watch them or should i practice them? I did HTML and i canlay put page with it but not fluid and in HTML i saw new things like header , section etc.. so if im learning new stuff, should i make like a small project in my folder on pc to know it better? like on the forms im learning how to style them and im getting better at it . ANd how do i create a side bar in HTML5?

FIrstly i did # <div id="side-bar"> </div> Then i did # <div id="content"> </div>

and footer and header at the top but is this correct way to do it in html5 or theres another way to do it ? Since im going throw CSS Foundations in Web Design , the long one with around 45h , i want to be sure im learning everything and not just watching videos , making quizes and code challenges and then in two videos ahead, forget what i did before , i really want to learn well and not waste time by just doing them if im not learning it . I cant make a project now because i didnt learned about fluid layout but when i do il try to use every skill but i really want to learn it as first time knowing that i would need to go back in some cases .

I hope i wrote it in a good way : P im not very good at English

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Uh i have another error ;/ as i want to place i in the middle of the page, the text hides behind the input. http://codepen.io/anon/pen/KaxGf

David Curtis
David Curtis
11,301 Points

change label width to 50%. worked for me. you have to play around with your code! :)

David Curtis
David Curtis
11,301 Points
David Curtis
David Curtis
11,301 Points

some of the courses/videos, i did code along with the instructors. others, i will not code but will take notes so i can review them later. and some i just watch. so it really depends on the course for me.

the best way to learn any of this stuff is to practice and play around with your code. google and stackoverflow are my favorite resources (and treehouse) for getting or finding answers. you should get a github account and store your favorite code snippets (gists) on your gist account: https://gist.github.com/ and use this free app that works on top of your gist account: http://www.gistboxapp.com/

just keep pushing forward, and like i said, keep practicing. asking questions like you are doing on the forums is great.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Oh well, as i look at this code , it look soo easy now xd i just guess i need to play with code more like you said and get more familiar what this code do : P

Ill see gistbox , ill will take notes too. WHen i started to learn HTML , form L****.com site, ( i dont know if i cant write the site name since their both educative on kind of same thing and can be competitive , i didnt read the treehouse rules ) and i did write my code in the text editor with comments and i learned that way , layout but here its just more stuf like child elements input with [ ] etc.. but now i have a bit more problem but ill do like you said .

And lastquestion i think : P like you wrote "just keep pushing forward, and like i said, keep practicing. ..." do you mean to just do as much as i can and watch videos going throw them?

Since i have summer for 2 months, i really want to use it all to learn . My lifestyle now is : Sport to keep healthy. Learning for around 3-5h per day Playing game on PC for well around 3h

I know alot of timeon PC and hurts eyes and that stupid : P But if i Learn all day , if i push my self and add that 3h to learning every day , will it be a good think to do? since if i learn to much how much will i actualy remember/learn ?

And well i basicaly need to at least be close in two months to put a fully interactive website online with PHP login , and user accounts and JS interactivity . At least ill need to know it at the end of this year . I want to learn how to make websites with , eq like facebook , maybe not that complicated but in a way and then i want to move to make apps basically .

What do you think it would be the best to do ? And are my goals real ?