The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Position of text and input box inside form?

  • # November 6, 2008 at 11:44 pm

    I am a newbie with CSS and i am trying to make a form which accepts firstname and lastname from a user with submit and reset button. I am using ( ‘Modal Login Form’ as guide. Now, i am having hard time to put texts in the right place. Here is the screen shot of what i have:

    I am having hard time aligning input box with the texts (firstname and lastname). Also i am trying to move ‘Submit’ and ‘Reset’ button little bit lower. When i try to increase my padding value, they increase input box size and button sizes. Can anyone tell me what am i doing wrong? Here is a screenshot of my HTML and CSS.

    P.S = Isn’t padding suppose to move texts from top bottom right and left? What did it increases size in case of (input box and button).?

    # November 7, 2008 at 3:20 am

    the pics are somehow not working for me.

    But have your tried to use margin-top: instead of padding-top:? I think it should work.

    # November 7, 2008 at 5:50 am

    use line-height:

    height: 16px;
    font-size: 1.1em;
    line-height: 1.6em;

    em or px doesn’t matter… this should make it align in the middle.
    Put line height the same size the div its in.

    Edit: Put them in a div and set the height and use the line-height
    tell me if it works haven’t been able to properly check it out

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed