I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.
As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: #7fffd4;
padding: 5px;
}
#Sign_Up {
text-align: center;
background-color: #a52a2a;
margin-top: 10px;
padding: 5px;
}
form div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
border: #00f dashed 1px;
margin-bottom: 2px;
}
form div input {
width: 120px;
}
form div select {
width: 124px;
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<br><input type="submit" value="Submit">
</form>
</div>
</div>
You can us tabular forms, they are easy to manage.
form{
background-color:red
}
H1{
text-align:center
}
<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
<table style="width:100%">
<tr>
<td>Email</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="firstname"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
clear: left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.
Let's do some cleanup and simplification here.
First off we'll get rid of all those <br> tags. Don't need 'em.
Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.
#Login_and_Sign_Up {
width: 250px;
margin-left: 10px;
}
#Login {
background-color: aquamarine;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
}
label {
width: 80px; /* adjust to taste */
display:inline-block
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="#">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Further improvements that could be made:
For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.
Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.
Use CSS Flexbox
I have done it for the login form, you can repeat the same for sign-up as well.
Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 170px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
.flex-form p{
display:flex;
}
input {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
select {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
label {
flex: 1;
margin: 5px 0 0 0;
float:left;
text-align:left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php" class="flex-form">
<p>
<label>Email</label>
<input type="text" name="email">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.
I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.
#Login_and_Sign_Up {
height: inherit;
margin-left: 10px;
/* float: right; */
}
#Login {
background-color: aquamarine;
overflow: hidden;
width: 300px;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
width: 300px;
overflow: hidden;
}
label {
min-width: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="firstname">First name</label>
<input type="text" name="fname" id="firstname">
</div>
<div class="form-group">
<label for="familyname">Family name</label>
<input type="text" name="lname" id="familyname">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="repeat">Repeat PSW</label>
<input type="password" name="passwordrepeat" id="repeat">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
Related
So I have created a form with different type of elements (including radio, checkbox, text input etc.) and I cannot figure out how to make the whole form look neat. Ideally I want all labels aligned on the left side, except labels for radio buttons which should be aligned with the input fields.
My pen:
https://codepen.io/andreas-soteriou/pen/NWwEywR?editors=1100
I coloured the labels and inputs, for me to visualise as I am fairly new to this!
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type"submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
header, body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,input, select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color:red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color:blue;
margin-top: 2px;
}
header,
body {
color: black;
font-family: copperplate, sans-serif;
}
header {
text-align: center;
background-color: #C0C0C080;
margin: auto;
padding: 10px;
text-transform: uppercase;
}
body {
background-image: url("https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#survey-form {
text-align: center;
color: dark-grey;
font-size: 12px;
padding: 10px;
width: 80%;
background-color: #C0C0C099;
margin: auto;
margin-top: 80px;
border-radius: 25px;
}
.selection {
margin-top: 1px;
margin-bottom: 15px;
}
label,
input,
select {
display: inline-block;
}
label {
width: 20%;
text-align: right;
background-color: red;
margin-right: 2px;
}
input {
width: 40%;
text-align: left;
background-color: blue;
margin-top: 2px;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<body>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<br>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<br>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<br>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
<br>
<!--RADIO--->
<label>Size of print:</label>
<br>
<input id="print_size" type="radio" name="print_size" value="10x10">
<label for="print_size">10x10 199:-</label>
<input id="print_size" type="radio" name="print_size" value="20x20">
<label for="print_size">20x20 299:-</label>
<input id="print_size" type="radio" name="print_size" value="40x40">
<label for="print_size">40x40 399:-</label>
<input id="print_size" type="radio" name="print_size" value="80x80">
<label for="print_size">80x80 599:-</label>
<!--CHECKBOX--->
<div>
<label>Additional features:</label>
<br>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<br>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</div>
<!--TEXTAREA--->
<div>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</div>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
</body>
Here's a simple starting point using CSS Grid
We are going to use two different grid layouts using the fieldset element and our grid container.
For simple Label | Input pairs the grid's first column will be the label taking 25% of the available space with the input occupying the rest.
For the radio button or check box groups, we will add a class to the fieldset then use three columns with 25% for the group label, auto for the input width, with the input label occupying the rest
fieldset {
border: none;
/*Set up base grid*/
display: grid;
/*Set Columns, first column is 25% the second takes up the rest*/
grid-template-columns: 25% 1fr;
row-gap: 0.5em;
}
/*Label styling*/
fieldset label {
text-align: right;
padding-right: 0.25em;
}
/*Additional set up for button group*/
fieldset.button-group {
/*For out button group rows we want the first col 25% ,
control minimum space, then next col take the rest*/
grid-template-columns: 25% auto 1fr;
}
/*Addditional stylings for the button/checkbox labels*/
fieldset.button-group label:not(:first-of-type) {
text-align: left;
}
/*Bump the buttons & check boxes to second column*/
fieldset.button-group input {
grid-column-start: 2;
}
<header>
<h1 id="title">Print selection</h1>
<p id="description">Tailor your prints</p>
</header>
<main>
<form id="survey-form">
<h2 class="selection">start your selection here</h2>
<fieldset>
<label id="label-input" for="name">Name:</label>
<input class="input" id="name" type="text" name="name" placeholder="First Last" required>
<label id="email-input" for="email">E-mail:</label>
<input id="email" type="text" name="email" placeholder="first.last#gmail.com" required>
<label id="number-input" for="number">Age:</label>
<input id="number" type="number" name="number" min="18" max="99" required>
<label for="dropdown">Select frame:</label>
<select id="dropdown" name="frames">
<option value="gold frame">Gold</option>
<option value="metallic frame">Metallic</option>
<option value="wooden frame">Wooden</option>
</select>
</fieldset>
<!--RADIO--->
<fieldset class="button-group">
<label>Size of print:</label>
<input id="print_size_199" type="radio" name="print_size" value="10x10">
<label for="print_size_199">10x10 199:-</label>
<input id="print_size_299" type="radio" name="print_size" value="20x20">
<label for="print_size_299">20x20 299:-</label>
<input id="print_size_399" type="radio" name="print_size" value="40x40">
<label for="print_size_399">40x40 399:-</label>
<input id="print_size_599" type="radio" name="print_size" value="80x80">
<label for="print_size_599">80x80 599:-</label>
</fieldset>
<!--CHECKBOX--->
<fieldset class="button-group">
<label>Additional features:</label>
<input id="feature1" type="checkbox" name="feature1" value="polished_glass">
<label for="feature1">Polished glass +100:-</label>
<input id="feature2" type="checkbox" name="feature2" value="3d_print">
<label for="feature2">3D-print +500:-</label>
</fieldset>
<!--TEXTAREA--->
<fieldset>
<label for="final_inputs">Additional input:</label>
<textarea id="final_inputs" name="final_inputs" rows="5" cols="20"></textarea>
</fieldset>
<!--SUBMIT--->
<div>
<button type "submit" id="submit" value="submit">Submit order</button>
</div>
</form>
</main>
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
I have a given HTML which I can't touch:
<fieldset>
<label for="username" class="text">
Dein Benutzername<span class="req">*</span>
</label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">
Vorname<span class="req">*</span>
</label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label ....
and I need to output that one with 2 same-width columns where the label is above the corresponding div-block and the next input-div-block and their corresponding label is besides it.
I added an image to show exactly what I want it to be. I run into problems because the label-tag sits within the same hierarchy-level as the div-block and I therefore can't use inline-block nor - due to my lack of knwoledge - flexbox as it's a mix between column and row in flex-direction
Could somebody please guide me on that one?
You can still use flexbox and put the elements into a new order. It is not a elegant way but the only solution i can
think of if you cant touch the HTML
.text,
.div_text {
width: 50%;
display: block;
}
fieldset {
display: flex;
flex-wrap: wrap;
}
label {
display: block;
}
label[for=username] {
order: 1;;
}
label[for=first_name] {
order: 2;
}
fieldset div:nth-of-type(1){
order: 3;
}
fieldset div:nth-of-type(2){
order: 4;
}
label[for=sur_name] {
order: 5;
}
label[for=example] {
order: 6;
}
fieldset div:nth-of-type(3){
order: 7;
}
fieldset div:nth-of-type(4){
order: 8;
}
<fieldset>
<label for="username" class="text">Dein Benutzername<span class="req">*</span></label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">Vorname<span class="req">*</span></label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label for="sur_name" class="text">Nachname<span class="req">*</span></label>
<div class="div_text">
<input name="sur_name" type="text" id="sur_name" value="" class="textbox" required="">
</div>
<label for="example" class="text">Weiters Beispiel<span class="req">*</span></label>
<div class="div_text">
<input name="example" type="text" id="example" value="" class="textbox" required="">
</div>
</fieldset>
Hoping you are not using any css framework, please have a look at the below-working snippet with custom markup and css, hope it helps :)
body {
font-size: 14px;
font-family: sans-serif;
}
fieldset {
clear: both;
max-width: 500px;
border: 1px dashed deeppink;
}
legend {
color: #fff;
font-size: 14px;
padding: 5px 10px;
background: deeppink;
margin: 0 0 10px 15px;
}
.form-group {
width: 45%;
float: left;
padding: 0 2.5%;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
font-size: 14px;
padding: 5px 3px;
margin-bottom: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
<fieldset>
<legend>Fieldset Container</legend>
<div class="form-group">
<label for="labelX">Label x</label>
<input id="labelX" type="text" placeholder="Label X" />
</div>
<div class="form-group">
<label for="labelY">Label y</label>
<input id="labelY" type="text" placeholder="Label Y" />
</div>
<div class="form-group">
<label for="labelZ">Label z</label>
<input id="labelZ" type="text" placeholder="Label Z" />
</div>
<div class="form-group">
<label for="labelXX">Label xx</label>
<input id="labelXX" type="text" placeholder="Label XX" />
</div>
</fieldset>
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
So i want my sign up and back button (both are input type: submit) to be at the center. The problem is it's not working even if i used margin: auto. Please take note I already set width for this input.
enter image description here
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
background-image: url("StockSnap_FS24L3X9BH.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
width: 50%;
margin: 10px auto;
display: block;
}
.row {
width: 80%;
margin: 10px auto;
padding: 20px;
}
input:not([type=submit]):not([name=age]) {
width: 50%;
clear: left;
}
label {
display: inline-block;
width: 150px;
float: left;
text-align: left;
}
input[type=submit] {
width: 100px;
margin: 0 auto;
}
input[name=age] {
width: 60px;
}
#gender {
width: 100px;
}
<?php
include_once("code2_registration.php");
?>
<div class="container">
<h1 style="text-align: center"> Membership Forum </h1>
<div class="row">
<form action="register.php" method="POST">
<p> Please fill the following form to complete the registration. </p> <br/>
<label>Username:</label> <input type="text" name="username" /> <br/><br/>
<label>Password:</label> <input type="password" name="password" /> <br/><br/>
<label>First Name:</label> <input type="text" name="firstName" /> <br/><br/>
<label>Last Name:</label> <input type="text" name="lastName"> <br/><br/>
<label>Email Address:</label> <input type="text" name="email"> <br/><br/>
<label>Sex: </label><select name="gender" id="gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label>Age:</label> <input type="number" name="age"> <br/><br/>
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</form>
</div>
</div>
Use this
<div class="container">
<h1 style="text-align: center"> Membership Forum </h1>
<div class="row">
<form action="register.php" method="POST">
<p> Please fill the following form to complete the registration. </p> <br/>
<label>Username:</label> <input type="text" name="username" /> <br/><br/>
<label>Password:</label> <input type="password" name="password" /> <br/><br/>
<label>First Name:</label> <input type="text" name="firstName" /> <br/><br/>
<label>Last Name:</label> <input type="text" name="lastName"> <br/><br/>
<label>Email Address:</label> <input type="text" name="email"> <br/><br/>
<label>Sex: </label><select name="gender" id="gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label>Age:</label> <input type="number" name="age"> <br/><br/>
<div class="center">
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</div>
</form>
</div>
</div>
.center {
text-align: center;
}
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
background-image: url("StockSnap_FS24L3X9BH.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
width:50%;
margin: 10px auto;
display: block;
}
.row {
width:80%;
margin: 10px auto;
padding: 20px;
}
input:not([type=submit]):not([name=age])
{
width: 50%;
clear:left;
}
label {
display: inline-block;
width: 150px;
float: left;
text-align: left;
}
input[type=submit] {
width: 100px;
margin: 0 auto;
}
input[name=age] {
width:60px;
}
#gender {
width:100px;
}
live demo - https://jsfiddle.net/grinmax_/o5rfc8b5/
can't you simple wrap those inputs with a <div> and style it with text-align: center?
<div class="centered-div">
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</div
.centered-div {
text-align: center;
}
here is the Fiddle with this code https://fiddle.jshell.net/n3mtsrhj/1/
Try wrapping your input buttons in a div like this:
<div class="submit_block">
<input name="submit" value="Sign Up" id="submit" type="submit">
<input id="back" name="back" value="Back" type="submit">
</div>
and then apply css:
.submit_block {
text-align: center;
}