I have to center vertically a label with a textbox. This is the fiddle http://jsfiddle.net/TAavK/ . The label is in the top of the input, but I want to put this in the center of this. How can I do?
<form class="pure-form pure-form-aligned">
<div class="pure-control-group">
<label for="txtUsuario" class="clase">User</label>
<input type="text" name="txtUsuario" />
</div>
<div class="pure-control-group">
<label for="txtPass" class="clase">Password</label>
<input type="password" name="txtPass" />
</div>
</form>
.pure-form-aligned .pure-control-group {
margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
display: inline-block;
margin: 0 1em 0 0;
text-align: right;
vertical-align: middle;
width: 15em;
}
label.clase {
float: left;
}
input {
width: 30%;
border: 1px solid #CCCCCC;
border-radius: 4px;
box-shadow: 0 1px 3px #DDDDDD inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
vertical-align: middle;
line-height: normal;
font-size: 100%;
margin: 0;
}
Remove this
label.clase {
float: left;
}
JSfiddle Demo
Try it
<form class="pure-form pure-form-aligned">
<div>
<div class="pure-control-group">
<label for="txtUsuario" class="clase">User</label>
</div>
<div class="pure-control-group">
<input type="text" name="txtUsuario" />
</div>
</div>
<div>
<div class="pure-control-group">
<label for="txtPass" class="clase">Password</label>
</div>
<div class="pure-control-group">
<input type="password" name="txtPass" />
</div>
</div>
</form>
Change only this css class
.pure-form-aligned .pure-control-group {
margin-bottom: 0.5em;
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/TAavK/9/
write this:
label.clase
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
Watch here
Related
Trying to figure out how to align some buttons to some input fields and it's tricky as hell. I couldn't figure it out.
I've found a lot of things online:
Align button to input with float?
Align button with input forms with labels
Make form button/text field same height in all browsers?
I know I will get a lot of minuses but I just can't get my head around this and I need help.
I've lost a whole day modifying values and I have no clue on how to position things in CSS. I can't understand it.
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: block;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
display: grid;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
<div class="box-head">
<div class="title">
<h1>Configuration Page</h1>
</div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class="textbox">
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id="button" type="submit" value="Enter">
<div class="textbox">
<input type="number" placeholder="Brightness" name="getBrightness" value="">
</div>
<input id="button" type="submit" value="Enter">
</form>
</div>
EDIT: This is how I've fixed it:
I've changed from class to ID: #textbox;
I've put #textbox and #button inside div: #box-box;
I've added display: flex; to #box-box and display: grid; to
both #textbox and #button.
Added margin-left: 25px; to #button;
Here is the result.
Thanks #Flavio Caruso for the inspiration.
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url">
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
#logo {
width: 94%;
height: 50px;
background: url(logo.png) left no-repeat;
background-size:contain;
margin: 30px auto;
}
**#box-box {
display:flex;
}**
#textbox {
**display: grid;**
width: 70%;
overflow: hidden;
font-size: 20px;
padding 10px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
#textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
**display: grid;**
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
**margin-left: 25px;**
margin-top: 30px;
}
There is a few changes you have to do, you must insert the input button inside the div class 'textbox' and add a display:flex, then you ajust the css from button to inline-block and float right.
like that:
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: flex;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
margin: 5px 5px;
}
#button {
display: inline-block;
float: right;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
<input id ="button" type="submit" value="Enter">
</div>
<div class = "textbox" >
<input type="number" placeholder="Brightness" name="getBrightness" value="">
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
I am not able to understand how I can get the label from top of the input field to the left. The label text is on top of the input field. How can I get it to the left of the input field for the contact information part? Any help would be appreciated. Thanks a lot.
This is my code:
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<label for="inputfield">Full Name</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
<label for="inputfield1">Email Address</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
<label for="inputfield2">Phone Number</label>
<input type="text" name="phonenumber" id="inputfield2">
<label for="inputfield3">Street Address</label>
<input type="text" name="streetaddress" id="inputfield3">
<label for="inputfield4">City</label>
<input type="text" name="city" id="inputfield4">
<label for="stateselect">State</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode">
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
<input type="checkbox" name="css"><label>CSS News</label><br><br>
<input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
<label>Newsletter format</label><br><br>
<input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
<input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
You can reset width and display on inputs and/or use float.
It can be a reset at any time or within the mediaquerie.
You can also filter within which fieldset you need this reset to be effective.(example below)
.formcenter fieldset:first-of-type label,
.formcenter fieldset:first-of-type input{
float: left;
line-height: 1.2em;
padding: 6px;
margin: 8px 0;
width: 50%;
}
.formcenter fieldset:first-of-type label {
clear: left;
width: 35%;
}
input[type="checkbox"],
input[type="radio"]{
margin-right:1em;
}
fieldset ~ fieldset br + label {
margin:1em;
color:gray
}
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
.formcenter fieldset:first-of-type label,
.formcenter fieldset:first-of-type input{
float: left;
line-height: 1.2em;
padding: 6px;
margin: 8px 0;
width: 50%;
}
.formcenter fieldset:first-of-type label {
clear: left;
width: 35%;
}
input[type="checkbox"],
input[type="radio"]{
margin-right:1em;
}
fieldset ~ fieldset br + label {
margin:1em;
color:gray
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<label for="inputfield">Full Name</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
<label for="inputfield1">Email Address</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
<label for="inputfield2">Phone Number</label>
<input type="text" name="phonenumber" id="inputfield2">
<label for="inputfield3">Street Address</label>
<input type="text" name="streetaddress" id="inputfield3">
<label for="inputfield4">City</label>
<input type="text" name="city" id="inputfield4">
<label for="stateselect">State</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode">
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
<input type="checkbox" name="css"><label>CSS News</label><br><br>
<input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
<label>Newsletter format</label><br><br>
<input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
<input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
You can use display:flex with a container for each lines
.line
{
display:flex;
align-items:center;
}
.line label
{
min-width:200px;
}
input
{
flex:1;
margin:10px;
}
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<div class="line">
<label for="inputfield">Full Name :</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
</div>
<div class="line">
<label for="inputfield1">Email Address :</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
</div>
<div class="line">
<label for="inputfield2">Phone Number :</label>
<input type="text" name="phonenumber" id="inputfield2">
</div>
<div class="line">
<label for="inputfield3">Street Address :</label>
<input type="text" name="streetaddress" id="inputfield3">
</div>
<div class="line">
<label for="inputfield4">City :</label>
<input type="text" name="city" id="inputfield4">
</div>
<div class="line">
<label for="stateselect">State :</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
</div>
<div class="line">
<label for="zipcode">Zip Code :</label>
<input type="text" name="zipcode" id="zipcode">
</div>
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
<input type="checkbox" name="css"><label>CSS News</label><br><br>
<input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
<label>Newsletter format</label><br><br>
<input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
<input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
Swap your labels and inputs to get desired result:
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<label for="inputfield">Full Name</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
<label for="inputfield1">Email Address</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
<label for="inputfield2">Phone Number</label>
<input type="text" name="phonenumber" id="inputfield2">
<label for="inputfield3">Street Address</label>
<input type="text" name="streetaddress" id="inputfield3">
<label for="inputfield4">City</label>
<input type="text" name="city" id="inputfield4">
<label for="stateselect">State</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode">
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<label>HTML News</label><input type="checkbox" name="htmlnews"><br><br>
<label>CSS News</label><input type="checkbox" name="css"><br><br>
<label>Javascript News</label><input type="checkbox" name="javascript"><br><br>
<label>Newsletter format</label><br><br>
<label>HTML</label><input type="radio" name="newsletter" value="html"><br><br>
<label>Plain Text</label><input type="radio" name="newsletter" value="plaintext"><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
You can do this fairly easily:
Full Name: <input type="text" name="fullname" placeholder="Required" id="inputfield">
This will just make the text appear to the left side of the input itself.
I used this method for a newsletter input I was doing:
Name: <input id="nameInput" type="text" name="name" required><br>
I'm trying to put those two buttons at the bottom but the vertical-align:bottom don't seem to have any effects.
Both blocks are in a class "login-card" and the blue stuff are buttons/submit inside this class.
Here is my css :
.login-card {
padding: 40px;
width: 400px;
height: auto;
background-color: #F7F7F7;
margin: 20px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.login-card input[type=text], input[type=password], input[type=email], inputs {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=submit], input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
display: table-cell;
vertical-align: bottom;
}
Am i missing something obvious ?
EDIT, added Html :
<div class="col-sm-6">
<div class="login-card" id="firstCard">
<h1>Fill the Wheel</h1>
<form action="javascript:void(0);" name="members" onsubmit="rollIt()">
<div id="dynamicInput">
<input class="inputs" type="text" name="input1" placeholder='Type name' required>
<input class="inputs" type="text" name="input2" placeholder='Type name' required>
<input class="inputs" type="text" name="input3" placeholder='Type name' required>
</div>
<input type="button" id="addInput" class="login login-submit" value="Add a member">
<input type="submit" id="rollWheel" name="login" class="login login-submit" value="Roll the wheel!">
</form>
</div>
</div>
Your buttons are at the bottom of the form, their parent. You need to take the padding-bottom off of login-card or something like that to give the buttons room to move down.
Also, here is an answer to your problem with the right box
<div class="wrapper">
<button></button>
<button></button>
</div>
.logincard:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.wrapper {
display: inline-block;
vertical-align: bottom;
}
I tried to set the width and padding of the divs by pixels in all directions to make them fit together but its not working in any way I try. and when I zoom in and out the width of everything changes. I feel I am doing it the wrong way, is there another easier way people adjust the sizes and positions of the elements in page?
JsFiddle: http://jsfiddle.net/ruavcstx/
<!DOCTYPE html>
<html>
<head>
<style>
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
}
.username {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
margin: 0;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
</style>
</head>
<body class="background">
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
</html>
Alright, try these changes in the fiddle: http://jsfiddle.net/ruavcstx/1/
I changed -
username/password class
display: block
padding-top: 35px; (no other setting)
width: 100%;
And I made a minor change in the html (placed a <br/> after the password textbox so the error comes up on the next line).
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
width: 150px;
}
.username {
padding-top: 15px
display: block;
text-align: center;
margin: 0px;
width: 100%;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding-top: 15px;
display: block;
text-align: center;
margin: 0px;
width: 100%;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
HTML:
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/><Br/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
Can you try it?
Instead of float:left, Use display:inline; and fot testing do align center. And, resize it. Its working fine for me.
HTML
<div id="loginsignupform" align="center">
to
<div id="loginsignupform">
CSS
#signuptab {
float: left;
}
to
#signuptab {
display: inline;
}
You have not provided corresponding padding for tabs
Check this updated fiddle : http://jsfiddle.net/ruavcstx/2/
Check out the CSS changes. Hope it helps
I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance
You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/