I have this HTML and CSS code here:
.container1{
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox{
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
}
.textbox{
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
}
body {
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
window.onload=function(){
function GetDays(){
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt- pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change",function(){
if(document.getElementById("drop_date").value){
document.getElementById("numdays2").value=GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0,10);
}
</script>
</head>
<body>
<div id="reserve_form" class="container1">
<div id="pickup_date"><p><label class="form">Todays Date:</label><input
type="date" class="textbox" id="pick_date" name="pickup_date" disabled
onchange="cal()"</p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input
type="date" class="textbox" id="drop_date" name="dropoff_date" /></p></div>
<div id="numdays"><label class="form">Number of days:</label><input
type="text" class="textbox" id="numdays2" name="numdays"/></div>
</div>
</body>
</html>
How would I give a bit of space between the text and the text box. I still need it centered, but need some space for the shadow to look nice.
Also, how can I align the text above each text-box instead of being on the left?
I have started HTML and CSS coding very recently, all of this is new to me, but very interesting!
Thank you
Also, how can I align the text above each text-box instead of being on the left?
Make the wrappers of each section inside container1 a column flexbox and add align-items: center to align it horizontally. Also add a margin to the textbox - see demo below:
window.onload = function() {
function GetDays() {
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change", function() {
if (document.getElementById("drop_date").value) {
document.getElementById("numdays2").value = GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);
}
.container1 {
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox {
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
margin: 10px; /*added */
}
#pickup_date p, #dropoff_date p, #numdays { /* added */
display: flex;
flex-direction: column;
align-items: center;
}
body {
background-color: #fff;
}
<div id="reserve_form" class="container1">
<div id="pickup_date">
<p><label class="form">Todays Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()"/> </p></div>
<div id="dropoff_date">
<p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" /></p>
</div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays" /></div>
</div>
Here is the updated fiddle:
window.onload = function() {
function GetDays() {
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change", function() {
if (document.getElementById("drop_date").value) {
document.getElementById("numdays2").value = GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);
}
.container1 {
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox {
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
}
.textbox {
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
}
.form {
padding-bottom: 10px;
display: block;
}
body {
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="reserve_form" class="container1">
<div id="pickup_date">
<p>
<label class="form">Todays Date:</label>
<input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()">
</p>
</div>
<div id="dropoff_date">
<p>
<label class="form">Dropoff Date:</label>
<input type="date" class="textbox" id="drop_date" name="dropoff_date" />
</p>
</div>
<div id="numdays">
<label class="form">Number of days:</label>
<input type="text" class="textbox" id="numdays2" name="numdays" />
</div>
</div>
</body>
</html>
Related
This is a form that I created and I am adding a warning if the password entered doesn't match using javascript. The problem is that when the text is appended it makes the container items move upward or maybe the bottom downward. Is there a way to make it so that I can add the text without the effect of other items being pushed up or the container bottom being pushed downwards?
let password = document.querySelector("input#password");
let confirmPassword = document.querySelector("input#confirmPassword");
let warningDiv = document.getElementsByClassName("warning");
password.addEventListener("input", getPassword);
confirmPassword.addEventListener("input", getPassword);
let pp, cp;
let warnInserted = false;
function getPassword(e) {
let p = e.target;
if (p.id === "password") {
pp = e.target.value;
} else if (p.id === "confirmPassword") {
cp = e.target.value;
}
if (pp !== cp && !warnInserted) {
let warning = document.createElement("p");
warning.textContent += "*Passwords do not match.";
warning.classList.add("warning");
confirmPassword.insertAdjacentHTML("afterend", warning.outerHTML);
warnInserted = true;
} else if (pp == cp) {
warningDiv[0].style.display = "none";
warnInserted = false;
}
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
background-image: url(https://images.unsplash.com/photo-1643836973129-015e3c240612?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: absolute;
}
#main {
width: 40%;
margin: 0 auto;
text-transform: uppercase;
}
.wrapper {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
background-color: rgba(177, 173, 173, 0.514);
border-radius: 5px;
}
.firstname,
.email,
.lastname,
.phone,
.password {
display: flex;
flex-direction: column;
flex-basis: 40%;
margin: 3% 2%;
font-size: 0.9rem;
}
.submitbtn {
margin-top: 4%;
text-align: start;
}
button {
border: 2px solid rgba(211, 207, 207, 0.747);
height: 35px;
width: 8rem;
font-size: 0.9rem;
font-weight: normal;
background-color: rgba(190, 190, 197, 0.726);
color: black;
border-radius: 4px;
}
button:hover {
transform: translateY(-4px);
box-shadow: 1px 1px 6px 2px black;
}
input {
appearance: none;
height: 23px;
border-radius: 4px;
border: 2px solid rgba(211, 210, 210, 0.726);
}
input:invalid {
appearance: none;
border: 1px solid red
}
.warning {
color: red;
margin: 1px 6px;
font-size: 0.55rem;
font-weight: 600;
text-transform: none;
}
#media (max-width: 960px) {
.wrapper {
display: block;
padding: 20px;
}
.firstname,
.email,
.lastname,
.phone {
margin: 3% 2%;
}
}
#media (max-width: 500px) {
#main {
min-width: 200px;
}
input {
min-width: 120px;
}
.submitbtn {
margin-top: 12%;
}
.firstname,
.email,
.lastname,
.phone,
.password {
line-height: 1.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sign-Up Form</title>
</head>
<body>
<div id="main">
<form>
<div class="wrapper">
<div class="firstname">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" required>
</div>
<div class="lastname">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" required>
</div>
<div class="email">
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
</div>
<div class="phone">
<label for="tel">Phone Number</label>
<input type="tel" name="tel" id="tel" required>
</div>
<div class="password">
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
</div>
<div class="password">
<label for="password">Confirm Password</label>
<input type="password" name="confirmPassword" id="confirmPassword" required>
</div>
</div>
<div class="submitbtn">
<button type="submit">Submit</button>
</div>
</form>
</div>
<script src="form.js" defer></script>
</body>
</html>
try to add:
position: relative;
to your input wrappers, and:
position: absolute;
bottom: -14px;
to your .warning block.
I also changed border width to 2px in invalid state so, it is the same as in normal state
let password = document.querySelector("input#password");
let confirmPassword = document.querySelector("input#confirmPassword");
let warningDiv = document.getElementsByClassName("warning");
password.addEventListener("input", getPassword);
confirmPassword.addEventListener("input", getPassword);
let pp, cp;
let warnInserted = false;
function getPassword(e) {
let p = e.target;
if (p.id === "password") {
pp = e.target.value;
} else if (p.id === "confirmPassword") {
cp = e.target.value;
}
if (pp !== cp && !warnInserted) {
let warning = document.createElement("p");
warning.textContent += "*Passwords do not match.";
warning.classList.add("warning");
confirmPassword.insertAdjacentHTML("afterend", warning.outerHTML);
warnInserted = true;
} else if (pp == cp) {
warningDiv[0].style.display = "none";
warnInserted = false;
}
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
background-image: url(https://images.unsplash.com/photo-1643836973129-015e3c240612?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: absolute;
}
#main {
width: 40%;
margin: 0 auto;
text-transform: uppercase;
}
.wrapper {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
background-color: rgba(177, 173, 173, 0.514);
border-radius: 5px;
}
.firstname,
.email,
.lastname,
.phone,
.password {
display: flex;
flex-direction: column;
flex-basis: 40%;
margin: 3% 2%;
font-size: 0.9rem;
position: relative; // <--- ADDED
}
.submitbtn {
margin-top: 4%;
text-align: start;
}
button {
border: 2px solid rgba(211, 207, 207, 0.747);
height: 35px;
width: 8rem;
font-size: 0.9rem;
font-weight: normal;
background-color: rgba(190, 190, 197, 0.726);
color: black;
border-radius: 4px;
}
button:hover {
transform: translateY(-4px);
box-shadow: 1px 1px 6px 2px black;
}
input {
appearance: none;
height: 23px;
border-radius: 4px;
border: 2px solid rgba(211, 210, 210, 0.726);
}
input:invalid {
appearance: none;
border: 2px solid red // <--- MODIFIED
}
.warning {
color: red;
margin: 1px 6px;
font-size: 0.55rem;
font-weight: 600;
text-transform: none;
position: absolute; // <--- ADDED
bottom: -14px; // <--- ADDED
}
#media (max-width: 960px) {
.wrapper {
display: block;
padding: 20px;
}
.firstname,
.email,
.lastname,
.phone {
margin: 3% 2%;
}
}
#media (max-width: 500px) {
#main {
min-width: 200px;
}
input {
min-width: 120px;
}
.submitbtn {
margin-top: 12%;
}
.firstname,
.email,
.lastname,
.phone,
.password {
line-height: 1.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sign-Up Form</title>
</head>
<body>
<div id="main">
<form>
<div class="wrapper">
<div class="firstname">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" required>
</div>
<div class="lastname">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" required>
</div>
<div class="email">
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
</div>
<div class="phone">
<label for="tel">Phone Number</label>
<input type="tel" name="tel" id="tel" required>
</div>
<div class="password">
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
</div>
<div class="password">
<label for="password">Confirm Password</label>
<input type="password" name="confirmPassword" id="confirmPassword" required>
</div>
</div>
<div class="submitbtn">
<button type="submit">Submit</button>
</div>
</form>
</div>
<script src="form.js" defer></script>
</body>
</html>
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 90%;
background-color:#000;
border: .0625rem solid #ccc;
position:absolute;
top:0;
bottom:0;
left:300px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I have divided the Signup form into two parts, left part is for displaying some content and right side is for displaying Signup form elements like Username, email, password and repeat password.
Now i want to move the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
Tried Creating all but having issue with(CSS PART) moving the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
you can use these code
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem 2rem 2.5rem 3rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 100%;
background-color: #000;
border: .0625rem solid #ccc;
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 2px);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I've started learning web development, and for the life of me I cannot figure out how to position my #Info div to the right of the #inputForm div. It's been a good hour, and most places say that if both elements use "display:inline-block" it should work. I am definitely missing something. Any help is greatly appreciated!
header {
background: black;
color: rgb(0, 183, 255);
font-size: 24px;
padding: 10px 10px 1px 10px;
}
h1 {
margin: 0px;
font-size: 28px;
border-bottom: 2px solid currentColor;
/* line at top. TODO: make it turn into wave (D3 library maybe) */
}
h2 {
margin: 0px 0px 0px 30px;
font-size: 14px;
}
body {
margin: 0%;
background: rgb(58, 58, 58);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
color: white;
}
nav {
background: black;
display: flex;
padding: 0px;
float: right;
margin-top: -50px;
/* Because of float */
}
ul {
margin: 0px;
padding: 0px;
}
li {
font-size: 0.8em;
display: inline-block;
/* Horizontal menu */
}
/* All input */
#inputForm {
display: inline-block;
background-color: darkgoldenrod;
}
#inputForm * {
/* targets everything inside */
margin: 5px;
}
#inputForm input {
width: 42px;
background-color: darkred;
}
.DataInput {
width: 4%;
background-color: gray;
}
.waveform {
float: left;
background-color: darkorchid;
}
.waveform label {
display: inline-block;
margin: 0px;
padding: 0px;
}
#dataContainer {
background-color: black;
}
#waveformContainer {
display: inline-block;
background: darkgreen;
}
.Info {
display: inline-block;
background-color: darkmagenta;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Additive Generator</title>
</head>
<body>
<header>
<h1> Generate a waveform</h1>
<h3> an <em>audio-visual</em> experience </h2>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Create</li>
</ul>
</nav>
</header>
<form id="inputForm">
<div id="dataContainer">
<div>
<label>Harmonics</label>
<input class="DataInput" type="number" value="10">
</div>
<div>
<label>Amplitude</label>
<input class="DataInput" type="number" value="10">
</div>
<div>
<label>Frequency</label>
<input class="DataInput" type="number" value="10">
</div>
</div>
<div id="waveformContainer">
<div class="waveform">
<label for "Square">Square</label>
<!-- Insert Image-->
<input name="waveform" type="radio" value="1">
</div>
<div class="waveform">
<label for "Saw">Saw</label>
<input name="waveform" type="radio" value="2">
</div>
<div class="waveform">
<label for "Mix">Mix</label>
<input name="waveform" type="radio" value="3">
</div>
</div>
</form>
<div class="Info">
The new section The sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new section
</div>
</body>
</html>
https://jsfiddle.net/gr7kx3th/
Your div with "info" class and the form with id "infiForm" should been wrapped within same div and then you can position them with float css property. provide float: "left" property to form and provide float: "right" property to div having "info" class.
Other way to align them is flex property by using the following link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have been trying to style a Register form. I want the heading to be in the center of the div. I have another login form just beside it.
I have styled them using flex box and then used justify content as center. I also want to add a vertical line between the register form and login form. I don't want to use one of the borders of the form. Apart from using one of the form's border is there any way to do it.
Things I've tried but didn't work
1.text-align: center:
2.margin: 0 auto;
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
It would be helpful if you could post the html and css.
My guess is that the container div has no width settings, so the div is the same width as the text, so you cannot center it. Maybe set the width to 100% of its container and set the text-align to center and see if that helps.
From your code you could try
#register h3 {
text-align:center;
}
this will mean any h3 tags inside the div with the id register will have the text-align:center attribute applied to them
Otherwise post the HTML and CSS and we can take a look. (I see the HTML now, add the CSS too please
you can draw a line in the middle using CSS pseudo selector::after following is the piece of CSS rule to do that.
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
For centering the heading of the register form, use:
#register h3 {
text-align: center;
}
And similarly, for centering the heading of the login form, use:
#login h3 {
text-align: center;
}
And, for the vertical line, create an empty div and style it. I've used divider class here:
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
See the full code below:
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h3 {
text-align: center;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#register h3 {
text-align: center;
}
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div class="divider"></div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
So I have four inputs and a button. I tried editing them with CSS but I can't seem to get them to separate. They are all together. No matter what numbers I try to change. Here's my code for both files. Sorry if I get something totally wrong i'm a noob.
nav ul input{
margin: 0px 0px 10px 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
#signInBtn{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<header>
<nav>
<ul>
<?php
echo "<form action='includes/signup.inc.php' method='POST'>
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
<input id='usrInput' type='text' name='uid' placeholder='Username'>
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
<button id='signInBtn' type='submit'>Sign Up</button>
</form>";
?>
</ul>
</nav>
</header>
Try button,input {display:block} and the ul needs min. of one li
In your css your are using position absolute for all the input. That's why all input come all together.
nav ul input {
position: relative;
display: block;
}
#signInBtn {
position: relative;
}
just change it to something position relative or what suitable for you.
nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}
/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}
!you don't have to keep the margin 0 and float: none but i think its a good start before figureing out where you want everything
You are using position absolute, causing the overlap issue
and also you having wrong closing tag so I corrected your code, Please see demo below and tell me if you need anything else.
.wrapper {
margin: 0 auto;
}
.input_block {
text-align: center;
margin-top: 10px;
}
input {
padding: 20px;
width: 200px;
color: black;
border: solid;
font-size: 15px;
}
#signInBtn {
padding: 20px
width: 200px;
color: black;
border: solid;
font-size: 30px;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<form action='includes/signup.inc.php' method='POST'>
<div class="input_block">
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
</div>
<div class="input_block">
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
</div>
<div class="input_block">
<input id='usrInput' type='text' name='uid' placeholder='Username'>
</div>
<div class="input_block">
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
</div>
<div class="input_block">
<button id='signInBtn' type='submit'>Sign Up</button>
</div>
</form>
</div>
</body>
</html>