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.
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;
}
How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.
HTML & CSS
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.registerbox-front ::placeholder {
padding-left: 10px;
}
.box-firstline, .box-secondline {
margin-top: 10px
}
<body>
<div class="registerbox">
<div class="inner-registerbox">
<div class="registerbox-front">
<h2>BORANG PENDAFTARAN MURID</h2>
<form>
<section>
<div class="box-firstline">
<div style="float:left;margin-right:25px;">
<label for="idmurid">ID Murid</label> <br />
<input type="text" name="idmurid" class="input-box2" placeholder="ID Murid" required>
</div>
<div style="float:left;">
<label for="namamurid">Nama Murid</label> <br />
<input type="text" name="namamurid" class="input-box3" placeholder="Nama Murid" required>
</div>
</div>
<br style="clear:both;" />
</section>
<div class="box-secondline">
<div style="float:left;margin-right:25px;">
<label for="namakelas">Nama Kelas</label> <br />
<input type="text" name="namakelas" class="input-box2" placeholder="Nama Kelas" required>
</div>
<div style="float:left;">
<label for="katalaluan_murid">Kata Laluan</label> <br />
<input type="password" name="katalaluan_murid" class="input-box3" placeholder="Katalaluan" required>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
I took the code you posted, removed the ::placeholder padding and then added
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
And it adjusted the the text to match the placeholder.
Here is the full CSS:
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.box-firstline, .box-secondline {
margin-top: 10px;
}
Having trouble getting rid of white space around my body element. I am setting margin and padding to 0 in both my css and html, but when I run the application the body has a margin of 8px. When I look in the developer tools it says the body styles is coming from User Agent Stylesheet. I think my problem has something to do with that. Any help would be greatly appreciated!
html {
overflow: hidden;
background-size: 100% 100%;
background-color: lightgrey;
margin-bottom: 0;
margin: 0;
padding: 0;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #22aedc;
overflow: hidden;
height: 60px;
}
/* Style the links inside the navigation bar */
.topnav h2 {
color: #FFFFFF;
text-align: center, center;
align-content: center, center;
//padding: 4px 10px;
text-decoration: none;
font-size: 21px;
font: "Tahoma";
overflow: hidden;
}
footer {
font: "Tahoma";
font-size: 13px;
opacity: 0.8;
}
body {
background-image: url('/Angular/src/assets/img/kraft.png');
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 330px;
background-attachment: fixed;
margin: 0;
overflow: visible;
padding: 0;
}
.dv-panel {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
background: #f6f8f9;
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}
.dv-menuPanel {
#extend .dv-panel;
background: #f9f9f9;
max-width: 1200px;
margin: auto;
// Added 'row' class to make height match
// that of children
//overflow: hidden;
.dv-menuPanelContent {
min-height: 300px;
background: white;
padding: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
.menuPanelHeader {
background: #5bc0de;
color: white;
h3 {
padding: 10px;
margin-top: 0;
}
}
.menuPanelHeaderAlt {
color: #555;
h3 {
padding: 10px;
margin-top: 0;
//font-size: 32px;
}
}
.contentPanelHeaderAlt {
color: #555;
}
}
}
.dv-panel, .dv-menuPanel, .dv-menuPanelAlt {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
background: #f6f8f9;
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}
.dv-panel {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
background: #f6f8f9;
}
.dv-button {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 17px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
}
.dv-button:hover {
background-color: #EEE;
color: black;
}
.db-button:active {
background-color: aqua;
color: white;
}
.plant-button {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 10px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 14px;
}
.plant-button:hover {
background-color: #EEE;
color: black;
}
.plant-button:active {
background-color: aqua;
color: white;
}
.pagination {
display: block;
background-color: white;
border-color: white;
padding: 10px 16px;
width: 50px;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: grey;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
border-top: 40px;
}
.pagination:hover {
background-color: #EEE;
color: black;
}
.pagination:active {
background-color: aqua;
color: white;
}
#back {
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
background-color: #008cba;
border-color: #0079a1;
color: white;
cursor: pointer;
border: 1px solid transparent;
font-weight: 400;
text-align: center;
display: inline-block;
padding: 8px 12px;
outline: none
}
#back:hover {
background-color: white;
color: black;
}
#back:active {
background-color: #6e6d6f;
color: white;
}
.import-header {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 17px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
}
<html>
<head>
<link rel="stylesheet" href="/Angular/src/assets/css/fontawesome.min.css" />
</head>
<body style="background-color: lightgrey; width: 100%; margin: 0px; padding: 0px">
<div style="padding-top: 5px; padding-left: 5px; padding-right: 5px">
<div class="topnav">
<h2 style="text-align: center">Import</h2>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
<div *ngIf="!isTypeCollapsed" style="justify-content:center; padding-top: 155px; padding-bottom: 375px">
<div class="dv-panel" style="width: 400px; margin: auto; padding-bottom: 2px">
<div *ngFor="let type of types">
<button (click)="togglePlants(type)" class="dv-button">
{{type}}
</button>
</div>
</div>
</div>
<div *ngIf="isPlantsCollapsed" style="justify-content:center; padding-top: 125px; padding-bottom: 129px">
<div class="dv-panel" style="width: 400px; margin: auto; overflow: hidden; margin-left: 733px">
<button (click)="toggleBack()" class="far fa-arrow-left" id="back"></button>
<div *ngFor="let plant of plants">
<button class="plant-button" (click)="hidePlants(plant)">{{ plant }}</button>
</div>
</div>
</div>
<div *ngIf="isImportPageCollapsed" style="justify-content:center; padding-top: 165px; padding-bottom: 283px">
<div class="dv-panel" style="width: 400px; height: 300px; margin: auto; padding-bottom: 100px; background-color: #f9f9f9">
<button (click)="toggleBackFromImportPage()" class="far fa-arrow-left" id="back"></button>
<button (click)="toggleHome()" class="far fa-home" id="back" style="margin-left: -9px"></button>
<div>
<button class="import-header">
{{ importPlant }} ~ {{importType}}
</button>
<div class="form-group" style="width: 370px; margin: auto 0px auto 0px; position: relative; display: block; padding-top: 30px; padding-bottom: 45px; align-content: center">
<div class="input-group" style="margin-right: 125px; position: relative; display: table; border-collapse: separate">
<span class="input-group-addon fad fa-file-search" style="display: table-cell; background: #5bc0de; color: white; font-size: 14px; padding: 10px 12px"></span>
<input [value]="file?.name" class="form-control" readonly type="text" style="text-align:justify; padding: 10px 90px; outline: none; box-sizing: border-box; background-color: #EEE; opacity: 1; border: 1px solid #ccc">
<label style="opacity: 0; width: 100%; position: absolute; height: 100%; top: 0; left: 0; z-index: 999; cursor: pointer; outline: none; background-color: #f9f9f9">
<input style="position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; align-items:baseline; text-align: center" id="fileInput; background-color: #f9f9f9" type="file" accept=".xls,.xlsx" hidden (change)="getFileDetails($event)">
</label>
</div>
</div>
<div style="padding-left: 140px">
<button (click)="onImportClick()" class="dv-button" style="width: 100px; padding: 4px 6px">
Import
</button>
</div>
</div>
</div>
</div>
<footer style="padding-top: 0px; padding-bottom: 7px; text-align:center">
<p>Version 1.0.0 © 2021 DreamVersion, LLC.</p>
</footer>
</body>
</html>
INDEX.HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="margin: 0px !important; padding: 0px !important">
<app-root></app-root>
</body>
</html>
I'm a new to css and i really can't fix all as i want...
How can i align vertical the h1 to the start of user form?
but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div.
I'm not sure if i have positioned good the div but i want it centred but not too low on the page.
thanks to everyone!
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
input[type=text],
input[type=password]{
width: 65%;
display: table;
margin: 0 auto;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
width: 65%;
height: 20%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display:block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
<hr>
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</body>
</html>
If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.
h1 {
font-size: x-large;
width: 65%;
margin: 0 auto;
}
I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.
you can use text-align: center; and vertical-align:top;
If your problem still exists, please explain more clearly what you want.
Use text-align: center; to center text within container.
To make it easier to align your elements, just wrap them into one div and adjust the div with CSS instead of dealing with each single element.
Here is an example of what you can do.
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
.form {
width: 75%;
margin: auto;
}
.form-bottom {
text-align: center;
}
input[type=text],
input[type=password] {
display: table;
margin: 0 auto;
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
height: 20%;
width: 100%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display: block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<body>
<div class="container">
<div class="form">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
</div>
<hr>
<div class="form-bottom">
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</div>
</body>