Grow your CSS skills. Land your dream job.

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 (http://css-tricks.com/examples/) ‘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:
    http://i36.tinypic.com/zy7rb8.jpg

    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.
    HTML: http://i35.tinypic.com/30979fn.jpg
    CSS: http://i37.tinypic.com/2ujjgvo.jpg

    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:

    eg:
    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.

*May or may not contain any actual "CSS" or "Tricks".