This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 months ago.
I have this code:
#login-form {
display: flex;
justify-content: center;
align-items: center;
}
<!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">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
And my div is only centered horizontaly, but not verticaly, why is my div not centered verticaly too?
flexbox doesn't have any height which means that it cannot center the form vertically. To center the form, you need to give the html, body and the #login-form a height 100% as shown in the snippet below.
html,
body {
height: 100%;
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<!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>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br />
<input
type="text"
id="login-field"
name="login"
placeholder="Digite seu login aqui"
/>
<br />
<label for="senha">Senha</label>
<br />
<input
type="password"
id="senha-field"
name="senha"
placeholder="Digite sua senha aqui"
/>
<br />
<button type="submit" id="botao-entrar" onclick="entrar()">
Entrar
</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
I hope this helps
It's actually centered vertically inside the login-form. The thing is that the login-form's height is equal to its content. You could overwrite that height through CSS, like this:
body{
margin:0;
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh; /* line I added */
}
<!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">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>
Related
I am making a sign-up page for my site. It looks like this
<!DOCTYPE html>
<html lang="en" height="">
<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>MVC | Signup</title>
</head>
<body>
<div>
<form action="/signup" method="post" target="nothing">
<h1>Sign up for Post-it</h1>
<input type="text" name="name" placeholder="Your name">
<input type="text" name="usr" placeholder="Username" >
<input type="password" name="psd" placeholder="Password">
<button type="submit">Sign up for post-it</button>
</form>
</div>
<iframe name="nothing" style="display:none"></iframe>
</body>
</html>
But right now, you can create an account without a username or password. I tried the required attribute. It made something like this.
<!DOCTYPE html>
<html lang="en" height="">
<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>MVC | Signup</title>
</head>
<body>
<form action="/signup" method="post" class="w-1/2 flex flex-col" target="nothing" onsubmit="alert('form submitted')">
<h1 class="text-xl text-center mb-5">Sign up for post-it</h1>
<input type="text" name="name" placeholder="Your name" required>
<input type="text" name="usr" placeholder="Username" required>
<input type="password" name="psd" placeholder="Password" required>
<button type="submit">Sign up for post-it</button>
<iframe name="nothing" style="display: none"></iframe>
</body>
</html>
This works, but the "please fill out this field" doesn't look that great. And if someone figures out how to bypass the required fields, that will do a lot of damage to my database. So is there a way to make sure the form isn't empty on the server side? Note: I'm also using ejs, so you can make error messages like this:
app.get('/error', (req, res) => {
res.render('signup', { error: 'enter a username'}); // Could also be "enter your name", or "enter your password".
});
You can use Express Validator
here is the docs
https://express-validator.github.io/docs/
Due to need of creating 350+ pair of label/input, I would like to have the label and input grouped separately in HTML. The solution I have with CSS grid "container-1" works fine when the label and input comes in pairs.
Update: The second reason I would like to keep label/input separately is because I will later use a for-loop and inject data from imported array.
Question: How can I make "container-2" result in same output as "container-1" with no changes of HTML and minimal adjustment of CSS ?
I want to stick to CSS grid.
.container_1 {
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<label for="dummy2">longer title for dummy2:</label>
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<input id="dummy2" name="dummy2" value="dummy2">
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
Here you go. Changed grid-auto-flow of the second container to change the direction. No changes in HTML.
Althought here you have to determine grid-column of label and input.
.container_1 {
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
grid-auto-rows: auto;
grid-auto-flow: column;
}
.container_2 label {
grid-column: 1;
}
.container_2 input {
grid-column: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<label for="dummy2">longer title for dummy2:</label>
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<input id="dummy2" name="dummy2" value="dummy2">
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
.container_1 {/* Your HTML for bottom and top just needs to be the same*/
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
I am fairly new to web design so please bear with my lack of knowledge and possible stupid questions.
I am trying to create a login page as shown below.
I have placed the Username and Password form inside a div element which I have centred on the page. However, I haven't managed to centre the Username and Password field correctly inside this div element.
I tried to place form by centering it relative to the div element in the middle of the page and placing the login to the bottom right corner however, it still doesn't work.
Further, I am not able to correctly place The header "SampleWebPage" in its correct place.
Here's the CSS and HTML code for the centred div class inside which the form is placed.
.login_div {
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
<html>
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class = "login_div">
<form action="" method = "post" class="login_form">
Username:
<input type="text" name="username" value="{{
request.form.username }}">
<br>
Password:
<input type="password" name="password" value="{{
request.form.password }}">
<br>
<input class="btn btn-default" type="submit" value="Login">
</form>
</div>
</body>
</html>
I'm sorry if this is a very broad question, however I require help getting this webpage to work correctly.
Thanks.
You can use flexbox:
.login_div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.row {
padding: 10px;
}
.row.submit {
text-align: right;
}
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class="login_div">
<form action="" method="post" class="login_form">
<div class="row">
<label>Username:
<input type="text" name="username" value="{{request.form.username}}">
</label>
</div>
<div class="row">
<label> Password:
<input type="password" name="password" value="{{request.form.password }}">
</label>
</div>
<div class="row submit">
<input class="btn btn-default" type="submit" value="Login">
</div>
</form>
</div>
</body>
Following is the code, the problem is it works fine on desktop browsers i.e. red color for disabled input, but on a mobile browser it doesn't show red, instead its grey, any ideas?
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testing</title>
<style>
input[disabled] {
color: #f55;
font-weight: bold;
}
</style>
</head>
<body>
<section>
<form id="myForm" method="post" action="forms.php">
<input type="text" name="username" value="Username" disabled> <br>
<input type="password" name="password" placeholder="Password"> <br>
<input type="submit" name="submit"> <br>
</form>
</section>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testing</title>
<style>
input[disabled] {
color: #f55;
font-weight: bold;
}
#media only screen and (max-width:1000px) {
input[disabled]{
color: #C90;
font-weight:bold;
}
</style>
</head>
<body>
<section>
<form id="myForm" method="post" action="forms.php">
<input type="text" name="username" value="Username" disabled> <br>
<input type="password" name="password" placeholder="Password"> <br>
<input type="submit" name="submit"> <br>
</form>
</section>
</body>
</html>
You can use media queries for that and instead of putting this style in html document it would be more appropriate to keep external style sheet for long css....You can target different devices by setting maximum width for different devices in #media inside css