- This topic is empty.
-
AuthorPosts
-
December 25, 2013 at 8:32 am #159087MBMParticipant
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>December 25, 2013 at 9:05 am #159088SenffParticipantStart 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.
December 25, 2013 at 12:06 pm #159102MBMParticipantThanks. 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 :
December 26, 2013 at 8:23 am #159130MBMParticipantI 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; }
December 26, 2013 at 9:15 am #159134 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.