I am trying to create a simple form using material design component and it doesn't work properly placeholder doesn't removed when i starts entering the details how can i do this and i also tried using the filled also but on that also i am not able to remove the background placeholder here is my tried code and i have added all the material library required for this https://material.io/develop/web/docs/getting-started
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#get-started {
background-color: #9e0b0f;
border: 0;
border-radius: 0;
font-family: "NewsGothicBold", san-serif !important;
text-transform: uppercase;
margin: auto;
display: block;
padding: 10px 22px 5px 25px;
font-size: 18px;
font-weight: normal;
margin-top: 20px;
}
.forms {
font-family: "NewsGothicBold", san-serf;
width: 390px;
margin: 20px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
.mdc-text-field {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
#media (max-width: 450px) {
.forms {
font-family: "NewsGothicBold", san-serf;
width: 330px;
margin-top: 20px !important;
margin: 0 auto;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.mdc-text-field {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
}
</style>
</head>
<body>
<div class="forms">
<form>
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id">Your Name</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="my-label-id"
/>
</label>
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id"
>Your EMAIL</span
>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="my-label-id"
/>
</label>
<button class="mdc-button mdc-button--raised mt-10" id="get-started">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
</button>
</form>
</div>
</body>
</html>
Hello, I tried to use your code and it looks like the input is at the front and the placeholder your saying is at the back. If you still don't understand me. Remove the class on the input like this:
<input
type="text"
//remove the class
aria-labelledby="my-label-id"
/>
so I think you have to use other form design. Or like this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>
#get-started {
background-color: #9e0b0f;
border: 0;
border-radius: 0;
font-family: "NewsGothicBold", san-serif !important;
text-transform: uppercase;
margin: auto;
display: block;
padding: 10px 22px 5px 25px;
font-size: 18px;
font-weight: normal;
margin-top: 20px;
}
.forms {
font-family: "NewsGothicBold", san-serf;
width: 390px;
margin: 20px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
input[type="text"] {
width: 100%;
padding: 20px;
box-sizing: border-box;
height: 46px;
border: 1px solid rgb(172, 172, 172);
border-radius: 4px;
}
.mdc-text-field--outlined {
height: 56px;
overflow: visible;
}
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
.mdc-text-field {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
#media (max-width: 450px) {
.forms {
font-family: "NewsGothicBold", san-serf;
width: 330px;
margin-top: 20px !important;
margin: 0 auto;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.mdc-text-field {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
}
</style>
</head>
<body>
<div class="forms">
<form>
<label class="mdc-text-field mdc-text-field--outlined">
<input
type="text"
placeholder="Your Name"
aria-labelledby="my-label-id"
/>
</label>
<label class="mdc-text-field mdc-text-field--outlined">
<input
type="text"
placeholder="Your Name"
aria-labelledby="my-label-id"
/>
</label>
<button class="mdc-button mdc-button--raised mt-10" id="get-started">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
</button>
</form>
</div>
</body>
</html>
let me know if I helped, Good Luck. Take Care😀😀😀!!!
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'm trying to make a typing test and I'm having trouble trying to make the textarea exactly in the center. I've tried align-items, align-self, align-content, but nothing works. Here's what my code looks like:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
margin:20px
}
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<textarea rows="3"></textarea>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
How do I center the textarea even if the user tries to resize the window?
Your textarea didn't work because of margin.
You set width: 100%; and margin: 20px;, so the textarea went 20px left.
You can solve it by removing margin: 20px(First example) or adding new div that has 20px padding and contains textarea.(Second example).
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
}
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<textarea rows="3"></textarea>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
.TextControl {
padding: 0 20px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
}
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<div class="TextControl"><textarea rows="3"></textarea></div>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
Basically made a flex container around the text area, and centered all its contents
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Impact";
}
body{
background-color: grey;
}
.container{
width: 80vmin;
padding: 50px 30px;
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 20px 40px;
}
.stats{
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
textarea{
align-content: center;
resize: none;
width: 100%;
border-radius: 5px;
padding: 10px 5px;
font-size: 16px;
margin:20px
}
/* new code here */
.testbox{
display: flex;
align-items: center;
justify-content: center; }
button{
float: right;
margin-top: 20px;
background-color: gold;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin: 10px;
}
button:hover{
background-color:rgb(66, 154, 209)
}
button:active{
background:#003659
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>My Typing Test</title>
<link rel="stylesheet" href="Test.css" />
</head>
<body>
<div class="container">
<div class="stats">
<p>Time: <span id="time">0s</span></p>
<p>WPM: <span id="wpm">0</span></p>
</div>
<div id="words" onmousedown="return false"
onselect="return false">
</div>
<!-- new code here --> <div class="testbox" > <textarea
rows="3"></textarea> </div>
<div class= "ButtonControl">
<button id= "Start Timer">Start Test</button>
<button id= "Reload Page">Reset Test</button>
</div>
</div>
<script src="Test.js"></script>
</body>
</html>
try to use in the container with position: relative
and position absolute in the texterea,
then you can define left: some px...
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;
}
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
Recently I made a post to see if anyone was able to help me horizontally align my div to the center of my page. After some tweaking I was able to vertically align my LoginBox to where I needed it to be but sadly, I dont seem to be able to move the Username section and Password section to where I would like this to go, I would appreciate any support given and I understand this is probably very simple to achieve but as someone who is pretty new to coding I love to see the help and support if I don't understand something, I've provided the source code below, and I have also provided a jsfiddle incase it is needed. https://jsfiddle.net/BeastFox/36vet66q/
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="LoginBox" style="">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</body>
</html>
And here is the css.
body,html {
background: repeating-linear-gradient(
to right,
#141517,
#141517 30px,
#1d1f21 30px,
#1d1f21 40px
);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
}
Thank you for any help that you can provide me with,
Your's most sincerely,
David.
You can align the LoginBox content by...
Wrapping the content in new div.
Adding flexbox properties to LoginBox, which will position the new div.
fiddle
body,
html {
background: repeating-linear-gradient( to right, #141517, #141517 30px, #1d1f21 30px, #1d1f21 40px);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
display: flex;
align-items: center;
justify-content: center;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
margin-bottom: 1em; /* create space between 'Login' and inputs */
}
<div class="LoginBox" style="">
<div class="LoginBox-inner">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</div>
Changed your css a bit. Added a wrapper element to the fields. Set the parent element(LoginBox) to display:table and element_wrapper to display:table-cell;. Then vertically align the element_wrapper.
<div class="element_wrapper">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
Refer this fiddle https://jsfiddle.net/07753vwx/