This question already has an answer here:
How do I make :after box same size as parent and responsive? transform: scale(1) works, but why?
(1 answer)
Closed 2 years ago.
I have created a simple responsive login form. That allows the user to log-in and reset password. When filling out the username/password fields, both of these fields are mixed together and not on seperate lines. I have checked to see if the CSS layout was correct but I cannot seem to find a reason as to why the username and password fields do this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(backgroundTwo.jpg) no-repeat center;
background-size: cover;
font-family: sans-serif;
}
.login {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.form {
position: relative;
width: 100%;
max-width: 380px;
padding: 80px 40px 40px;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
color: #fff;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
pointer-events: none;
}
.form img {
position: absolute;
top: -50px;
left: calc(50% - 50px);
width: 100px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.form h2 {
text-align: center;
letter-spacing: 1px;
margin-bottom: 2rem;
color: #ff652f;
}
.form .input input {
width: 100%;
padding: 10px 0;
font-size: 1rem;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background-color: transparent;
color: indianred;
}
.form .input label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 1rem;
pointer-events: none;
transition: .3s ease-out;
}
.form .input input:focus+label .form .input input:valid+label {
transform: translateY(-18px);
color: #ff652f;
font-size: .8rem;
}
.submit-button {
display: block;
margin-left: auto;
border: none;
outline: none;
background: #ff652f;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.forgot-password {
color: inherit;
}
#forgot-password {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: #fff;
opacity: 0;
transition: 0.6s;
}
#forgot-password:target {
height: 100%;
opacity: 1;
}
.close {
position: absolute;
right: 1.5rem;
top: 0.5rem;
font-size: 2rem;
font-weight: 900;
text-decoration: none;
color: inherit;
}
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="LoginTwo.css">
<title>LoginFormTwo</title>
</head>
<body>
<div class="login">
<form action="" class="form">
<img src="avatarTwo.jpg" alt="">
<h2>Login</h2>
<div class="input">
<input type="text" name="loginUser" id="loginUser">
<label for="loginUser">User Name</label>
</div>
<div class="input">
<input type="password" name="loginPassword" id="loginPassword">
<label for="loginPassword">password</label>
</div>
<input type="submit" value="login" class="submit-button">
Forgot Password?
</form>
<div id="forgot-password">
<form action="" class="form">
×
<h2>Reset Password</h2>
<div class="input">
<input type="email" name="email" id="email" required>
<label for="email">Email</label>
</div>
<input type="submit" value="Submit" class="submit-button">
</form>
</div>
</div>
</body>
</html>
The problem I see here is that you didn't set a position: relative; to the <div> with class .input.
Since you set a position: absolute; to the label, its positioning is calculated from the closest parent with a position: relative; set. In your case, it's the <form> with class .form
Try adding these changes:
.form .input {
position: relative;
}
and adjust the top property of the label:
.form .input label {
top: -30px;
}
Here's a working Codepen
Hope this helps!
It's because your form is set to absolute so your labels are relative to the form.
By putting top: 0; your labels will be on top of the form. You can fix this by changing the .input position to relative like so:
.input {
position: relative;
}
And you can change the labels position by modifying the top value
.form .input label {
top: -25px /*or any value you want*/
}
Related
I created a form submit on html/css... pls check it out in this link below
https://codepen.io/letsimoo/pen/PobxGRG
HTML Code
<form action="">
<div class="container">
<input class="required-input" type="text" id="name" required />
<label class="required-label" for="name">Name:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="email" required />
<label class="required-label" for="email">Email:</label>
</div>
<div class="container" >
<input class="not-required-input" type="text" id="budget"/>
<label class="not-required-label" for="budget">Budget:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="Message" required style="height: 100px"/>
<label class="required-label" for="Message">Message:</label>
</div>
<input type="submit" value="Submit">
</form>
CSS Code
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/* top: auto;
left: auto;
width: auto; */
}
.required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
/* I put label on top of the input*/
.required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/* making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
.required-input:focus ~ .required-label,
.required-input:valid ~ .required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
/* making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
.required-input:valid ~ .required-label {
color: #497495;
}
.required-input:focus:invalid ~ .required-label {
color: red;
}
.required-input:required ~ .required-label::before {
content: "*";
color: red;
}
.required-input:required:valid ~ .required-label::before {
color: #497495;
}
The only issue that I'm facing in this form is when selecting the (not-required) field which is (Budget) as you saw in the link after finish writing in that field or after it get unfocused, the label back to its old position and value!
Can you help me to figure out where is the mistake in the elements selection and what shall I do instead please?
Ps. when I set the input restriction of (Budget) to *required it will not have any problem!
You have :invalid for an element that can't be invalid. Since it doesn't have required, it will always come out as invalid. My answer comes from this blog.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/* top: auto;
left: auto;
width: auto; */
}
/* making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/* making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label,
.not-required-input:not(:placeholder-shown) ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
<form action="">
<div class="container" >
<input class="not-required-input" type="text" id="budget" placeholder=""/>
<label class="not-required-label" for="budget">Budget:</label>
</div>
<input type="submit" value="Submit">
</form>
What I have done is add .not-required-input:not(:placeholder-shown) ~ .not-required-label to your CSS and placeholder="" to the HTML. Of course, placeholders disappear when the user types into the input, so the pseudo :not(:placeholder-shown) will fire when user types into the input. I have only tested this in Firefox but it should work for all browsers. If needed, you can add a space into the placeholder for cross-browser support.
How do I display "Confirm Password" in a single line ?
I add an <span id="confirm">Confirm Password</span> and I did this, doesn't work:
#confirm {
display: inline;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
}
.head {
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
background: rgba(0, 250, 0, 0);
color: #FFFACD;
font-family: 'Cinzel', sans-serif;
font-size:30px;
}
.content {
position:relative;
top:8px;
width: 30%;
margin: 50px
auto 0px;
}
form {
position: relative;
margin-top: 0;
margin-left: 0;
width: 89%;
height: 300px;
padding: 20px;
border: 1px solid #B0C4DE;
background: rgba(0, 250, 0, 0);
border-radius: 0px 0px 10px 10px;
}
label {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
left: -65%;
top: -30px;
}
.username {
position: relative;
top: 65px;
}
.password {
position: relative;
top: 130px;
}
.con-pass {
position: relative;
top: 195px;
}
#confirm {
display: inline;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 2px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 250px;
outline: 0;
z-index: 1;
left: -74px;
top: -30px;
}
span {
position: absolute;
top: 5px;
left: -6px;
transition: top .5s ease, font-size .5s ease;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}
label::after {
content: '';
position: absolute;
top: 27px; /* ::after position */
left: -7px;
width: 250px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after {
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: top;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: 27px; /* ::after position */
}
input:focus {
border-radius: 2px;
}
<div class="content">
<p class="head">Register</p>
<form>
<div class="content">
<div class="email">
<input type="text" id="email" required /> <!--input field-->
<label for="email"><span>Email</span></label>
</div>
<div class="username">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" id="pass" required /> <!--input field-->
<label for="pass"><span>Password</span></label>
</div>
<div class="con-pass">
<input type="text" id="c-pass" required />
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
</div>
</div>
</form>
</div>
You can use white-space: nowrap; for that :
#confirm {
white-space: nowrap;
}
Here is a resource for the white-space property in CSS.
Use white-space: nowrap; for class con-pass
You can also insert a in your html. That will ensure the two Words are kept on the same line:
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera
Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
I found a similar question to mine here but the accepted answer did not fix my issue.
Bring element to front using CSS
I have made custom check boxes and I am trying to bring them to the front. Here is my html:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title">
<img src="" alt="WifiFinder.img" id="WifiFinderImg">
<input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
<h2>Username</h2>
<input class="userinfo" type="text" value="Username Here"/>
<h2>Email Address</h2>
<input class="userinfo" type="email" value="Email Address"/>
<h2>Date of Birth</h2>
<input class="userinfo" type="date" value="DD/MM/YYYY"/>
<h2>Password</h2>
<input class="userinfo" type="password" value="Password"/>
<h2>Retype Password</h2>
<input class="userinfo" type="password" value="Password"/>
<label class="container">I have Read and Accept the Terms and Conditions
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">I have Read and Accept the Privacy Statement
<input type="checkbox">
<span class="checkmark"></span>
</label>
<input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
The CSS for this is as follows:
:root{
--main-color: #0052CC;
--secondary-color: #172B4D;
--tertiary-color: #FFFFFF;
}
body {
background-color: var(--tertiary-color);
margin: 0%;
}
#Title {
position: absolute;
width: 100%;
height: 30%;
background-color: var(--main-color);
margin: 0%;
}
#WifiFinderImg{
position: absolute;
height: 100%;
width: 50%;
left: 0%;
bottom: 0%;
margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration{
font-size: x-large;
position: absolute;
height: 70%;
overflow-y: scroll;
bottom: 0%;
color: var(--main-color);
width: 100%;
text-align: center;
border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo{
font-size: large;
width: 40%;
border: 0px;
border-bottom: 1px var(--main-color) solid;
text-align: center;
color: lightgrey;
}
/*Customize the label*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 2%;
margin-bottom: 2%;
cursor: pointer;
font-size: x-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
position: relative;
opacity: 0;
cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--tertiary-color);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons{
position: relative;
margin-left: -10%;
margin-top: -5%;
margin-bottom: 2%;
top: 150%;
left: 5%;
font-size: x-large;
width: 20%;
height: 10%;
border: 1px var(--main-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover{
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons{
width: 15%;
height: 10%;
position: absolute;
top: 10%;
right: 2%;
border: 1px var(--tertiary-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover{
background-color: var(--tertiary-color);
border-color: var(--tertiary-color);
color: var(--main-color);
}
It seems to work when I change the position of the checkbox from relative to absolute, but then the problem is that they are on different parts of the page for different sized screens.
Add display: inline-block;
Here is the working Snippet
:root {
--main-color: #0052CC;
--secondary-color: #172B4D;
--tertiary-color: #FFFFFF;
}
body {
background-color: var(--tertiary-color);
margin: 0%;
}
#Title {
position: absolute;
width: 100%;
height: 30%;
background-color: var(--main-color);
margin: 0%;
}
#WifiFinderImg {
position: absolute;
height: 100%;
width: 50%;
left: 0%;
bottom: 0%;
margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration {
font-size: x-large;
position: absolute;
height: 70%;
overflow-y: scroll;
bottom: 0%;
color: var(--main-color);
width: 100%;
text-align: center;
border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo {
font-size: large;
width: 40%;
border: 0px;
border-bottom: 1px var(--main-color) solid;
text-align: center;
color: lightgrey;
}
/*Customize the label*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 2%;
margin-bottom: 2%;
cursor: pointer;
font-size: x-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
position: relative;
opacity: 0;
cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
position: relative;
top: 4px;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
display: inline-block; /* Added */
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--tertiary-color);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons {
position: relative;
margin-left: -10%;
margin-top: -5%;
margin-bottom: 2%;
top: 150%;
left: 5%;
font-size: x-large;
width: 20%;
height: 10%;
border: 1px var(--main-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons {
width: 15%;
height: 10%;
position: absolute;
top: 10%;
right: 2%;
border: 1px var(--tertiary-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover {
background-color: var(--tertiary-color);
border-color: var(--tertiary-color);
color: var(--main-color);
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title"> <img src="" alt="WifiFinder.img" id="WifiFinderImg">
<input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
<h2>Username</h2>
<input class="userinfo" type="text" value="Username Here"/>
<h2>Email Address</h2>
<input class="userinfo" type="email" value="Email Address"/>
<h2>Date of Birth</h2>
<input class="userinfo" type="date" value="DD/MM/YYYY"/>
<h2>Password</h2>
<input class="userinfo" type="password" value="Password"/>
<h2>Retype Password</h2>
<input class="userinfo" type="password" value="Password"/>
<label class="container">I have Read and Accept the Terms and Conditions
<input type="checkbox">
<span class="checkmark"></span> </label>
<label class="container">I have Read and Accept the Privacy Statement
<input type="checkbox">
<span class="checkmark"></span> </label>
<input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
</html>
The problem is indeed that you've used position relative and absolute amateur-ly (throughout the code).
Since you've mentioned that the checkboxes are used at multiple places, you need to a way to apply different styles. For that, I will add another class here.
Replace this:
<span class="checkmark"></span>
and this
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
With this:
<span class="checkmark customCheckmark"></span>
and this
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
.checkmark.customCheckmark {
position: absolute;
top: auto;
left: auto;
height: 25px;
width: 25px;
background-color: lightgray;
}
CSS-Tricks might be able to explain this in more depth.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Note: As a general rule of thumb, try not to use too many position relatives and absolutes, they mess up your CSS in most cases. If you're a beginner in CSS, try using Flexbox, it's much easier to learn and implement than conventional CSS.
I have a little question about CSS and image buttons. I searched and tryed many options but none of them worked for me.
I need to link my image button in the CSS style. When you push the image a new webpage opens where you can take a picture of yourself. But my image stays at the same position no matter what I change.
If I use the code that is written on How to link an image and target a new window then my image stays at the bottom.
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 80px 40px;
width: 350px;
height: 500px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
.user {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 65px);
}
button.imgbtn1 {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
h2 {
margin: 0;
padding: 0 0 20px;
color: deepskyblue;
text-align: center;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="submit"]:hover {
background: #deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
<div class="loginBox">
<img src="user.png" class="user">
<h2>Meld u aan</h2>
<form>
<p>Naam</p>
<input type="text" name="" placeholder="Naam">
<p>Voornaam</p>
<input type="text" name="" placeholder="Voornaam">
<p>Bedrijf</p>
<input type="text" name="" placeholder="Bedrijf">
<p>Doel
<p>
<input type="text" name="" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
<img src="foto.png" />
</form>
</div>
</body>
</html>
After playing around for a while I have found something that works.
html:
<center><div id = "imgPositioning">
<img id = "imgOne" class = "user" src="user.png" />
<img src="foto.png" id = "imgTwo" class="user"/>
</div></center>
css:
#imgPositioning{
display:inline;
}
#imgTwo{
height:100px;
width:200px;
}
#imgOne{
height:50px;
width:100px;
float:center;
}
The answer. (found it with help from a friend). Now I need to do a bit of restyling.
Thanks for the answers! ;)
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.user-picture {
position: absolute;
top: -25px;
width: 100%;
}
.user-picture-box {
max-width: 150px;
height: 150px;
margin: 0 auto;
position: center;
}
.user-picture-image {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 70px);
}
.user-create-picture {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.user-create-picture ('img') {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.login-box {
display: block;
position: relative;
background-color: rgba(0, 0, 0, .5);
margin: 100px auto 0px auto;
max-width: 350px;
}
.login-form {
padding: 80px 20px 20px 20px;
}
.login-box h2 {
color: deepskyblue;
text-align: center;
}
.login-box label {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.login-box input {
width: 100%;
}
.login-box input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
margin-bottom: 20px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
background: deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="login-box">
<div class="user-picture">
<div class="user-picture-box">
<img src="user.png" class="user-picture-image">
<a href="http://localhost/Form/foto.html" class="user-create-picture">
<img src="foto.png" height="70px" width="70px">
</a>
</div>
</div>
<div class="login-form">
<h2>Meld u aan</h2>
<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" placeholder="Naam">
<label for="voornaam">Voornaam</label>
<input type="text" id="voornaam" name="voornaam" placeholder="Voornaam">
<label for="bedrijf">Bedrijf</label>
<input type="text" id="bedrijf" name="bedrijf" placeholder="Bedrijf">
<label for="doel">Doel</label>
<input type="text" id="doel" name="doel" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
</form>
</div>
</div>
</body>
</html>
end result picture