I have tried using the method of making div's act like tables by using display" table; and display: table-cell; now for some reason my tables are not becoming of equal height, and im not sure as to why that is, here is what it looks like when I add in the css:
Here is when I don't:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" method="post" id="application" name="application">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png"alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix parent">
<aside class="l child">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s child">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="">(Select a Province)</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r child">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix parent">
<section class="s child">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
</fieldset>
</section>
<aside class="l child">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS:
footer.f
{
text-align: center;
}
legend
{
border: 4px groove #ff0000;
background-color: #9999ff;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 15px;
text-shadow:0.1em 0.1em 0.01em #333;
}
legend.t
{
vertical-align: top;
}
fieldset
{
border-color:#F00;
border-style: solid;
}
html, body
{
max-width: 100%;
/*overflow-x: hidden;*/
margin:0;
}
aside.r
{
float: right;
width: 31%;
margin: 1%;
}
aside.l
{
float: left;
width: 31%;
margin: 1%;
}
section.s /*shadow on sections*/
{
width: 31%;
margin: 1%;
display: inline-block;
}
.clearfix:before,
.clearfix:after
{
content: " ";
display: table;
}
.clearfix:after
{
clear: both;
}
/**
* For IE 6/7 only
*/
.clearfix
{
*zoom: 1;
}
table
{
border-spacing: 5px;
border-collapse:separate;
}
.parent
{
display: table;
}
.child
{
display: table-cell;
}
In the code that you have provided some tags are not closed
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40"> <!-- Missing </td> -->
</tr>
and here add double quotes on the class
<footer class=f> <!-- <footer class="f"> -->
Related
I've been trying to place my inputs and textarea on the right of the screen and my labels on the left. To try and create a structured form. At this moment I have tried using float and position but they seem to conflict and give an ugly result. Is there a better way to do this? thanks in advance :)
edit: I can't use divs for this project
form {
border: 2px solid dimgrey;
display: inline-block;
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);;
}
input, textarea {
display: block;
box-sizing: border-box;
float: right;
}
label {
float: left;
display: inline-block;
}
<form>
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
<label>Type vraag:
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
</label>
<label for="Vraag">Je vraag:
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
</label>
<input type="submit" value="Verzend">
</form>
<form>
<table width="100%">
<tr>
<td>Je naam:</td>
<td align="right">
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
</td>
</tr>
<tr>
<td>Je e-mailadress:</td>
<td align="right">
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
</td>
</tr>
<tr>
<td>Type vraag:</td>
<td align="right">
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
</td>
</tr>
<tr>
<td>Je vraag:</td>
<td align="right">
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
</td>
</tr>
</table>
</form>
it will work for you.
.form-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
<form>
<div class="form-group">
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
</div>
<div class="form-group">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
</div>
<div class="form-group">
<label>Type vraag:</label>
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
</div>
<div class="form-group">
<label for="Vraag">Je vraag:</label>
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
</div>
<input type="submit" value="Verzend">
</form>
Try This
<!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, maximum-scale=1">
<title>Document</title>
<style>
form {
border: 2px solid dimgrey;
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);
display: flex;
flex-wrap: wrap;
}
input, textarea,select {
margin-top: 10px;
width: 70%;
border: 1px solid #eee;
padding: 0 10px
}
label {
margin-top: 10px;
width: 30%;
flex-grow: 0;
flex-shrink: 0;
}
input[type=submit] {
margin-left: 30%;
max-width: 150px;
}
</style>
</head>
<body>
<form>
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
<label>Type vraag:</label>
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
<label for="Vraag">Je vraag:</label>
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
<input type="submit" value="Verzend">
</form>
</body>
</html>
You should move inputs and textarea tag outside label tag and set width 50% and add some margin.
form {
border: 2px solid dimgrey;
display: inline-block;
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);;
}
input, textarea, select {
display: block;
box-sizing: border-box;
float: right;
width: 50%;
margin: 10px;
}
label {
float: left;
display: inline-block;
width:50%;
}
<form>
<label for="naam">Je naam:</label>
<input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
<label for="email">Je e-mailadress:</label>
<input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte#gmail.com">
<label>Type vraag:
</label>
<select name="Type Vraag">
<option value="Business">Business</option>
<option value="ProductVraag">Vraag over een product</option>
<option value="Andere">Andere</option>
</select>
<label for="Vraag">Je vraag:
</label>
<textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
<input type="submit" value="Verzend">
</form>
I'm just trying to fit two areas together side by side like this:
but I am getting this:
I understand grids like by looking through w3schools and I try doing their examples of it but I still can't get it and I don't know why. Can someone please help me with this and also just roughly explain me grids. I tried watching Youtube videos and I almost get it, for example I know its kind of the same concept as tables in html.
Also code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
display:grid;
grid-template: 1fr 2fr;
grid-gap: 20px 20px 20px 20px;
}
table,td,th {
border: 1px solid black;
border-collapse:collapse;
}
th {
background-color:black;
color:white;
font-family:verdana;
}
.time {
background-color:#D3D3D3
}
.button {
border:0;
background:transparent;
text-decoration: underline;
font-weight:bold;
cursor:pointer;
}
td {
font-family:Calibri;
}
table {
display:inline-block;
}
form {
display:inline-block;
float:right;
}
</style>
</head>
<body>
<header>
<h1> Soccer Camp Registration</h1>
</header>
<div class="gridcontainer">
<colgroup>
<col class="times">
<colspan = "7">
</colgroup>
<div class="tables">
<table>
<tr class="days">
<th></th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td class="time">9:00 am-10:30am</td>
<td>Free Time</td>
<td rowspan="3">Technical Skills</td>
<td colspan="4">Training Session</td>
<td>Free Time</td>
</tr>
<tr>
<td class="time">10:30 am-12:00pm</td>
<td rowspan="3">Round Robin Games</td>
<td colspan="3" rowspan="2">Dribbling</td>
<td rowspan="2">Game Analysis</td>
<td> Agility</td>
</tr>
<tr>
<td class="time">1:00pm-2:30pm</td>
<td>Strength Training</td>
</tr>
<tr>
<td class="time">2:30pm-5:00pm</td>
<td colspan="3">Nutrition</td>
<td>Passing and Receiving</td>
<td colspan="2" rowspan="2">Campers Choice</td>
</tr>
<tr>
<td class="time">6:00pm-8:00pm</td>
<td colspan="5"> Night Games</td>
</tr>
</table>
</div>
<caption>July 2017 Weekly Schedule</caption>
<div class="forms">
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<h2> Request Camp Information</h2>
<fieldset class="camplc">
<legend for="camplc"> Camper Location</legend>
<label for="province"> Province</label>
<select name="province" id="province">
<option value="BC"> British Columbia</option>
<option value="ON" >Ontario</option>
<option value="AB" >ALberta</option>
<option value="QC" >Quebec</option>
<option value="YK" > Yukon</option>
</select>
</fieldset>
<fieldset class="campid">
<legend for="campid"> Camper Identification</legend>
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="fn">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="ln">
<br>
<label for="Gender">Gender</label>
<input type="radio" name="Gender" value="male" id="male">
<label for="male"> Male</label>
<input type="radio" name="Gender" value="female" id="female">
<label for="female">Female</label>
<br>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="name#example.com">
<br>
<label for="age">Camper Age</label>
<select name="age" form="age">
<option value="8">8-9</option>
<option value="10" >10-12</option>
<option value="13" >13-15</option>
<option value="16" >16-19</option>
</select>
</fieldset>
<fieldset class="info">
<legend for="info"> Please Send me information about</legend>
<input type="checkbox" name="infoa" value="Camp Dates" id="cd">
<label for="campdates"> Camp Dates</label>
<br>
<input type="checkbox" name="infoa" value="Camp Fees" id="cf">
<label for="campdates"> Camp Fees</label>
<br>
<input type="checkbox" name="infoa" value="Transportation" id="tn">
<label for="campdates">Transportation</label>
</fieldset>
<fieldset class="questions">
<legend for="questions"> Question?</legend>
<textarea placeholder="Please enter any questions or comments here" rows ="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Request Info" class="button">
<input type="reset" value="Clear Form" class="button">
</form>
</div>
</div>
</body>
</html>
Try this code this is exactly as you gave your image hope it will work for you.
body {
/* display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr; */
}
header { text-align: center;}
table,td,th {
border: 1px solid black;
border-collapse: collapse;
}
th {
background-color: black;
color: white;
font-family: verdana;
padding: 25px 67px;
}
.time { background-color:#D3D3D3 }
.button {
border: 0;
background:transparent;
text-decoration: underline;
font-weight:bold;
cursor: pointer;
}
td {
font-family: Calibri;
border: 1px solid #ccc;
padding: 20px;
}
table { display: inline-block; }
form {
display: inline-block;
border: 2px solid #262626;
/* float:right; */
}
.gridcontainer{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
border: 2px solid #262626;
}
fieldset.camplc { padding: 20px 100px; }
fieldset.campid { padding: 10px 90px; }
fieldset.info { padding: 10px 85px; }
fieldset.questions { padding: 10px 90px; }
<header>
<h1> Soccer Camp Registration</h1>
</header>
<div class="gridcontainer">
<colgroup>
<col class="times">
<colspan = "6">
<!-- </colgroup> -->
<div class="tables">
<table>
<tr class="days">
<th></th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td class="time">9:00 am-10:30am</td>
<td>Free Time</td>
<td rowspan="3">Technical Skills</td>
<td colspan="4">Training Session</td>
<td>Free Time</td>
</tr>
<tr>
<td class="time">10:30 am-12:00pm</td>
<td rowspan="3">Round Robin Games</td>
<td colspan="3" rowspan="2">Dribbling</td>
<td rowspan="2">Game Analysis</td>
<td> Agility</td>
</tr>
<tr>
<td class="time">1:00pm-2:30pm</td>
<td>Strength Training</td>
</tr>
<tr>
<td class="time">2:30pm-5:00pm</td>
<td colspan="3">Nutrition</td>
<td>Passing and Receiving</td>
<td colspan="2" rowspan="2">Campers Choice</td>
</tr>
<tr>
<td class="time">6:00pm-8:00pm</td>
<td colspan="5"> Night Games</td>
</tr>
</table>
</div>
<caption>July 2017 Weekly Schedule</caption>
</colspan>
</colgroup>
<!-- <!-- <colgroup> -->
<col class="times">
<colspan = "4">
</colgroup>
<div class="forms">
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<h2> Request Camp Information</h2>
<fieldset class="camplc">
<legend for="camplc"> Camper Location</legend>
<label for="province"> Province</label>
<select name="province" id="province">
<option value="BC"> British Columbia</option>
<option value="ON" >Ontario</option>
<option value="AB" >ALberta</option>
<option value="QC" >Quebec</option>
<option value="YK" > Yukon</option>
</select>
</fieldset>
<fieldset class="campid">
<legend for="campid"> Camper Identification</legend>
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="fn">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="ln">
<br>
<label for="Gender">Gender</label>
<input type="radio" name="Gender" value="male" id="male">
<label for="male"> Male</label>
<input type="radio" name="Gender" value="female" id="female">
<label for="female">Female</label>
<br>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="name#example.com">
<br>
<label for="age">Camper Age</label>
<select name="age" form="age">
<option value="8">8-9</option>
<option value="10" >10-12</option>
<option value="13" >13-15</option>
<option value="16" >16-19</option>
</select>
</fieldset>
<fieldset class="info">
<legend for="info"> Please Send me information about</legend>
<input type="checkbox" name="infoa" value="Camp Dates" id="cd">
<label for="campdates"> Camp Dates</label>
<br>
<input type="checkbox" name="infoa" value="Camp Fees" id="cf">
<label for="campdates"> Camp Fees</label>
<br>
<input type="checkbox" name="infoa" value="Transportation" id="tn">
<label for="campdates">Transportation</label>
</fieldset>
<fieldset class="questions">
<legend for="questions"> Question?</legend>
<textarea placeholder="Please enter any questions or comments here" rows ="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Request Info" class="button">
<input type="reset" value="Clear Form" class="button">
</form>
</div>
</div>
Read the documentation and follow tutorials carefully. Even W3schools has nice tutorials on CSS grids. It was my starting point too when I was just learning CSS grids. So, it seems you haven't followed their tutorials or other tutorials as you should because you did things that I believe the tutorials would teach you not to do. Now lets break down what I mean by that.
First, the reason why CSS grids exist is NOT for you to still use display: inline-block or float on the elements you already positioned or want to position with display: grid;. I'm talking about this specific line:
table {
display:inline-block;
}
form {
display:inline-block;
float:right;
}
You used inline-block and float on the form and table, which are the elements you're trying to position with display-grid. That's not the goal. You need to stick with one. Either position them with display grid only, or use display inline-block. Even though you didn't really give display-grid on them, but these are the same elements that you will eventually assign the grid-area property after giving the display: grid to their parents.
so with that being said, here are the changes:
First I commented them out and instead used their wrapper divs to position them. By wrapper divs, I mean the div that you created with the class ="forms" and class="tables". Also, instead of giving display:grid to the body, I instead gave it to you gridcontainer div, which you created and again did not use.
Lastly, I also put the caption that is outside you tables div to be inside it because captions tag must be inserted immediately after the table tag. In short, compare the code bellow with the one you have to understand the changes I made and again, watch and read tutorials. Even w3schools that you mentioned as being the source you are learning css grids from explains enough for you to be able to achieve the tasks you wanted. And don't stop there. Keep learning other tutorials as well and happy coding. Here is the working code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.gridcontainer {
display:grid;
grid-template-areas: 'schedule info-table';
/*
grid-template: 1fr 2fr;
grid-gap: 20px 20px 20px 20px;
*/
}
table,td,th {
border: 1px solid black;
border-collapse:collapse;
}
th {
background-color:black;
color:white;
font-family:verdana;
}
.time {
background-color:#D3D3D3
}
.button {
border:0;
background:transparent;
text-decoration: underline;
font-weight:bold;
cursor:pointer;
}
td {
font-family:Calibri;
}
/*
table {
display:inline-block;
}
*/
/*
form {
display:inline-block;
float:right;
}
*/
.tables {
grid-area: schedule;
}
.forms {
grid-area: info-table;
border: 2px solid black;
height: 80vh;
}
table {
height: 70vh;
width: 100%;
}
h1 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
caption {
display: block;
border-bottom: 1px solid black;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1> Soccer Camp Registration</h1>
</header>
<div class="gridcontainer">
<!--Did not understand why you need this, so I just commented it out. Also,
the colspan was throwing sintax errors. Check it!!!!-->
<!--
<colgroup>
<col class="times">
<colspan="7">
</colgroup>
-->
<div class="tables">
<table>
<tr class="days">
<th></th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td class="time">9:00 am-10:30am</td>
<td>Free Time</td>
<td rowspan="3">Technical Skills</td>
<td colspan="4">Training Session</td>
<td>Free Time</td>
</tr>
<tr>
<td class="time">10:30 am-12:00pm</td>
<td rowspan="3">Round Robin Games</td>
<td colspan="3" rowspan="2">Dribbling</td>
<td rowspan="2">Game Analysis</td>
<td> Agility</td>
</tr>
<tr>
<td class="time">1:00pm-2:30pm</td>
<td>Strength Training</td>
</tr>
<tr>
<td class="time">2:30pm-5:00pm</td>
<td colspan="3">Nutrition</td>
<td>Passing and Receiving</td>
<td colspan="2" rowspan="2">Campers Choice</td>
</tr>
<tr>
<td class="time">6:00pm-8:00pm</td>
<td colspan="5"> Night Games</td>
</tr>
</table>
<caption>July 2017 Weekly Schedule</caption>
</div>
<div class="forms">
<form method="POST"
action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<h2> Request Camp Information</h2>
<fieldset class="camplc">
<legend for="camplc"> Camper Location</legend>
<label for="province"> Province</label>
<select name="province" id="province">
<option value="BC"> British Columbia</option>
<option value="ON">Ontario</option>
<option value="AB">ALberta</option>
<option value="QC">Quebec</option>
<option value="YK"> Yukon</option>
</select>
</fieldset>
<fieldset class="campid">
<legend for="campid"> Camper Identification</legend>
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="fn">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="ln">
<br>
<label for="Gender">Gender</label>
<input type="radio" name="Gender" value="male" id="male">
<label for="male"> Male</label>
<input type="radio" name="Gender" value="female" id="female">
<label for="female">Female</label>
<br>
<label for="email">Email</label>
<input type="text" name="email" id="email"
placeholder="name#example.com">
<br>
<label for="age">Camper Age</label>
<select name="age" form="age">
<option value="8">8-9</option>
<option value="10">10-12</option>
<option value="13">13-15</option>
<option value="16">16-19</option>
</select>
</fieldset>
<fieldset class="info">
<legend for="info"> Please Send me information about</legend>
<input type="checkbox" name="infoa" value="Camp Dates" id="cd">
<label for="campdates"> Camp Dates</label>
<br>
<input type="checkbox" name="infoa" value="Camp Fees" id="cf">
<label for="campdates"> Camp Fees</label>
<br>
<input type="checkbox" name="infoa" value="Transportation"
id="tn">
<label for="campdates">Transportation</label>
</fieldset>
<fieldset class="questions">
<legend for="questions"> Question?</legend>
<textarea placeholder="Please enter any questions or comments
here" rows="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Request Info" class="button">
<input type="reset" value="Clear Form" class="button">
</form>
</div>
</div>
</body>
</html>
Here is the working link with the code on codepen: https://codepen.io/anon/pen/GPpXWM
I'd like to display both label and input in the same line using CSS for the following form. I tried using display, float and clear but not able to get the "look" I was coding for.
The form should look like this form
<header>
<title> Registration form </title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<h2>Register here please ! </h2>
<form id="simpleform">
<fieldset>
<label for="name">Full Name </label>
<input type="text" name="name" id="name">
<label for="age">Age in Years </label>
<input type="number" name="age" id="age">
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female<br>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
<label for="country">Country</label>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select>
<br>
<lable for="comments">Comments</lable>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
<input type="submit">
<input type="reset" value="Start Again">
</fieldset>
</form>
I re-worked on my html and css and got this desired result
*{
margin: 0;
padding: 0;
}
body{
font-family:verdana sans-serif;
background-color: #99ffcc;
}
h2{
margin-top: 100px;
text-align: center;
color: blue;
}
#simpleform{
width: 500px;
margin: auto;
height: 400px;
border: 1px solid red;
background-color: #ccc;
}
label{
text-align: right;
clear: left;
float: left;
padding-right:13px;
margin-top: 12px;
width: 150px;
}
input,textarea {
margin-top: 12px;
width: auto;
}
input[type="email"]{
margin-top:16px;}
input[type="radio"]{
margin-top: 16px;
}
input[type="checkbox"]{
margin-top: 16px;
}
input[type="number"]{
margin-top:16px;
}
select{
margin-top: 13px;
}
#buttons{
margin-left:160px;
}
input[type="submit"]{
margin-right:80px;
background-color: white;
padding: 10px;
border-radius:10px;
border: 1px solid black;
}
input[type="reset"]{
margin-right:80px;
background-color: white;
padding: 10px;
border-radius:10px;
border: 1px solid black;}
input[type="submit"]:hover
{
background-color: aquamarine;
}
input[type="reset"]:hover
{
background-color: aquamarine;
}
input[type="text"],input[type="number"],input[type="email"]{
width:200px;
border: 1px solid black;
}
<html>
<header><title> Registration form </title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<h2>Register here please ! </h2>
<form id="simpleform">
<div>
<label for="name">Full Name </label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">Age in Years </label>
<input type="number" name="age" id="age">
</div>
<div>
<label for="email">Email ID</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female<br>
</div>
<div>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
</div>
<div>
<label for="country">Country</label>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select><br>
</div>
<div>
<label for="comments" id="lable-comment">Comments</label>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
</div>
<div id="buttons">
<input type="submit">
<input type="reset" value="Start Again"></div>
</form>
</body>
</html>
There are a lot of ways to get a 2-column layout but using a table is probably the most simple and straight-forward, example:
<form id="simpleform">
<fieldset>
<table>
<tr>
<td><label for="name">Full Name</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="age">Age in Years</label></td>
<td><input type="number" name="age" id="age"></td>
</tr>
<tr>
<td><label for="email">Email ID</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="gender">Gender</label></td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td><label for="hobbies">Hobbies</label></td>
<td>
<input type="checkbox" name="hobbies" value="Reading"> Reading Books
<input type="checkbox" name="hobbies" value="movies"> Watching Movies
<input type="checkbox" name="hobbies" value="Singing"> Singing
</td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td>
<select name="country">
<option value="us">United States</option>
<option value="India">India</option>
</select>
</td>
</tr>
<tr>
<td><lable for="comments">Comments</lable></td>
<td>
<textarea name="comments" id="comments" rows=5 cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
<input type="reset" value="Start Again">
</td>
</tr>
</table>
</fieldset>
</form>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have been wanting all my input boxes ordered in a straight line, I have been following to make a website from a picture, and I wanted to know how to make the boxes straight like this:
So far my website looks like this:
Notice how all the input boxes look messy and unaligned? What can I do to make it look cleaner?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" method="post" id="application" name="application">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png"alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
First Name* <input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"> <br />
Surname* <input type="text" name="sName" id="sName" size="20" maxlength="30"> <br />
Date of Birth* <input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"> <br />
Email Address* <input type="text" name="email" id="email" size="20" maxlength="60"> <br />
Phone No.* <input type="text" name="phone" id="phone" size="20" maxlength="12"> <br />
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
Home Address* <input type="text" name="address" id="address" size="30" maxlength="60">
Apt. <input type="text" name="apt" id="apt" size="5" maxlength="4"> <br />
City* <input type="text" name="city" id="city" size="20" maxlength="40"> <br />
Province* <select id="province" name="province" size="2">
<optgroup label="Province">
<option value="">(Select a Province)</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
Postal Code* <input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN"> <br />
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
Do you <input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property
<input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property<br />
$Monthly Payment* <input type="text" name="payment" id="payment" size="8" maxlength="6"> <br />
Monthly Income* <input type="text" name="income" id="income" size="8" maxlength="6"> <br />
Years at current location* <input type="text" name="currYears" id="currYears" size="3" maxlength="2"> <br />
Pre-authorized Code* <input type="text" name="preCode" id="preCode" size="8"> <br />
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
I consent to have a credit check performed<br />
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No
<br />
I consent to have email messages sent to me<br />
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on : CURRENT Date
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS:
footer.f
{
text-align: center;
}
legend
{
border: 4px groove #ff0000;
background-color: #9999ff;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 15px;
text-shadow:0.1em 0.1em 0.01em #333;
}
legend.t
{
vertical-align: top;
}
fieldset
{
border-color:#F00;
border-style: solid;
}
html, body
{
max-width: 100%;
/*overflow-x: hidden;*/
margin:0;
}
aside.r
{
float: right;
width: 31%;
margin: 1%;
}
aside.l
{
float: left;
width: 31%;
margin: 1%;
}
section.s /*shadow on sections*/
{
width: 31%;
margin: 1%;
display: inline-block;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
An HTML table will do all the aligning for you.
<table>
<tr><td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"></td></tr>
<tr><td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td></tr>
<tr><td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"></td></tr>
<tr><td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td></tr>
<tr><td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td></tr>
</table>
Use HTML tables:
<table>
<tr><td>First Name*</td><td><input type='text' /></td></tr>
<tr><td>Surname*</td><td><input type='text' /></td></tr>
</table>
I am creating 1 of 3 nested tables within the <form> tag in my HTML document. I inserted input fields to create the text boxes to the right of the text. That all works my only problem is that the following cells: "First Name, Last Name, Address, City, State, Zip Code, and County" are not directly under one another in such a way as to keep the cells aligned and the text boxes aligned. How do I align each section? I hope I am explaining this well if not please ask for further clarification. Any help on this minor problem would be greatly appreciated.
Here's my code so far so you can see what I did:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >
</head>
<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cookies</h1>
<table width="500" border="0">
<tr>
<td align="center">About Us</td>
<td align="center">Contact Us</td>
<td align="center">Place an Order</td>
<td align="center">Sample Recipe</td>
</tr>
</table>
<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
<tr>
<td>Personal Information</td>
</tr>
<tr>
<td>First Name:
<input name="fname" id="fname" size="30" type="text" />
</td>
</tr>
<tr>
<td>Last Name:
<input name="lname" id="lname" size="30" type="text" />
</td>
</tr>
<tr>
<td>Address:
<input name="address" id="address" size="30" type="text" />
</td>
</tr>
<tr>
<td>City:
<input name="city" id="city" size="35" type="text" />
</td>
</tr>
<tr>
<td>State:
<input name="state" id="state" size="3" type="text" />
</td>
</tr>
<tr>
<td>Zip Code:
<input name="zip" id="zip" size="10" type="text" />
</td>
</tr>
<tr>
<td>Country:
<input name="country" id="country" size="10" type="text" />
</td>
</tr>
</table>
</form>
Just put the input boxes in another cell like this:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
If you make all your rows like that, then the labels and input boxes will line up.
I posted an answer to your question over at Doctype: http://doctype.com/create-nested-table-html.
You should really look into using DIV's & CSS instead of Tables and Inline Styling for designing websites.
The following is an example of separating content from presentation. You have two main components on the page: A navigation menu (which is a list of links) and a contact form (which consists of a list of form elements). The HTML stands on its own and would display reasonably even without any styling.
First, styles are reset using Yahoo!'s reset stylesheet to ensure that the starting point is the same regardless of browser-specific defaults. Then, specific styles are applied until the resulting display reasonably matches the requirements.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link id="screen-reset" rel="stylesheet" type="text/css" media="screen"
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style type="text/css">
html { background:#eef; font-size:18px;}
body { background:#eee; margin:0 auto; width:95%;}
#main { clear:both; }
#hmenu { background:#fed; height:2em }
#hmenu li {
background:#fed;
display:block;
float:left;
padding:0 4px;
border-left:solid 4px #dcb;
}
#hmenu a {
display:block;
font-family:sans-serif;
font-size:1.5em;
font-weight:bold;
line-height:1.3333;
text-decoration:none;
}
form { padding:1em 0; }
fieldset {
background:#fff;
border:solid 1px #222;
padding:0.5em 0;
margin:0 auto;
width:90%;
}
legend {
background:#eee;
padding:0.1667em;
}
form li {
clear:both;
display:block;
padding:1em 0;
}
form li label {
display:block;
float:left;
font-family:sans-serif;
font-weight:bold;
padding:0 0.25em 0 0;
text-align:right;
width:35%;
}
form li input[type="text"] {
display:block;
float:left;
}
form input[type="submit"] {
margin:0 0 0 35%;
}
</style>
<title>Contact Form</title>
</head>
<body>
<div id="hmenu">
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Place an Order</li>
<li>Sample Recipe</li>
</ul>
</div>
<div id="main">
<form name="web-order-form" id="web-order-form">
<fieldset>
<legend>Personal Information</legend>
<ul>
<li><label for="fname">First Name: </label>
<input name="fname" id="fname" size="30" type="text"></li>
<li><label for="lname">Last Name: </label>
<input name="lname" id="lname" size="30" type="text"></li>
<li><label for="address">Address: </label>
<input name="address" id="address" size="30"
type="text"></li>
<li><label for="city">City: </label>
<input name="city" id="city" size="35" type="text"></li>
<li><label for="state">State: </label>
<input name="state" id="state" size="3" type="text"></li>
<li><label for="zip">Zip Code: </label>
<input name="zip" id="zip" size="10" type="text"></li>
<li><label for="country">Country: </label>
<input name="country" id="country" size="10"
type="text"></li>
<li><input type="submit" name="submit-order" id="submit-order"
value="Place Order"></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
Simply put the inputs into tds of their own:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="lname" id="lname" size="30" type="text" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" size="30" type="text" /></td>
</tr>
And so on.
One easy option might be using flex style in table cell
<td style="display:flex">
<label>Flex</label>
<input type="text">
<input type="text">
</td>
It will show all elements in one row as long as there is enough space.