SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    noob help! input field not lining up

    I want the input username, password, remember me to be in one line, lined up in to right hand corner. That's not what I am getting. All the input forms are one line at the top left hand corner. Here is my html and css code.

    Code:
    div#login-form {position:relative; top: 25px; right: 10px; width: 600px; height: 30px; margin: 0; }
    div#login {position:relative; }
    div#password {position:relative; }
    div#username {position:relative; }
    div#remember {position:relative; }
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
        
        <
    link rel="stylesheet" href="temp.css" type="text/css" />
    </
    head>
    <
    body>
    <
    div id="login-form" >
                        <
    form action="/login" id="login" method="post">
                            <
    label for="username">Username</label>
                            <
    input type="text" name="username" id="username"size="15" tabindex="1"/>

                            <
    label for="password">Password</label>
                            <
    input type="password" name="password" id="password" size="15" tabindex="2" />

                            <
    label for="remember">Remember Me</label>
                            <
    input type="checkbox" name="remember" id="remember" tabindex="3" checked="checked" />
                            <
    input type="submit" value="Go"  tabindex="4" />
                        </
    form>
    </
    div>
    </
    body>
    </
    html

  2. #2
    winter is around the corner Tomer's Avatar
    Join Date
    Jul 2005
    Location
    Israel
    Posts
    684
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK if you want them all lined up, try this:

    Add a text-align: left; to "login-form". Plus if you want it in the corner, you'll need to reduce the width [width: 150px;], go ahead and add a vertical-align: top; just to be sure it's staying at the top.

    Each element in your design should have a it's own div, don't combine. So this div will only be for the login area, which should have a small width.

    Hope this helps you.
    - Tomer


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
  •