I want to style Forget Password element so that it appears in the right side. This is possible with width set to 100% but I'm also observing that the empty space before the text is also carrying the link property. I tried using width as 50%, but this pushes the text back to the left side. How can I achieve what I want?
#forgotP {
color: blue;
text-decoration: none;
display: block;
width: 50%;
text-align: right;
font-size: 12px;
font-weight: 300;
}
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
You can use CSS flexbox to get it done.
.box {
width: max-content;
}
p {
display: flex;
justify-content: flex-end;
}
#forgotP {
color: blue;
text-decoration: none;
font-size: 12px;
font-weight: 300;
}
<body>
<div class="box">
<form autocomplete="off">
<input type="text" id="username" name="username" placeholder="Username"><br>
<p>Forgot Password?</p>
<input type="password" id="password" name="password" placeholder="Password"><br>
<input type="button" value="Register" id="register" class="inline">
<input type="button" value="Login" id="login" class="inline">
</form>
</div>
</body>
EDIT
add CSS code
p {
display: flex;
justify-content: flex-end;
}
Related
I am trying to do 2 things here:
1) I want the label to change to a lighter shade of grey when the input is selected. However, I can't get all the labels to change color.
2) I want to put the label inside the input. However, I am more concerned about the first than the second, as by implementing the second one would cancel out the first one I believe. But it would be nice to know how to position a label inside an input.
I am using the CSS input:focus ~ label method however, this just selects the labels AFTER the input and I have the label before the input therefore the first label is not working for the fade.
How can I get all the labels to change color when an input is selected? I know I need to move the label after the input however, if I do that the label will show up underneath the input which is not where it is supposed to go.
I have tried position: absolute on the label but it just bunches them together, so I am not sure how to move them individually.
Here is the link to my codepen, I have two contact forms, one separated with divs the other is not.
https://codepen.io/RJorns/pen/MdmoRp
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div class="contact-wrapper">
<div class="contact-title"><h1>Contact</h1></div>
<form class="contact-form ui equal width form">
<div class="form-wrapper">
<label class="form-label">Name</label>
<input class="form-input" id="name" type="text" placeholder="Name" required>
</div>
<div class="form-wrapper">
<label class="form-label">Email</label>
<input class="form-input" id="email" type="text" placeholder="Email" required>
</div>
<label class="form-label">Message</label>
<div class="field">
<textarea rows="4" id="message" type="text" required></textarea>
</div>
<button id="submit" class="ui grey button">Submit</button>
</form>
</div>
<div class="contact-wrapper">
<div class="contact-title"><h1>Contact</h1></div>
<form class="contact-form ui equal width form">
<label class="form-label">Name</label>
<input class="form-input" id="name" type="text" placeholder="Name" required>
<label class="form-label">Email</label>
<input class="form-input" id="email" type="text" placeholder="Email" required>
<label class="form-label">Message</label>
<div class="field">
<textarea rows="4" id="message" type="text" required></textarea>
</div>
<button id="submit" class="ui grey button">Submit</button>
</form>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
text-align: center;
}
/* Contact */
.contact-wrapper {
margin: 0 auto;
max-width: 75%;
}
.contact-title {
margin-bottom: 2em;
}
.contact-form {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-content: center;
}
input {
box-shadow: inset 0px 0px 13px -1px rgba(77, 77, 77, 1);
}
.form-label {
display: flex;
color: #515151;
}
input:focus ~ label {
color: #a0a0a0;
}
button {
margin-top: 5em;
}
I want the all the labels to show a lighter grey when it is focused.
I want to use CSS only but if I have to use JS that is fine.
I just moved the label after the input for label section from css and used the column reverse to move the label on top. Also added the transition on input focus. I hope this will work. Comment for more info.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
text-align: center;
}
/* Contact */
.contact-wrapper {
margin: 0 auto;
max-width: 75%;
}
.contact-title {
margin-bottom: 2em;
}
.contact-form {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-content: center;
}
input {
box-shadow: inset 0px 0px 13px -1px rgba(77, 77, 77, 1);
}
.form-label {
display: flex;
color: #515151;
transition: all 0.4s ease-in;
}
input:focus ~ label {
color: #a0a0a0;
transition: all 0.4s ease-in;
}
.form-wrapper {
display: flex;
flex-direction: column-reverse;
}
button {
margin-top: 5em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div class="contact-wrapper">
<div class="contact-title">
<h1>Contact</h1></div>
<form class="contact-form ui equal width form">
<div class="form-wrapper">
<input class="form-input" id="name" type="text" placeholder="Name" autocomplete="off" required>
<label class="form-label">Name</label>
</div>
<div class="form-wrapper">
<input class="form-input" id="email" type="text" placeholder="Email" autocomplete="off" required>
<label class="form-label">Email</label>
</div>
<label class="form-label">Message</label>
<div class="field">
<textarea rows="4" id="message" type="text" required></textarea>
</div>
<button id="submit" class="ui grey button">Submit</button>
</form>
</div>
<div class="contact-wrapper">
<div class="contact-title">
<h1>Contact</h1></div>
<form class="contact-form ui equal width form">
<div class="form-wrapper">
<input class="form-input" id="name" type="text" placeholder="Name" autocomplete="off" required>
<label class="form-label">Name</label>
</div>
<div class="form-wrapper">
<input class="form-input" id="email" type="text" placeholder="Email" autocomplete="off" required>
<label class="form-label">Email</label>
</div>
<label class="form-label">Message</label>
<div class="field">
<textarea rows="4" id="message" type="text" required></textarea>
</div>
<button id="submit" class="ui grey button">Submit</button>
</form>
</div>
I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.
As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: #7fffd4;
padding: 5px;
}
#Sign_Up {
text-align: center;
background-color: #a52a2a;
margin-top: 10px;
padding: 5px;
}
form div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
border: #00f dashed 1px;
margin-bottom: 2px;
}
form div input {
width: 120px;
}
form div select {
width: 124px;
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<br><input type="submit" value="Submit">
</form>
</div>
</div>
You can us tabular forms, they are easy to manage.
form{
background-color:red
}
H1{
text-align:center
}
<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
<table style="width:100%">
<tr>
<td>Email</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="firstname"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
clear: left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.
Let's do some cleanup and simplification here.
First off we'll get rid of all those <br> tags. Don't need 'em.
Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.
#Login_and_Sign_Up {
width: 250px;
margin-left: 10px;
}
#Login {
background-color: aquamarine;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
}
label {
width: 80px; /* adjust to taste */
display:inline-block
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="#">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Further improvements that could be made:
For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.
Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.
Use CSS Flexbox
I have done it for the login form, you can repeat the same for sign-up as well.
Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 170px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
.flex-form p{
display:flex;
}
input {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
select {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
label {
flex: 1;
margin: 5px 0 0 0;
float:left;
text-align:left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php" class="flex-form">
<p>
<label>Email</label>
<input type="text" name="email">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.
I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.
#Login_and_Sign_Up {
height: inherit;
margin-left: 10px;
/* float: right; */
}
#Login {
background-color: aquamarine;
overflow: hidden;
width: 300px;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
width: 300px;
overflow: hidden;
}
label {
min-width: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="firstname">First name</label>
<input type="text" name="fname" id="firstname">
</div>
<div class="form-group">
<label for="familyname">Family name</label>
<input type="text" name="lname" id="familyname">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="repeat">Repeat PSW</label>
<input type="password" name="passwordrepeat" id="repeat">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.
remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.
I am really finding it hard to center the interface, so every element is aligned. I have 'Email', 'Password' and the 'Login button'. I was trying to use absolute positioning but when I move the input field it covers the word 'Email', or 'Password' and I want the user to see those words. The functionality is working, working with rails.
Here is my code for HTML and CSS:
h1 {
text-align: center;
margin-top: 350px;
font-size: 45px;
}
.field {
text-align: center;
}
#field {
text-align: center;
padding: 25px;
}
input {
height: 35px;
width: 200px;
display: inline;
}
.actions {
text-align: center;
}
h1 {
font-family: 'Lobster', cursive;
}
<nav>
<ul>
<li>
campus
</li>
<li>
classrooms
</li>
<li>
courses
</li>
<li>
users
</li>
</ul>
</nav>
Sign Up or
Log In
<h1>Log in</h1>
<form accept-charset="UTF-8" action="/sessions" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="ALrA11a6G5GZof0r/AMm82stLUUzaI+UTPEoB79yXrc=">
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="text">
</div>
<div id="field">
<label for="password">Password</label>
<input id="password" name="password" type="password">
</div>
<div class="actions">
<input name="commit" type="submit" value="Log in">
</div>
</form>
I changed id on the second field to a class. It will make your code easier to maintain.
html:
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="ALrA11a6G5GZof0r/AMm82stLUUzaI+UTPEoB79yXrc="></div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="text">
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" name="password" type="password">
</div>
<div class="actions"><input name="commit" type="submit" value="Log in"></div>
css:
h1 {
text-align: center;
margin-top: 50px;
font-size: 45px;
font-family: 'Lobster', cursive;
}
input {
height: 35px;
width: 200px;
display: inline;
}
.field {
padding-bottom: 25px;
width: 300px;
margin: 0 auto;
}
.field label {
display: inline-block;
min-width: 70px;
text-align: left;
}
.actions {
text-align: center;
margin: 0 auto;
width: 300px;
}
And here is a jsfiddle showing it in action: http://jsfiddle.net/t9w757hj/
I am trying to float a label on top of the input but it's not working correctly? Maybe I messed up the CSS? Help would be greatly appreciated, thanks!
Heres what it looks like at the moment:
http://prntscr.com/37hw30
HTML:
<form id="loginformitem" name="loginformitem" method="post" style="float:right">
<label for="username">Username</label>
<input type="text" name="log_username" class="logintext" id="username" placeholder="Username" style="margin-left:100px">
<label for="password">Password</label>
<input type="password" name="log_password" class="logintext" id="password" placeholder="Password">
<button type="submit" class="loginbutton" name="login" >Login now</button>
</form>
CSS:
.logintext {
margin-right: 10px;
border: 2px solid rgba(0,0,0,0);
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 13px;
color: #222;
}
form label {
font-size: 13px;
font-weight: bold;
color: #a4c0d7;
}
you can wrap label & input into a <p> or a <span> displayed as inline-block.
input can be displayed as block to break the line.
HTML
<form id="loginformitem" name="loginformitem" method="post" >
<span>
<label for="username">Username</label>
<input type="text" name="log_username" class="logintext" id="username" placeholder="Username" >
</span>
<span>
<label for="password">Password</label>
<input type="password" name="log_password" class="logintext" id="password" placeholder="Password">
</span>
<button type="submit" class="loginbutton" name="login" >Login now</button>
</form>
CSS
form span {
display:inline-block;
margin:0 50px;
vertical-align:bottom;
}
span input {
display:block;/* if you want submit under , do form input {} to include it too */
}
form {
float:right;
/* for the demo */
border:solid;
border-radius:1em;
padding:0.25em;
}
Turns to look like DEMO
try this
#loginformitem input , #loginformitem label {
clear : left ,
float : left
}