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
Related
I've created a login form using html and css. Everything was okay but then there is a problem arises when I tried to resize the width and height of the window screen by cursor. Contents inside the form are overlapping each other when I'm resizing the window screen from the bottom by cursor. I've styled the display of the body as flex but I don't know why this is happening.
Before resizing the window screen
After resizing the window screen from bottom
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
height: 70%;
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Your .container and body heights are fixed values which means the content won't have any affect on their layout once you start reducing the height of the window.
Try using min-height instead to allow the content to affect their layout:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
min-height: 100vh; /** min-height used here instead */
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
min-height: 70%; /** min-height used here instead */
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I am making this google clone, and when the dropdown is inside a viewport width enough, it looks fine, but if the viewport is small it goes behind the input and it looks transparent, as it shows in this image:
Do you guys know how can I fix this? Try it in a responsive viewport please.
You can see it in: https://diefonro.github.io/HTML-CSS
PD: I have tried to modify the z-index but it doesn't work
<!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" />
<title>Google Clone Optimized (by Diefonro)</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<div class="nav">
<div id="nav-g-i">
<a class="menu-item" href="#">Gmail</a>
<a class="menu-item" href="https://google.com/imghp">Images</a>
</div>
<div class="" id="nav-gr-a">
<div class="dd-cont">
<div class="grid">
<img
id="grid"
src="assets/icons/apps_black_24dp.svg"
alt="apps-icon"
/>
</div>
<div class="drop-d">
<div class="dd-item">
<img
id="dd-search"
src="assets/icons/google-logo-dd.png"
alt="google-search-icon"
/>
<p>Search</p>
</div>
<div class="dd-item">
<img
id="dd-maps"
src="assets/icons/google-maps-dd.png"
alt="google-maps-icon"
/>
<p>Maps</p>
</div>
<div class="dd-item">
<img
id="dd-keep"
src="assets/icons/google-keep-dd.png"
alt="google-keep-icon"
/>
<p>Keep</p>
</div>
<div class="dd-item">
<img
class="dd-drive"
src="assets/icons/Google_Drive_dd.png"
alt="google-keep-icon"
/>
<p>Drive</p>
</div>
<div class="dd-item">
<img
class="dd-calendar"
src="assets/icons/512px-Google_Calendar_icon_dd.png"
alt="google-calendar-icon"
/>
<p>Calendar</p>
</div>
<div class="dd-item">
<img
class="dd-photos"
src="assets/icons/google_photos-dd.png"
alt="google-photos-icon"
/>
<p>Photos</p>
</div>
</div>
</div>
<img
id="profile-pic"
src="assets/icons/account_circle_black_24dp.svg"
alt="account-icon"
/>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="logo-cont">
<img
id="google-logo"
src="assets/images/googlelogo_color_272x92dp.png"
alt="google-logo"
/>
</div>
<div class="input-cont">
<input class="input-g" type="text" />
<img
src="assets/icons/search_black_24dp.svg"
alt="search-icon"
class="search-i"
/>
<img
class="mic"
src="assets/icons/Google_mic.svg.png"
alt="voice-search-icon"
/>
</div>
<div class="btn-cont">
<button class="custom-btn">Google Search</button>
<button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
</div>
<span class="s-lang"
>Google offered in:
<a href="#" class="s-link"
><div class="ll">Español (Latinoamérica)</div></a
>
</span>
</section>
</main>
<footer>
<div class="footer-cont">
<div class="top-footer">
<span class="f1">Colombia</span>
</div>
<div class="bottom-footer">
<div class="left-footer">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="right-footer">
Privacy
Terms
Settings
</div>
</div>
</div>
</footer>
</body>
</html>
* {
margin: 0;
}
html{
min-width: 100vw;
overflow-y: hidden;
}
body {
font-family: Arial, sans-serif;
}
nav {
text-align: right;
position: relative;
top: 9px;
right: 8px;
}
#nav-g-i {
display: inline-block;
position: relative;
top: 2px;
right: 23px;
}
#nav-gr-a {
display: inline-block;
position: relative;
top: 5px;
right: 10px;
}
#grid,
#profile-pic {
opacity: 50%;
}
#google-logo{
width: 50%;
max-width: 272px;
}
section {
text-align: center;
position: relative;
top: 24px;
}
input{
position: relative;
bottom: 2px;
width: 80%;
word-wrap: break-word;
/* max-width: 90%; */
line-height: 17px;
border: none;
outline: none;
}
.input-cont {
max-width: 553px;
width: 70%;
height: 16px;
position: relative;
bottom: 2px;
right: 1px;
color: #222;
border: 1px solid #dfe1e5;
font-size: 13px;
padding: 14px;
border-radius: 80px;
margin: 24px 0px;
display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(40, 40, 41, 0);
}
.input-cont .mic {
position: absolute;
top: 10px;
right: 11px;
width: 23px;
}
.input-cont .search-i {
position: absolute;
top: 10px;
left: 11px;
max-width: 7.4%;
opacity: 40%;
}
#grid {
position: relative;
bottom: 3px;
margin-right: 16px;
}
.menu-item {
font-size: 13px;
color: #5b5f63;
text-decoration: none;
position: relative;
bottom: 8px;
margin-right: 10px;
}
.menu-item:hover {
text-decoration: underline;
}
#profile-pic {
width: 32px;
height: 32px;
}
.btn-cont {
position: relative;
top: 3px;
}
.custom-btn {
background-color: #f2f2f291;
color: #a2a8af;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: #222;
border-radius: 5px;
}
.custom-btn:first-of-type {
margin-right: 7px;
}
.custom-btn:hover {
border: 1px solid #c6c6c656;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
.custom-btn:active {
border: 1px solid cornflowerblue;
}
.drop-d {
width: 285px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
right: 11px;
border-radius: 12px;
display: none;
}
.grid:hover {
display: inline-block;
}
.dd-item:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.dd-item {
margin-top: 10px;
display: inline-block;
width: 70px;
padding: 6px 3px;
}
.dd-item > img {
height: 50px;
width: 50px;
}
.dd-item > p {
color: rgba(0, 0, 0, 0.87);
margin: 0;
margin-top: 15px;
margin-bottom: 5px;
}
.dd-cont {
display: inline-block;
}
.dd-cont:hover .drop-d {
display: block;
}
.s-lang {
font-size: 13px;
color: #333;
position: relative;
top: 30px;
right: 3px;
}
.s-lang a {
text-decoration: underline;
}
.s-lang a:visited {
color: rgb(30, 30, 179);
}
.ll {
display: inline-block;
position: relative;
left: 3px;
}
.top-footer,
.bottom-footer {
font-size: 15px;
background-color: #f3f3f3;
color: #8a8686;
position: relative;
}
.top-footer{
border-bottom: 1px solid rgba(155, 155, 155, 0.267);
}
.left-footer a {
display: inline-block;
text-decoration: none;
padding: 14.5px;
font-size: 14px;
}
.right-footer a {
font-size: 14px;
margin-right: 10px;
padding: 13px;
text-decoration: none;
color: #8a8686;
}
.bottom-footer{
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom-footer a:hover{
text-decoration: underline;
}
span.f1 {
display: inline-block;
margin-left: 15px;
padding: 16px;
}
.a-li {
margin-left: 20px;
}
a:visited {
color: inherit;
}
.footer-cont {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
You have a lot of positioned elements, but none of them have any z-index, so all you have to do is add a z-index to your dropdown; with that said, the background of the dropdown is transparent currently, so the other elements will still show through. Just add a background color to it to fix that.
.drop-d
{
z-index: 1;
background-color: white;
}
So i'm making a login page for my website, and for some reason the website just kind of floats to the bottom right, so everytime i enter the website i have to manually scroll so it centers itself. I've tried searching for the problem but i cant seem to find it
screen of the problem here
this is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<title>Login</title>
</head>
<body>
<div class="hero">
<div class="form-box">
<div class="button-box">
<div id="knop"></div>
<button type="button" class="toggle-btn">log In</button>
<button type="button" class="toggle-btn">register</button>
</div>
<div class="social-icons">
<img src="../site/fotos/duimpje.jpg">
<img src="../site/fotos/duimpje.jpg">
<img src="../site/fotos/duimpje.jpg">
</div>
<form class="input-group">
<input type="text" class="input-field" placeholder="user id" required>
<input type="text" class="input-field" placeholder="enterpassword" required>
<input type="checkbox" class="check-box"><span>remember password</span>
<button type="submit" class="submit-btn">log in</button>
</form>
</div>
</div>
</body>
</html>
And this is the CSS
.hero{
height: 100%;
width: 100%;
background-image: url(../site/fotos/duimpje.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
.form-box{
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: white;
padding: 5px;
}
.button-box{
width: 220px;
margin: 35px auto;
position: relative;
box-shadow:0 0 20px 9px grey;
border-radius: 30px;
}
.toggle-btn{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
}
#knop{
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background:linear-gradient(to right, #ff105f,#ffad06);
border-radius: 30px;
transition: .5s;
}
.social-icons{
margin: 30px auto;
text-align: center;
}
.social-icons img{
width: 30px;
margin: 0 12px;
box-shadow: 0 0 20px 0 #7f7f7f3d;
cursor: pointer;
border-radius: 50%;
}
.input-group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
.input-field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: px solid #999;
outline: none;
background: transparent;
}
.submit-btn{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, #ff105f,#ffad06);
border: 0;
outline: none;
border-radius: 30px;
}
Most of the web-browsers add margin to the <body> element.
If you don't want that margin, you need to specify the following code in your CSS file:
body {
margin: 0;
}
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*/
}
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>