Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Username & Password Input On The Same Line?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #159087
    MBM
    Participant

    How do I place the input boxes on the same line – as you see on most forums (but not this one!) e.g.

    Username : (input) Password : (input)

    . I have no idea on how to style it or if there is something I’m doing wrong in the code.

    <div class="login">
    <label for="UserName">Username</label><input id="username" class="inset" name="username" type="text" />
    <label for="Password">Password</label><input id="password" class="inset" name="password" type="text" />
    </form>

    #159088
    Senff
    Participant

    Start with this and go from there:

    .login label, 
    .login input {
        float:left;
    }
    

    It’s very basic but without knowing/seeing the rest of your site, it’s difficult to get into it more detailed.

    #159102
    MBM
    Participant

    Thanks. That works to a point. I have a forms for adding comments and a user registration page.

    On each page there is a full width nav and I want the username and password fields in the top right of the nav so users can login from any page. I have created a second inset class and tried to change the font and positions of the inputs but it’s not picking up also I’m not sure how to incorporate the login section with the other forms. If I place this just after the nav and before the form above it’s a mess so I’ve left it out of the pen so you can get an idea of how it should all fit :

    http://codepen.io/MBM/pen/mGyJx

    #159130
    MBM
    Participant

    I did it a different way.

    <input name="username" type="text" size="14" id="username" class="insetreg" value="username">
    <input name="password" type="text" size="14" id="password" class="insetreg" value="password">
    <input name="Submit" type="Submit" class="loginbtn" value="login" />

    .insetreg { left:1400px; font-family:'Voltaire', sans-serif; font-size:18px; position:relative; }
    
    .loginbtn { left:1740px; font-family:'Voltaire', sans-serif; font-size:18px; border-width:1px; border-color:#333333; background-color:#6B4226; color:#ffffff; padding:2px 10px 2px 10px; position:absolute; height:29px; width:120px; }
    

    http://codepen.io/MBM/pen/Jfzbr

    #159134
    __
    Participant

    .insetreg { left:1400px; …

    .loginbtn { left:1740px; …

    Using absolute positioning (especially with such large left values) will force your login boxes off-screen on mid- to small-sized screens.

    Another option similar to @Senff’s suggestion would be to use display: inline-block.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.