I have a webpage with a grid at the top, at the bottom I would like to include for elements but outside of the grid. When ever I try this nothing works and the form in part of the grid set up. What ever changes i make the size of the grid cell above it will change to match.
Here is my HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TT284 EMA Question 1 Walking Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="walkEvents.css" />
</head>
<header>
<figure id="logo">
<img src="image goes here">
</figure>
</header>
<body>
<nav id="mainMenu">
<ul>
<li>
Walking Events
</li>
<li>
Other Events
</li>
<li>
Menu Option 3
</li>
<li>
Menu Option 4
</li>
<li>
Menu Option 5
</li>
<li>
Sign Out
</li>
</ul>
</nav>
<section class="gridInfo">
<header id="pageTitle">
<h1>Walking Events</h1>
</header>
<div>
<h2>Planned Walks</h2>
<p>List of planned walks will be here, starting with soonest first</p>
</div>
<div>
<h2>Walk History</h2>
<p>List of previous walks, starting with the walk finished sooner</p>
</div>
<div>
<h2>Proposed Walks</h2>
<p>List of proposed walks, sorted by date proposed with the oldest first</p>
</div>
<div>
<h2>Rejected Walks</h2>
<p>List of previously rejected sorted by order of rejection</p>
</div>
<div class="results">
<h2>Search Results</h2>
<p>Show results of search query</p>
</div>
</body>
<footer>
<section class="forms">
<div class="walkForm">
<h2>Proposals</h2>
<p id="text"><b>Name of Walk: </b><input class="form" type="text" name="nameOfWalk" size="30" maxlength="30" /></p>
<p id="text"><b>Date: </b><input class="form" type="date" name="date" size="30" maxlength="30" /></p>
<p id="text"><b>Start time: </b><input class="form" type="time" name="startTime" size="30" maxlength="30" /></p>
<p id="text"><b>Meeting point: </b><input class="form" type="text" name="meetingPoint" size="30" maxlength="30" /></p>
<p id="text"><b>Distance in miles: </b><input class="form" type="number" name="distance" size="30" maxlength="30" /></p>
<p id="text"><b>Notes: </b><input class="form" type="text" name="notes" size="30" maxlength="300" /></p>
<p><select name="status">
<option value="proposed">Proposed</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
</p>
<p><input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /></p>
</div>
<div class="searchForm">
<h2>Search</h2>
<p id="text"><b>Name of Walk: </b><input class="form" type="text" name="nameOfWalk" size="30" maxlength="30" /></p>
<p id="text"><b>Date: </b><input class="form" type="date" name="date" size="30" maxlength="30" /></p>
<p id="text"><b>Start time: </b><input class="form" type="time" name="startTime" size="30" maxlength="30" /></p>
<p id="text"><b>Meeting point: </b><input class="form" type="text" name="meetingPoint" size="30" maxlength="30" /></p>
<p id="text"><b>Distance in miles: </b><input class="form" type="number" name="distance" size="30" maxlength="30" /></p>
<p id="text"><b>Notes: </b><input class="form" type="text" name="notes" size="30" maxlength="300" /></p>
<p><select name="status">
<option value="proposed">Proposed</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
</p>
<p><input type="submit" name="search" value="Search" /> <input type="reset" name="clear" value="Clear" /></p>
</div>
</section>
</footer>
</html>
CSS code below;
nav li {
display: inline-block;
list-style-type: none;
border: 1px solid #fff;
padding: 0.5rem;
font-size: 25px
}
nav {
grid-row: 1;
grid-column: 1 / -1;
text-align: center;
}
body section {
display: grid;
grid-gap: 1rem;
grid-template-rows: 50px 250px 250px 250px;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
border: none;
padding: 1rem;
}
section header {
grid-column: 1 / -1;
}
h1 {
column-span: all;
text-align: center;
font-size: 35px;
}
body div {
border: 1px solid #aaa;
padding: 1rem;
}
footer div {
border: none;
}
#text, select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 50%;
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]{
width: 50%;
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.results{
column-span: all;
text-align: center;
}
Related
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!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>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
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>
SO my <section> appears in te top of the <nav>, let say it will text wrap the <nav> section. How will I put the <section> below the <nav>
It gives me problem every time i put some text in and the text will appear behind the nav
body {
background-color: white;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
header,
footer {
padding: 1em;
color: white;
background-color: grey;
clear: left;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
section {}
aside {
float: left;
}
aside.right {
float: right;
}
<header>
<img src="mf.png" alt="Mandaue Foam" align="left" style="width:180px;height:108.56px;">
<div style="text-align: right;">Search: <input type="text" name="Search" placeholder="Search Here"></br>
</br>
</br>
</br>
</div>
<div style="text-align: right;">AF No. : <input type="text" name="AF No." placeholder="AF No."></br>
</div>
<div style="text-align: right;">Asset No. : <input type="text" name="AF No." placeholder="Asset No."></div>
<div style="text-align: center; text"><strong> ACCOUNTABILITY FORM <strong></div>
</br>
</header>
<nav>
<div style='position:fixed;top:230px;left:100px;'><input type="radio" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)"> For Official Use </br></br>
<input type="radio" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)"> For use in showroom to be returned on <input type ="date"></br></br>
<input type="radio" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)"> For use in showroom not to be returned
<div style='position:fixed;top:230px;right:150px;'><input type="radio" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)"> For sample</br></br><div>
<input type="radio" name="progress" id="progress5" value="1" tabIndex="1" onClick="ckChange(this)"> On Loan </br></br>
<input type="radio" name="progress" id="progress6" value="1" tabIndex="1" onClick="ckChange(this)"> Other <input type="text" name="progress" id="progress6" placeholder="State the Purpose">
</nav>
<section>
</section>
Your html code is invalid. please check again, and that's what causes your above .
please look at jsfiddle for the full code.
https://jsfiddle.net/vLbmc6z9/
<header>
<div>
<img src="mf.png" alt="Mandaue Foam" align="left">
</div>
</header>
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>
I have a few textboxes set to width: 100% inside a <div> with the width of 350px, they go outside of the div on the right side, and I don't understand, why?
See this fiddle
Also, code here (same as fiddle):
<body>
<div class="centerthis">
<form method="post" action="~/AJAXcalls/InsWrkOAJAX.cshtml">
<div class="insertWorkoutFormHolder">
<label class="radioLabel" for="typ4">Primary</label>
<input type="radio" name="Type" id="typ4" value="4" class="radioSelect"><br />
<label class="radioLabel" for="typ5">Secondary</label>
<input type="radio" name="Type" id="typ5" value="5" class="radioSelect" /><br />
<label class="radioLabel" for="typ6">Assistance</label>
<input type="radio" name="Type" id="typ6" value="6" class="radioSelect" /><br />
<br>
<div class="hideThis">
<label class="radioLabel" for="hej1">Squat</label>
<input class="radioSelect" type="radio" name="Exercise" id="hej1" value="1" />
</div>
<br />
<div class="hideThis">
<label class="radioLabel" for="hej2">Benchpress</label>
<input class="radioSelect" type="radio" name="Exercise" id="hej2" value="2" />
</div>
<br />
<div class="hideThis">
<label class="radioLabel" for="hej3">Deadlift</label>
<input class="radioSelect" type="radio" name="Exercise" id="hej3" value="3" />
</div>
<br />
<div>
<input id="dailyPR" placeholder="Daily Max..." name="dailyPR" type="text" size="50" value="" class="hideThis insertWorkoutBoxes" />
</div>
<!-- Textbox for amount of weight. -->
<div>
<input placeholder="Weight..." name="Kg" type="text" size="50" value="" class="insertWorkoutBoxes" />
</div>
<!-- Textbox for number of sets. -->
<div>
<input placeholder="Number of sets..." name="Sett" type="number" size="50" value="" class="insertWorkoutBoxes" />
</div>
<!-- Textbox for number of reps. -->
<div>
<input placeholder="Number of reps..." name="Rep" type="number" size="50" value="" class="insertWorkoutBoxes" />
</div>
<!-- Textbox for date of workout. -->
<input placeholder="" type="text" spellcheck="false" autocomplete="off"
class="datepicker workoutVariSelect capitalFirst" name="Date" value="" readonly="readonly" />
<div>
<!-- Form submit button. -->
<br /><a class="AddBtn">Add</a>
</div>
</div>
</form>
</div>
</body>
CSS:
.AddBtn {
padding: 10px 70px 10px 70px;
background-color: white;
cursor:pointer;
}
.centerthis {
text-align:center;
}
.radioSelect {
width: 20px;
float: right;
margin: 0px 115px 0px 0px;
}
.radioLabel {
float:left;
margin-left: 80px;
}
.insertWorkoutFormHolder {
width: 350px;
margin:auto;
}
.workoutVariSelect {
width: 100%;
padding: 11px;
border: 1px solid white;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
font-family: Verdana;
font-weight: 500;
background: #fff center right 10px no-repeat url('Images/pil.jpg');
background-size: 12px 8px;
cursor: pointer;
user-select: none;
margin: 0;
vertical-align: middle;
}
.insertWorkoutBoxes {
border: 1px solid white;
width: 100%;
margin: 5px 0px;
padding: 11px;
}
There are some default paddings and borders set on most of the form element such as <input type="text">. You can apply box-sizing: border-box along with the width: 100%, so that padding and border will be part of total width.
div {
width: 200px;
outline: 1px solid aqua;
}
input {
width: 100%;
}
.border-box {
box-sizing: border-box;
}
<div>
<input type="text">
</div>
<div>
<input type="text" class="border-box">
</div>
The reason is the padding in the input field which is not considered in width 100%. You should use box-sizing: border-box;