I have this HTML & CSS Code.
I would like that:
First label and second label equal size,
third label should be full width.
This should then give:
I have been playing around with flex and the possible options.
I have watched tutorials and read specifications, but for some reason I'm unable to get this working in a simple manner.
Here you can find my html and css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#400;800&display=swap');
* {
box-sizing: border-box;
}
body {
display: flow-root;
font-family: 'Montserrat Alternates', sans-serif;
/* background-image: url(../images/background-cars.jpg); */
background-size: cover ;
min-height: (1vh-1em);
background-color: saddlebrown;
font-size: 0.75rem;
font-weight: 400;
}
input,
select,
button {
width: 100%;
border-radius: 0.5em;
padding: 15px;
}
input,
select{
color: gray;
}
/* flex */
fieldset{
display: flex;
flex-wrap: wrap;
gap: 1em;
}
label{
flex: 1 1 0;
}
/* layout */
form {
background-color: black;
padding: 15px;
color: white;
width: 75%;
max-width: 800px;
margin: auto;
border-radius: 0.5em;
}
button{
background-color: gold;
font-weight: 800;
border-radius: 0.5em;
margin-top: 15px;
}
h1{
color: gold;
font-weight: 800;
font-size: 4rem;
text-align: center;
}
legend{
font-weight: 800;
}
fieldset{
border-radius: 0.5em;
}
<!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>Boo! Ka Car.</title>
<link rel="stylesheet" href="css/main copy.css">
</head>
<body>
<h1>test</h1>
<form id="form1" action="mailto:naam#domein.be?subject=Booking&m" method="post">
<fieldset>
<legend>DATE & TIME</legend>
<label>
PICKUP DATE
<input type="date">
</label>
<label>
HOUR
<input type="number" min="1" max="12">
</label>
<label>
AM/PM
<select name="ampm" id="amAndpm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</label>
</fieldset>
<button type="submit" form="form1" value="BOOKNOW">BOOK NOW</button>
</form>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#400;800&display=swap');
* {
box-sizing: border-box;
}
body {
display: flow-root;
font-family: 'Montserrat Alternates', sans-serif;
/* background-image: url(../images/background-cars.jpg); */
background-size: cover ;
min-height: (1vh-1em);
background-color: saddlebrown;
font-size: 0.75rem;
font-weight: 400;
}
input,
select,
button {
width: 100%;
border-radius: 0.5em;
padding: 15px;
}
input,
select{
color: gray;
}
/* flex */
fieldset{
display: flex;
flex-wrap: wrap;
gap: 1em;
}
label{
flex: 1 1 0;
flex-basis: unset;
}
/* layout */
form {
background-color: black;
padding: 15px;
color: white;
width: 75%;
max-width: 800px;
margin: auto;
border-radius: 0.5em;
}
button{
background-color: gold;
font-weight: 800;
border-radius: 0.5em;
margin-top: 15px;
}
h1{
color: gold;
font-weight: 800;
font-size: 4rem;
text-align: center;
}
legend{
font-weight: 800;
}
fieldset{
border-radius: 0.5em;
}
<!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>Boo! Ka Car.</title>
<link rel="stylesheet" href="css/main copy.css">
</head>
<body>
<h1>test</h1>
<form id="form1" action="mailto:naam#domein.be?subject=Booking&m" method="post">
<fieldset>
<legend>DATE & TIME</legend>
<label>
PICKUP DATE
<input type="date">
</label>
<label>
HOUR
<input type="number" min="1" max="12">
</label>
<label>
AM/PM
<select name="ampm" id="amAndpm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</label>
</fieldset>
<button type="submit" form="form1" value="BOOKNOW">BOOK NOW</button>
</form>
</body>
</html>
You can change the heights of the input field to your liking, for the code below, it's just their naturally inherent heights.
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#400;800&display=swap');
* {
box-sizing: border-box;
}
body {
display: flow-root;
font-family: 'Montserrat Alternates', sans-serif;
/* background-image: url(../images/background-cars.jpg); */
background-size: cover ;
min-height: (1vh-1em);
background-color: saddlebrown;
font-size: 0.75rem;
font-weight: 400;
}
input,
select,
button {
width: 100%;
border-radius: 0.5em;
padding: 15px;
}
input,
select{
color: gray;
}
/* flex */
fieldset{
gap: 1em;
}
label{
flex: 1 1 0;
}
/* layout */
form {
background-color: black;
padding: 15px;
color: white;
width: 75%;
max-width: 800px;
margin: auto;
border-radius: 0.5em;
}
button{
background-color: gold;
font-weight: 800;
border-radius: 0.5em;
margin-top: 15px;
}
h1{
color: gold;
font-weight: 800;
font-size: 4rem;
text-align: center;
}
legend{
font-weight: 800;
}
fieldset{
border-radius: 0.5em;
}
.outer{
display:flex;
flex-direction: column;
}
.inner{
width: 100%;
margin-bottom: 7px;
display: flex;
flex-direction:row;
justify-content:space-between;
}
.date{
flex: 1;
margin-right: 10px;
}
.hour{
flex: 1;
}
<!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>Boo! Ka Car.</title>
<link rel="stylesheet" href="css/main copy.css">
</head>
<body>
<h1>test</h1>
<form id="form1" action="mailto:naam#domein.be?subject=Booking&m" method="post">
<fieldset>
<legend>DATE & TIME</legend>
<div class="outer">
<div class="inner">
<div class="date">
PICKUP DATE
<input type="date">
</div>
<div class="hour">
HOUR
<input type="number" min="1" max="12" class="hour">
</div>
</div>
<div>
AM/PM
<select name="ampm" id="amAndpm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
<div>
</fieldset>
<button type="submit" form="form1" value="BOOKNOW">BOOK NOW</button>
</form>
</body>
</html>
Related
I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.
I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.
<!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>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
I guess you just have a typo here:
transform: translate(-50%.-50%);
It should look like this:
transform: translate(-50%,-50%);
please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
attaching the corrected code for your reference, hope it helps!
<!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>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
form{
padding: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
</style>
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
You should try to put the code below in your CSS file. When you start writing, upper left is the starting point, that's where your content is going.
html {
text-align: center;
}
i have 3 sections in this html 3 page, header, inner body, and footer, i would like you to focus on the inner body only, in there, i have a form, and an information box with title and text, i would like to make the form and information box to be centered in the inner body, and to sit side by side , and the information box to be in the middle of the form height.
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.content {
width: 1400px;
margin: auto;
padding: 10px;
}
/* inner body styling */
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
div.inner-body {
background-image: url(image/blueimage.png);
margin-bottom: 20px;
margin-top: 20px;
height: 900px;
text-align: center;
align-items: center;
display: grid;
}
form {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 80px;
align-items: center;
border-radius: 40px;
width: 525px;
height: 700px;
background-color: rgb(99, 198, 223);
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
}
.signin {
font-size: 35px;
padding: 10px;
width: 530px ;
height: 500px;
display: inline-block;
background-color: rgb(173, 241, 241);
border-radius: 30px;
margin-top: -50px;
margin: 10px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
margin-right: 50px;
}
.signin-intro {
color: black;
}
.passlabel {
white-space: pre;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}
.stafflabel {
white-space: pre;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}
.field {
width: 500px;
font-size: 25px;
font-style: oblique;
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.userlogo {
width: 200px;
border-radius: 100px;
margin-top: -15px;
}
.area {
width: 280px;
height: 30px;
border-radius: 20px;
font-size: 20px;
padding: 5px;
font-style: oblique;
}
.btn {
width: 400px;
height: 40px;
font-size: 30px;
border-radius: 20px;
background-color: rgb(54, 88, 238);
cursor: pointer;
}
.account-link {
font-size: 20px;
}
.checkbox {
display: inline-flex;
font-size: 20px;
}
.remember {
white-space: pre;
}
form .pass-link a:hover,
form .account-link a:hover{
text-decoration: underline;
}
.pass-link {
white-space: pre;
}
.remember-me {
width: 20px;
height: 20px;
}
<!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="signin.css">
<script src="signin.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="inner-body">
<div class ="signin">
<h3><u>Staff Members Sign In</u></h3>
<p class="signin-intro"> This sign in form is meant for staff memebers only, if you are a student, please use this link
Student Account </p>
</div>
<form method="GET" onsubmit=" return formSubmit() " action="#">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
</div><br>
<div class="error" id= "errorMsg"></div><br>
<div class="error" id= "errorMsg1"></div>
<div class="field">
<label class="stafflabel"> Staff Name </label>
<input class="area" placeholder="staffmember or admin" onclick=" return userValidation()" onchange=" return userValidation()" id="staff" name="staff" type="text">
</div> <br>
<div class="error" id= "errorMsg2"></div>
<div class="field">
<label class="passlabel"> Password </label>
<input class="area" placeholder="password" onclick=" return userValidation()" onchange=" return userValidation()" id="pass" name="pass" type="password">
</div><br>
<div class="checkbox">
<input type="checkbox" class="remember-me">
<label class="remember" for="remember-me">Remember me </label>
<a class="pass-link" href="#"> Forgot password? </a>
</div><br><br><br>
<div class="field">
<input class="btn" type="submit" value="Sign in">
</div> <br>
<div class="account-link">
Didn't create an account yet? Create Account
</div>
</form>
</div>
</div>
</body>
</html>
You can use display: flex; to achieve this easier.
Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv
Use flex, remove margin-top, and everything works perfectly. :)
I'm currently cloning a site and in the "enter email" input, the text wont align and sticks to the bottom of the input, and i'd prefer it to be in the middle on the left. How can i fix this? any help appreciated <3
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
header img {
float: left;
max-width: 100%;
height: 50px;
margin: 15px 60px;
}
header nav {
float: right;
margin-top: 30px;
padding-right: 20px;
}
header nav a,
header nav .vertical-line {
padding-right: 15px;
text-decoration: none;
color: #111111;
font-weight: 500;
}
header nav a:hover {
text-decoration: underline;
}
/* Hero Section */
.hero {
padding-top: 120px;
}
.hero-img {
display: flex;
justify-content: center;
max-width: 100%;
height: 200px;
}
h1 {
font-size: 70px;
text-align: center;
padding-top: 15px;
}
h4 {
text-align: center;
font-weight: 200;
font-size: 20px;
color: #91908f;
}
form {
display: flex;
justify-content: center;
}
input {
text-align: left;
width: 280px;
margin-top: 30px;
padding-top: 18px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin-bottom: 20px;
}
form button {
width: 80px;
padding: 0px;
text-align: center;
margin-top: 30px;
color: #fffefc;
}
form label {
margin-top: 5px;
padding-left: 20px;
}
form .btn-primary {
display: inline-block;
background-color: #e16259;
border: 1px solid #af4d46;
text-align: center;
border-radius: 6px;
font-weight: 400;
}
<!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>Notion</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<header>
<img src="img/logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing
Careers
<span class="vertical-line">|</span>
Sign Up
Log In
</nav>
</header>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
</body>
</html>
In input selector you can change the padding-top: 18px to padding: 10px, as below. Then remove that input::placeholder.
input {
width: 280px;
margin-top: 30px;
padding: 10px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
<form action="">
<input type="text" placeholder="Email">
</form>
You can remove padding of input and adjust by using height and line height
.ip {
height: 30px;
line-height: 30px;
padding: 2px 8px;
}
<input type="text" class="ip" />
Define height for the input class and for input::placeholder remove margin-bottom: 20px; and set margin to auto and also add some left-padding.
input {
text-align: left;
width: 280px;
height: 40px;/*add height for your input*/
margin-top: 30px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin: auto;/*set margin to auto*/
padding-left: 10px;/*add some left-padding*/
}
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
Instead of scratching your head around custom CSS, you can use third party CSS libraries like Bootstrap or Semantic-UI which provide a variety of feature rich CSS components and will eventually reduce your work.
I'm using grid layout to position the elements into my page.
I have 4 rows and the second one has 3 columns.
I would like to force the second and the third areas of the second row to use only the necessary space (such as using width: fit-content;) and to fill all the free space that remain by adjusting the width of the first area.
How could I do that?
<!DOCTYPE html>
<html>
<head>
<title>Login - ErasmusAdvisor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="template/stile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h1>Login</h1>
</header>
<nav id="menu-principale">
<p>Menu</p>
</nav>
<div id="ricerca">
<form action="../index.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="utente">
<p>Utente</p>
</div>
<main>
<fieldset>
<legend>Accedi al tuo account</legend>
<form method="POST" action="../index.php">
<label for="email">Indirizzo email</label><br>
<input type="email" name="email" placeholder="Indirizzo email" autocomplete="" required><br>
<label for="password">Password</label><br>
<input type="password" name="password" placeholder="Password" autocomplete="" required><br>
<input type="submit" name="login" value="Accedi">
</form>
</fieldset>
</main>
<footer>
<address>Progetto: Erasmus Advisor</address>
<address>Scuola: IIS Vittorio Veneto</address>
</footer>
</body>
</html>
This is all the css that I'm using:
:root{
--default-color: #333;
--default-background-color: #faf9f2;
--default-elements-background-color: #fccf03;
--default-border: 1px solid #333;
--default-border-radius: 3px;
--default-margin: 5px;
--default-padding: 5px;
--default-font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
body{
color: var(--default-color);
font-family: var(--default-font-family);
background: var(--default-background-color);
margin: 0px;
height: 100vh;
display: grid;
grid-template-areas:
'header header header header header header header'
'menu menu menu menu menu ricerca utente'
'main main main main main main main'
'footer footer footer footer footer footer footer';
}
header{
grid-area: header;
background: var(--default-elements-background-color);
border: var(--default-border);
padding: var(--default-padding);
margin: 0px;
}
nav{
grid-area: menu;
border-left: var(--default-border);
padding: var(--default-padding);
background: grey;
}
#ricerca{
grid-area: ricerca;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-left: var(--default-border);
padding: var(--default-padding);
background: red;
width: fit-content;
}
#ricerca input[type="text"]{
padding: var(--default-padding);
font-size: large;
}
#ricerca button[type="submit"]{
background-color: var(--default-elements-background-color);
padding: var(--default-padding);
border: none;
border-radius: 3px;
cursor: pointer;
}
#utente{
grid-area: utente;
border-left: var(--default-border);
border-right: var(--default-border);
padding: var(--default-padding);
background: yellow;
width: fit-content;
margin-right: 0px;
}
main{
display: grid;
grid-area: main;
min-height: 500px;
border: var(--default-border);
border-bottom: none;
align-items: center;
justify-items: center;
}
fieldset{
margin: var(--default-margin);
font-size: larger;
height: 300px;
width: 300px;
border: var(--default-border);
border-radius: var(--default-border-radius);
}
fieldset legend {
text-align: center;
text-decoration: underline;
}
form{
width: fit-content;
height: fit-content;
margin: auto;
vertical-align: central;
}
form input{
border: var(--default-border);
font-size: large;
background: #FFF;
padding: var(--default-padding);
margin-bottom: 5px;
border-radius: var(--default-border-radius);
}
form input[type="submit"]{
float: right;
margin: var(--default-margin);
margin-right: 0px;
background: var(--default-elements-background-color);
cursor: pointer;
}
footer{
grid-area: footer;
border: var(--default-border);
background: var(--default-elements-background-color);
padding: 5px;
}
footer address{
display: inline;
margin-right: 10px;
}
If you leave off the width on #ricerca and #utente it will fill out the rest of the remaining space.
So, the solution is quite simple.
Just use
grid-template-rows: fit-content(10%) fit-content(10%) auto fit-content(10%);
after grid-template-areas.
I need to float my columns on the right but I don't know how I can put them under each other with space between them. The CSS is linked to the HTML page some of the CSS is in the HTML page because I used google fonts for them.
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto;
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<style>
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
</style>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<style>
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
width: 350px;
}
.grid {
float: right;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
This is what you want?
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 20px 0;
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
}
.wrapper2 form{
padding-bottom: 59px;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<style>
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
</style>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>
You need to specify clear property for wrapper2 class in your CSS
Per Mozilla Developer Documentation Web technology for developers > CSS > clear:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
More specifically for the floating elements, as in this case:
When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
You can achieve this by setting the clear property to either both or right, as follows--
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
clear:both;
}
Full demo posted on: JsFiddle
#charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto;
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
clear:both;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
.wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
button{
display: center;
padding: 5px;
width: 75%;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="grid">
<div id="wrapper" class="wrapper">
<h2>Registreer</h2>
<form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
<input type="text" name="first" placeholder="Voornaam">
<input type="text" name="last" placeholder="Achternaam">
<input type="text" name="email" placeholder="E-mail">
<input type="text" name="uid" placeholder="Gebruikersnaam">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="submit">Account aanmaken</button>
</form>
</div>
<div id="wrapper2" class="wrapper2">
<h2>Login</h2>
<form>
<input type="text" placeholder="voornaam">
<input type="text" placeholder="achternaam">
<input type="password" placeholder="Wachtwoord">
<button type="submit" name="login">Login !</button>
</form>
</div>
</div>
</body>
</html>