Whenever I vertically resize the webpage, the image will not stick within its parent container(banner) and instead overflows once the parent div is smaller than the image dimensions. This can be seen in the code snippet by viewing the borders of both the container and image as you vertically resize. Any way I can have the image shrink once the parent div becomes smaller than the image?
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', Arial, sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner{
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.banner img{
height: auto;
border: 3px solid red;
}
main{
display: flex;
flex: 4;
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
If you wrap the image in a div and then set both the wrapping div and img to height: 100% it should do the trick.
See snippet:
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', Arial, sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner{
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.img-wrap {
height: 100%;
text-align: right;
}
.banner img{
border: 3px solid red;
height: 100%
}
main{
display: flex;
flex: 4;
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<div class="img-wrap">
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
For the image, you can use a max-height in vh. I used 70vh, but you can adjust this to your needs.
For the text size, there is no max-font-size, so I did this using a media query.
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', 'Arial', sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner {
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.banner img {
height: auto;
border: 3px solid red;
max-height: 70vh; /* adjust image to small screens */
}
main {
display: flex;
flex: 4;
}
#media (max-height: 15rem) { /* adjust font size to small screens */
header {font-size:16.67vh;}
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
Related
I just created a contact Us form in HTML and CSS. I want a responsive page. In desktop everything works fine but When I try in mobile or tablet both contactForm and contactInfo shifts itself automatically into top and bottom position. I want to put them side by side in also mobile devices. I don't know why this is happening?
there are two parts in container:
contactForm
ContactInfo
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
.contact {
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: lightgreen;
}
.contact .content {
max-width: 800px;
text-align: center;
}
.contact .content h2 {
font-size: 36px;
font-weight: 500;
color: blue;
}
.contact .content p {
font-weight: 300;
color: blue;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.container .contactInfo {
width: 50%;
display: flex;
flex-direction: column;
}
.container .contactInfo .box {
position: relative;
padding: 20px 0;
display: flex;
}
.container .contactInfo .box .text {
display: flex;
margin-left: 20px;
font-size: 16px;
color: green;
flex-direction: column;
font-weight: 300;
}
.container .contactInfo .box .text h3 {
font-weight: 500;
color: red;
}
.contactForm {
padding: 40px;
background: #fff;
}
.contactForm h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactForm .inputBox {
position: relative;
width: 100%;
margin-top: 10px;
}
.contactForm .inputBox input,
.contactForm .inputBox textarea {
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid black;
outline: none;
resize: none;
}
.contactForm .inputBox input[type="submit"] {
width: 100px;
background: #000;
color: orange;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
#media (max-width: 991px) {
.contact {
padding: 50px;
}
.container {
flex-direction: column;
}
.container .contactInfo {
margin-bottom: 40px;
}
.container .contactInfo {
width: 100%;
}
}
</style>
<!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>Document</title>
</head>
<body>
<section class="contact">
<div class="content">
<h2>Reach Us</h2>
<p>
We would love to respond to your queries and help you succeed.<br />Feel
free to get in touch with us
</p>
</div>
<div class="container">
<!-- contact form -->
<div class="contactForm">
<form action="contact.php">
<h2>Send Query</h2>
<div class="inputBox">
<input type="text" name="" required="required" />
<span>Full Name</span>
</div>
<div class="inputBox">
<input type="email" name="" required="required" />
<span>Email Id</span>
</div>
<div class="inputBox">
<input type="number" name="" required="required" />
<span>Phone</span>
</div>
<div class="inputBox">
<input type="text" name="" required="required" />
<span>Address</span>
</div>
<div class="inputBox">
<textarea name="" id="" required="required"></textarea>
<span>Type your Query</span>
</div>
<div class="inputBox">
<input type="submit" name="" required="required" value="Send" />
</div>
</form>
</div>
<!-- reach us -->
<div class="contactInfo">
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Address</h3>
<p>AaBbbbbbbb,<br />fdafafdfa,<br />fdafafgafa</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Phone</h3>
<p>+91 91XXXXXXXXXX</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Email</h3>
<p>asdfghjkl.gmail.com</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
If you want .contactform and .contactinfo container side by side. You can do it in two simple ways
Instead of flex-direction: column, You can use flex-direction: row.
No need to write unnecessary CSS. Just remove the flex-direction property from the media query.
#media (max-width: 991px) {
.contact {
padding: 50px;
}
/* .container {
flex-direction: column;
} */
.container .contactInfo {
margin-bottom: 40px;
}
.container .contactInfo {
width: 100%;
}
}
I'd like to display a table on the left part of my app using CSS and HTML only.
Here's what I got:
And I would like to get this kind of result:
I can't find how to crop it and make it nice, and responsive.
Is it possible to define borders so the text and cases fit to any narrowing?
.container {
display: flex;
flex-wrap: wrap;
padding: 1em 1em 0 1em;
background: #FAFAFA;
}
.column {
width: 50%;
margin-bottom: 1em;
}
.title {
font-size: 0.875rem;
font-family: "Helvetica";
color: darkblue;
}
.rectangle-13 {
display: inline-block;
padding-left: 150px;
background-color: white;
width: 80%;
height: 26px;
padding: 8px 8px 8px 8px;
border-color: #cccccc;
border-width: 1px;
border-style: solid;
border-radius: 5px;
box-shadow: black;
font-family: "Helvetica";
letter-spacing: 1;
font-size: 16px;
}
<header>
<img href="google.com" class="logo" src="images/.png" alt="logo"><br><br>
<img class="profil" src="images/account.png" alt="logo"><br><br>
<!--
<nav>
<ul class="nav_links">
<li><a href='#'>Comment ça marche?</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Blog</a></li>
</ul>
</nav>
-->
</header>
<div class="entete"></div>
<div class="textentete">Mon Compte</div>
<br>
</div>
<div class="container">
<div class="column">
<div class="title">Identifiant</div>
<div class="rectangle-13">X1VZXCS2</div>
</div>
<div class="column">
<div class="title">Prénom</div>
<div class="rectangle-13">Ludovic</div>
</div>
<div class="column">
<div class="title">Nom</div>
<div class="rectangle-13">Thiel</div>
</div>
<div class="column">
<div class="title">Email</div>
<div class="rectangle-13">ludovic#gmail.com</div>
</div>
<div class="column">
<div class="title">Numéro de société</div>
<div class="rectangle-13">2651611354</div>
</div>
<div class="column">
<div class="title">Société</div>
<div class="rectangle-13">DevNum</div>
</div>
<div class="column">
<div class="title">Poste</div>
<div class="rectangle-13">Développeur Front</div>
</div>
</div>
<div class="centrage">
<form method="get" action="/inscription.html">
<input type="submit" value="Retour vers l'accueil">
</form>
</div>
Does somebody know how to do this?
Spoiler: I left a lot of comments in the CSS to tell you what everything
does.
Alright. There are a lot of things wrong with this. I've decided to rewrite the code because the original was way to messy. It seems that you don't really know a lot about HTML and CSS. I've done half of it for you so you can figure the other half out.
Some tips:
1. Make sure to organize, and name everything correctly. If it's an input field, name it "input-field" not "rectangle13" when your
document gets bigger, it's gonna be harder to find out what's going
on.
2. When dealing with settings like padding:__ or margin:__, say you wanted the same values for top, left, bottom, and
right of the margin or padding, just set it to one singular value.
Before: margin: 5px, 5px, 5px, 5px;
After: margin: 5px;
3. Don't use <div> for everything. Yes, they're useful, but there are better ways of making input fields and text. Examples:
<h1>(heading), <p>(paragraph), <input type=text>(text input)
Oh, also:
I know that the HTML and CSS I provided isn't perfect (sorry i dont have a lot of time.)
This is the HTML
<!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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="content">
<div class="title">
<h1>Mon Compte</h1>
</div>
<div class="form">
<div class="column">
<div class="inputField">
<h1>Identifiant</h1>
<input type="text" value="X1VZXCS2">
</div>
<div class="inputField">
<h1>Nom</h1>
<input type="text" value="Thiel">
</div>
<div class="inputField">
<h1>Numéro de société</h1>
<input type="text" value="2651611354">
</div>
<div class="inputField">
<h1>Poste</h1>
<input type="text" value="Développeur Front">
</div>
<div class="inputField">
<h1>Prénom</h1>
<input type="text" value="Ludovic">
</div>
<div class="inputField">
<h1>Email</h1>
<input type="text" value="ludovic#gmail.com">
</div>
<div class="inputField">
<h1>Société</h1>
<input type="text" value="DevNum">
</div>
</div>
<div class="column">
<div class="submit">
<input type="submit" value="button">
<input type="submit" value="button">
</div>
</div>
</div>
</div>
</body>
</html>
This is the CSS
body, html {
/* Make the HTML fill the screen */
font-family: Helvetica;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.content {
/* Make DIV in the HTML fill the screen */
width: 100%;
height: 100%;
}
.title {
/* Setting the width and height of the container containing the title */
width: 100%;
height: 100px;
/* Display flex will align everything inside it HORIZONTALLY */
display: flex;
/* Justify content will align everything inside it to the center HORIZONTALLY */
justify-content: center;
/* Setting the background color */
background-color: #FAFAFA;
}
.form {
/* Setting the width and height of the container containing the form */
height: 500px;
width: 100%;
/* Setting the background color */
background-color: #FAFAFA;
/* Display flex will align everything inside it HORIZONTALLY */
display: flex;
/* Justify content will align everything inside it to the center HORIZONTALLY */
justify-content: center;
/* Align items will align everything inside it to the center VERTICALLY */
align-items: center;
}
.form .column {
/* Setting the width and height of the columns */
width: 50%;
height: 100%;
/* Setting the background color */
background-color: #FAFAFA;
/* Setting the invisible space around the column, if all 4 values are the same, subsitute with ONE value */
margin: 30px;
/* Display flex will align everything inside it HORIZONTALLY */
display: flex;
/* Wrap items */
flex-wrap: wrap;
}
.column .inputField {
/* Setting the background color */
background-color: #FAFAFA;
/* Setting the width and height of the input fields */
height: 70px;
width: calc(50% - 10px); /* Accounting for margin */
/* Setting the whitespace */
padding-top: 2px;
padding-bottom: 10px;
/* Setting the invisible space */
margin-right: 10px;
}
.column .inputField h1 {
/* Setting the font color of the name/title of the input field. */
color: darkblue;
/* Setting the font size*/
font-size: 14px;
}
.column .inputField input {
/* Setting the font size*/
font-size: 18px;
/* Setting the OVERALL padding */
padding: 4px;
/* Setting the LEFT padding */
padding-left: 20px;
/* Setting the border */
border: 1px solid #959595;
/* Setting the width and height of the input fields */
height: 30px;
width: calc(100% - 40px); /* Accounting for overflow */
}
Use the Flexbox so you can easily solve your problem using the below code to fulfill your requirement.
.main-title h1 {
background-color: #e8eaf6;
color: #311b92;
padding: 10px;
border-radius: 20px;
text-align: center;
font-family: "Helvetica";
}
.rectangle-13 {
background-color: white;
width: 100%;
min-width: 230px;
height: 40px;
padding: 8px 8px 8px 8px;
border: 1px solid #000;
border-radius: 5px;
font-family: "Helvetica";
font-size: 16px;
box-sizing: border-box;
}
.rectangle-12,
.rectangle-14 {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 524px;
min-height: 323px;
padding: 30px;
background: #e8eaf6;
color: #311b92;
border: 1px solid;
z-index: -1;
}
.main {
display: flex;
justify-content: space-evenly;
}
<div class="main-title">
<h1>Mon Compte</h1>
</div>
<div class="main">
<div class="rectangle-12">
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">X1VZXCS2</div>
</div>
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">Ludovic</div>
</div>
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">Thiel</div>
</div>
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">ludovic#gmail.com</div>
</div>
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">2651611354</div>
</div>
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">DevNum</div>
</div>
<div>
<div class="lable">Lable</div>
<div class="rectangle-13">Développeur Front</div>
</div>
</div>
<div class="rectangle-14">
<div>
<h1>Add Content Here</h1>
</div>
</div>
</div>
This question already has answers here:
Center image using text-align center?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
For a long time, I am trying to resolve this issue but I was not able to find a good solution for this. I need to align this image on the center of the form but I am totally unsuccessful in it. You may feel like I am elaborating too much, but this is because StackOverflow is not letting me post this question because it thinks that this question needs deep elaboration. I don't know why.
This is my HTML:
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
This is my CSS:
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
How can I align the image in the center? I have tried many ways. But I am not able to do it. I have tried aligning using display flex property and tried aligning it in the center and tried to justify the content in the center!
.imagecontainer {
text-align: center;
}
Will do the job.
Adding text-align:center should solve your problem -
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer" style="text-align:center">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
display: flex;
justify-content: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
You need to use the flex property on the parent.
Add this to your css
.imagecontainer {
display: flex;
justify-content: center;
}
Just use margin
html, body {
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
text-align: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
Try to use margin:auto on imagecontainer div.
You can make use of <center> tag.
<center>
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
</center>
Just place the above code in place of imagecontainer div. You need to wrap the div in center tag.
So I am making a website for class, Ive got one more page to make and its the login page. The thing is, it seems I cant move forms and things in forms around like I can with text boxes. what I want to do is sort of like the steam login page which I will link here. Basically I want box in the middle of the page with a text box for username and password on the left side of the box, then I want a thin line going down the middle of the box separating the two halves and on the right side I want three boxes one for the username and two for the password. The thing is I cant seem to move what I have to the left side of the box yet. https://store.steampowered.com/login/ thats the steam login site itll give you an idea of what i want to do.
Here is what I have so far, I just want to move the grey box down a bit and then put the form that i have now on the left side of the box and write a new form on the right side of the box with a dividing line in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1> <img src="logo.png" class="center"><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
Home
About
Media
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
Half Life
Team Fortress 2
Counter strike: Global Offensive
</div>
</div>
Account
</div>
<center>
<div class="container">
forgot password?
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
I leave you a snippet with the idea you have for the login. You will have to tinker with it to fit your own styles. I leave you a link to a little game to learn flexbox, which I use on the snippet.
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}
<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>
Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?
I have tried this for the .login-layout__positioner class:
.login-layout__positioner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 42%;
transform: translateY(-42%);
}
But this does not centre well in large screen heights?
Is there a better way?
body {
height: 100%;
background-color: #f7f7f4;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
background-color: #fff
}
.banner__top {
padding-top: 15px;
}
.login-layout__container {
background-color: #f7f7f4;
width: 100%;
}
.login-layout__positioner {
text-align: center;
margin: auto;
}
footer {
background-color: #0065bd;
}
a {
color: #fff;
}
ul {
list-style: none;
margin-left: 0;
}
li {
display: inline;
}
.form__group {
background-color: #fff;
}
<body>
<div id="root">
<div class="main-content">
<div class="app-layout__body">
<div class="app-layout__container">
<div class="banner__container">
<div class="banner__top">
<div>
<div>
<h2>Banner</h2></div>
</div>
</div>
</div>
<div class="login-layout__container">
<div class="login-layout__positioner">
<div class="form__group">
<div>
<form>
<div class="login__container">
<div class="login__wrapper">
<div>
<div>
<div class="login__form__elements">
<div>
<div>
<h2 class="">Sign In</h2></div>
</div>
<div>
<div>
<div>
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div>
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
<div id="email-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="password" id="password-label">Password</label>
<div>
<input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
</div>
<div id="password-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div><a to="/">Forgotten your password?</a></div>
<div>
<button type="submit">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<div>
<div>
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent-container{
width:100vw;
height:100vh;
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
background-color:white;
text-align:center;
}
<div class="parent-container">
<div class="child">
<h1>Centered</h1>
</div><!-- child -->
</div><!-- parent-container -->
Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.
Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.
Here's my template for my custom login forms.
You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.
Hope this helps.
.login {
background: pink;
margin: 0;
padding: 0;
}
.body-wrapper {
background: white;
width: 100%;
height: 100vh;
}
.hero-wrapper,
.globalfooter {
background: #CCC;
text-align: center;
}
.hero-wrapper {
line-height: 200px; /* just for the text v-alignment only */
height: 200px;
}
.globalfooter {
line-height: 100px; /* just for the text v-alignment only */
height: 100px;
}
.section-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #EEE;
min-height: calc(100% - (200px + 100px));
padding: 30px;
box-sizing: border-box;
}
.help-text-wrapper {
font: 300 12px sans-serif;
color: red;
text-align: center;
margin: 15px 0 0;
}
.help-text-wrapper.hidden {
/* Remove comment to enable
display: none; */
}
h1 {
font: 600 24px sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 0 15px;
}
form {
background: #FFF;
font: 300 12px sans-serif;
text-transform: uppercase;
width: 260px;
padding: 30px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
box-sizing: border-box;
border-radius: 3px;
}
form > fieldset {
margin: 0 0 15px;
padding: 0;
border: 0;
}
form > fieldset label:first-child {
display: block;
margin-bottom: 15px;
}
form input {
display: block;
width: 100%;
height: 30px;
margin: 5px 0;
padding: 6px;
box-sizing: border-box;
}
form button {
display: block;
background: #888;
color: #FFF;
text-transform: uppercase;
height: 30px;
margin: auto;
padding: 7px 15px;
border: 0;
cursor: pointer;
}
<body class="login page">
<div class="body-wrapper">
<header class="hero-wrapper">
Banner
</header>
<section class="section-login">
<h1>Sign In</h1>
<form action="" method="post">
<fieldset>
<label for="username">
Username
<input type="text" id="username" value="" placeholder="Username" autofocus>
</label>
<label for="password">
Password
<input type="password" id="password" value="" placeholder="Password">
</label>
</fieldset>
<button type="submit">Login / Sign In</button>
</form>
<div class="help-text-wrapper hidden">
Something around here after fallback.
</div>
</section>
<footer class="globalfooter">
Footer
</footer>
</div>
</body>
Just change some class properties which I wrote down:
.login-layout__positioner {
display: flex;
align-items: center;
justify-content: center;
}
.form__group {
background-color: transparent;
}
a {
color: #333;
}
footer a {
color: #fff;
}