I created two buttons that I would like to place under my input login boxes. I want it to be responsive so I used the absolute value but when I move them, the buttons suddenly overlap! Any solutions? Here is my index and stylesheet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0px;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>
Try this...
There is no relation between position:absolute and responsive design.
Since you intend to do this with absolute, Just place your button div into the form.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn{
margin-top:30px;
font-size: 14px !important;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</form>
</header>
</body>
</html>
Edit: This is for your comment. Also i recommend you to make use of Media queries for responsive layout.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn {
margin-top: 30px;
font-size: 14px !important;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
.btns {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
top: 300px;
left: 15%;
right: 0px;
height: auto;
font-size: 14pt;
margin: 0px auto;
padding: 15px;
}
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div class="btns">
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>
Instead of using <a></a> tag to create buttons you can use <button></button> tag to create button. This will avoid the overlapping of buttons.
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p><br>
<input type="text" name="Apple ID"><br>
<p id="space-password">Password:</p><br>
<input type="password" name="Password">
</form>
<div>
<button class="btn btn-full" >Login</button>
<button class="btn btn-ghost">Don't have an acount? Sign up! </button>
</div>
</header>
</body>
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>
im having issues with my login page, so im trying to make the page responsive to the mobile version, but there's some problems:
1.When the page turn to the mobile version, the login box shrinks but the left side of it just goes over the the screen, same goes to the top part of it.
2.The footer won't stick to the bottom of the page.
3.Is there a way to create some space around the login box when it shrinks?
I included a picture of when the page turn to the mobile version, and its the exact appearance i got when i open it from my LenovoA2010 which is 480x854 pixels wide :
Picture Here!
Sorry if i wasn't clear enough, this is my first question here and i just started learning Front-End Web Development like about 2 weeks ago, feeling real noob here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
}
form {
width: 380px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!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>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
since you gave the white box a fixed 380px width it will not react to screen change what you can do instead is to use max-width with width to get what you want
.your-form{
max-width: 380px;
width: 100%;
}
this way you tell your box to expand as much as it wants but never go beyond 380px. this way you get a nice responsive form
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
padding: 20px;
}
form {
max-width: 380px;
width: 100%;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!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>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
I'm currently making a to-do list. The problem that I have is after applying basic css, the + text inside the button is a little bit upward. I couldn't understand why it is and I want to apply margin-top but how can I specifically apply it to the text inside the button?
Image:
enter image description here
Html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Kworth To Do List</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="box" id="heading">
<h1> <%= kindOfDay %> </h1>
</div>
<div class="box">
<% for (i = 0; i < newListItem.length; i++) { %>
<div class="item">
<input type="checkbox">
<p> <%= newListItem[i] %> </p>
</div>
<% }; %>
<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="button" class="test">+</button>
</form>
</div>
<ul>
</ul>
</body>
</html>
Css:
html {
background-color: #E4E9FD;
background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
min-height: 1000px;
font-family: 'helvetica neue';
}
h1 {
color: #fff;
padding: 10px;
}
.box {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}
#heading {
background-color: #A683E3;
text-align: center;
}
.item {
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked+p {
text-decoration: line-through;
text-decoration-color: #A683E3;
}
input[type="checkbox"] {
margin: 20px;
}
p {
margin: 0;
padding: 20px;
font-size: 20px;
font-weight: 200;
color: #00204a;
}
form {
text-align: center;
margin-left: 20px;
}
button {
min-height: 50px;
width: 50px;
border-radius: 50%;
border-color: transparent;
background-color: #A683E3;
color: #fff;
font-size: 30px;
padding-bottom: 6px;
border-width: 0;
}
input[type="text"] {
text-align: center;
height: 60px;
top: 10px;
border: none;
background: transparent;
font-size: 20px;
font-weight: 200;
width: 313px;
}
input[type="text"]:focus {
outline: none;
box-shadow: inset 0 -3px 0 0 #A683E3;
}
::placeholder {
color: grey;
opacity: 1;
}
footer {
color: white;
color: rgba(0, 0, 0, 0.5);
text-align: center;
}
Remove padding-bottom: 6px from button.
html {
background-color: #E4E9FD;
background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
min-height: 1000px;
font-family: 'helvetica neue';
}
h1 {
color: #fff;
padding: 10px;
}
.box {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}
#heading {
background-color: #A683E3;
text-align: center;
}
.item {
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked+p {
text-decoration: line-through;
text-decoration-color: #A683E3;
}
input[type="checkbox"] {
margin: 20px;
}
p {
margin: 0;
padding: 20px;
font-size: 20px;
font-weight: 200;
color: #00204a;
}
form {
text-align: center;
margin-left: 20px;
}
button {
min-height: 50px;
width: 50px;
border-radius: 50%;
border-color: transparent;
background-color: #A683E3;
color: #fff;
font-size: 30px;
/*padding-bottom: 6px;*/ /* REMOVE THIS */
border-width: 0;
}
input[type="text"] {
text-align: center;
height: 60px;
top: 10px;
border: none;
background: transparent;
font-size: 20px;
font-weight: 200;
width: 313px;
}
input[type="text"]:focus {
outline: none;
box-shadow: inset 0 -3px 0 0 #A683E3;
}
::placeholder {
color: grey;
opacity: 1;
}
footer {
color: white;
color: rgba(0, 0, 0, 0.5);
text-align: center;
}
<div class="box" id="heading">
<h1> <%= kindOfDay %> </h1>
</div>
<div class="box">
<% for (i = 0; i < newListItem.length; i++) { %>
<div class="item">
<input type="checkbox">
<p> <%= newListItem[i] %> </p>
</div>
<% }; %>
<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="button" class="test">+</button>
</form>
</div>
<ul>
</ul>
</body>
</html>
You would need to specify line-height to be the same as the height, which is 50px in your case.
Also why you have top property in input[type="text"] when it would only work if you have position property set as relative or absolute.
If at all possible what I'd like to do is split the page into 3 sections and and have each button take up an entire section so its easy to click.
I have these set up how I thought it would work displaying the buttons like so:
Last
Next
Stop
What I end up with is completely wrong for some reason. It displays Last and Stop on the bottom over the page ontop of one another.
Code:
#keyframes hue {
0% {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(-360deg);
-webkit-filter: hue-rotate(-360deg);
}
}
.canvas-container{
position: relative;
width: 100%;
height: 100%;
}
#freq {
background: linear-gradient(#ff0088, red);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
body {
background:#000;
overflow: hidden;
}
#freq.animateHue, body.animateHue {
animation-name: hue;
animation-duration: 500s;
animation-delay: 1s;
animation-iteration-count: infinite;
-webkit-animation-name: hue;
-webkit-animation-duration: 500s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
}
#title, #artist, #album {
position: relative;
text-align: center;
width: 100%;
z-index: 999;
font-weight: 100;
font-family: "Roboto", sans-serif;
/*font-size: 100px;*/
color: #fff;
visibility: hidden;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
}
#song_info_wrapper {
position: absolute;
width: 100%;
text-align: center;
}
#title {
font-size: 10vw;
}
#artist {
font-size: 3vw;
}
#album {
font-size: 3vw;
/*font-size: 40px;*/
margin-bottom: 0;
}
input, #loading {
position: absolute;
top: 45%;
left: 40%;
display: block;
z-index: 999;
}
#songName {
position: absolute;
top: 80%;
right: 19%;
display: block;
z-index: 999;
width: 100%;
font-weight: 100;
font-family: "Roboto", sans-serif;
/*font-size: 100px;*/
color: #fff;
letter-spacing: -.05em;
text-shadow: 0px 0px 10px rgba(20, 20, 20, 20);
margin-bottom: 15px;
font-size: 3vw;
}
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
#playSampleButton {
padding: 10px 25px;
font-size: 13vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: relative;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin: auto;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#buttonSmall {
padding: 10px 25px;
font-size: 10vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: absolute;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#buttonStop {
padding: 10px 25px;
font-size: 10vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: absolute;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#loading {
display: inline-block;
top: 44px;
left: 110px;
font-family: "Roboto", sans-serif;
font-size: 12px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#media screen and (min-width: 1000px) {
#title {
font-size: 100px;
}
#artist, #album {
font-size: 40px;
}
}
#media screen and (max-width: 500px) {
#artist, #album {
font-weight: 300;
font-size: 4vw;
}
}
#media screen and (max-width: 436px) {
#artist, #album {
font-weight: 300;
font-size: 4.5vw;
}
#title {
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis -->
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div id="c3">
<button id="playSampleButton" type="button" onClick="playNext()">Next</button>
</div>
<div id="c1">
<button id="buttonSmall" type="button" onClick="playLast()">Last</button>
</div>
<br />
<br />
<div id="c2">
<button id="buttonStop" type="button" onClick="playStop()">Stop</button>
</div>
</div>
</body>
</html>
The problem is your button heights and the heights of the divs they are in. First, you have not given the c1/c2/c3 containers a height, so setting the button height to 100% will not work - they are 100% of undefined.
Below, I did not completely solve this for you, but I did over-ride the heights for these elements and you can see the difference (you'll need to look at the demo "Full Page" (link at top-right) to see it...).
#c1, #c2, #c3{height:30vh !important;}
#playSampleButton,
#buttonSmall,
#buttonStop{height:20vh !important;}
html, body{width: 100%;height:100%;margin:0px;}
.canvas-container{position:relative;width:100%;height:100vh;}
#freq{background:linear-gradient(#ff0088, red);position:absolute;left:0;right:0;margin:0 auto;}
body{background:#000;overflow:hidden;}
#freq.animateHue, body.animateHue{animation-name:hue;animation-duration:500s;animation-delay:1s;animation-iteration-count:infinite;-webkit-animation-name:hue;-webkit-animation-duration:500s;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;}
#title, #artist, #album{position:relative;text-align:center;width:100%;z-index:999;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;visibility:hidden;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin-bottom:15px;}
#song_info_wrapper{position:absolute;width:100%;text-align:center;}
#title{font-size:10vw;}
#artist{font-size:3vw;}
#album{font-size:3vw;font-size:40px;margin-bottom:0;}
input, #loading{position:absolute;top:45%;left:40%;display:block;z-index:999;}
#songName{position:absolute;top:80%;right:19%;display:block;z-index:999;width:100%;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;letter-spacing:-.05em;text-shadow:0px 0px 10px rgba(20, 20, 20, 20);margin-bottom:15px;font-size:3vw;}
#c1, #c2{width:33%;}
#c3{width:auto;}
#playSampleButton{padding:10px 25px;font-size:13vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:relative;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin:auto;background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#buttonSmall{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#buttonStop{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#loading{display:inline-block;top:44px;left:110px;font-family:"Roboto", sans-serif;font-size:12px;}
#keyframes hue{
0%{filter:hue-rotate(0deg);-webkit-filter:hue-rotate(0deg);}
100%{filter:hue-rotate(-360deg);-webkit-filter:hue-rotate(-360deg);}
}
#media screen and (min-width:1000px){
#title{font-size:100px;}
#artist, #album{font-size:40px;}
}
#media screen and (max-width:500px){
#artist, #album{font-weight:300;font-size:4vw;}
}
#media screen and (max-width:436px){
#artist, #album{font-weight:300;font-size:4.5vw;}
#title{}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis -->
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div id="c3">
<button id="playSampleButton" type="button" onClick="playNext()">Next</button>
</div>
<div id="c1">
<button id="buttonSmall" type="button" onClick="playLast()">Last</button>
</div>
<br />
<br />
<div id="c2">
<button id="buttonStop" type="button" onClick="playStop()">Stop</button>
</div>
</div>
</body>
</html>
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>