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
Related
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>
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"> -->
I just started coding a small page for myself after not doing any web design for a couple of years. As I now learned, laying out the page with tables is not state-of-the-art anymore (not sure if it ever really was).
Now I am trying to layout my page with CSS but couldn't find anything on:
How to align 7 checkboxes horizontally and put the corresponding label centered below the checkboxes?
How to align 2 selects horizontally and put the corresponding label centered above the selects?
The initial pure table-code was the following:
.form fieldset {
display: table;
border: 1px solid #c6c7cc;
border-radius: 5px;
}
.form label {
display: table-cell;
text-align: right;
padding: 5px;
}
.form input,
.form select {
display: table-cell;
}
.form .cssRow {
display: table-row;
}
.form .submit {
display: table-cell;
caption-side: bottom;
display: table-caption;
text-align: center;
}
<table>
<tr>
<td align="right">Name</td>
<td align="left">
<input name="name" type="text">
</td>
</tr>
<tr>
<td align="right">Day(s) of week</td>
<td align="center">
<table>
<tr>
<td align="center">
<input type="checkbox" name="day[]" value="mo" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="tu" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="we" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="th" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="fr" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="sa" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="su" checked>
</td>
</tr>
<tr>
<td align="center">Mo</td>
<td align="center">Tu</td>
<td align="center">We</td>
<td align="center">Th</td>
<td align="center">Fr</td>
<td align="center">Sa</td>
<td align="center">Su</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right">Validity</td>
<td align="center">
<table>
<tr>
<td>Valid from</td>
<td>Valid to</td>
</tr>
<tr>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submit" value="Refresh">
</td>
</tr>
</table>
My CSS attempt so far looks like this:
<div class="form">
<fieldset>
<legend>Search</legend>
<div class="cssRow">
<label for="name">Name</label>
<input name="name" type="text" size="30" maxlength="30">
</div>
<div class="cssRow">
<label for="day[]">Day(s) of week</label>
<input name="day[]" type="text" value="ToDo" size="30" disabled>
</div>
<div class="cssRow">
<label>Validity</label>
<input type="text" value="ToDo" size="30" disabled>
</div>
<div class="submit">
<input type="submit" name="submit" value="Suchen">
</div>
</fieldset>
</div>
To illustrate my problem, I created the following JSFiddle: http://jsfiddle.net/c9a7ezyk/
Any suggestions are welcome, although I prefer a simple solution, as I am just (re)learning HTML and CSS.
I prefer a slightly different approach to the other answer, where the <input> element is nested inside of a <label>, this implicitly associates the label with the input to give all kinds of nice bonuses.
It also makes for a simpler to follow markup, with less nested containers.
Example
<label>
<input type="checkbox">
<span class="label">Sunday</span>
</label>
And then
label {
display: inline-block;
text-align: center;
}
span.label {
display: block;
}
Notice how clicking the labels check the associated checkbox properly. Selects behave exactly the same way. Because <input> and <select> are inlines by default, it means that they'll be affected by text-align: center.
Checkbox with label:
<div class="checkbox-label">
<label for="checkbox">Sunday</label>
<div class="checkbox-container">
<input name="checkbox" type="checkbox">
</div>
</div>
.checkbox-label {
display: inline-block
}
.checkbox-container {
text-align: center;
}
Notice that the checkbox is inline so you can put it in a container and use text-align: center
Also notice that I use display: inline-block on .checkbox-label so that they can be aligned horizontally (block elements, default for div, takes up a whole line and drops the following element beneath it)
I use the same principals for the selects
You can see the whole thing here:
http://codepen.io/Vall3y/pen/QwdWOe
Semantic Purity
I am a bit of an HTML purist, so here is an HTML form without any extra markup:
The legends are floated to the left and vertically centered using a line-height that matches the legends height
The inputs are wrapped in a label with display: inline-block which is given a width to force the text below / above the input
The fieldset:before properties allow us to vertically center the labels with vertical-align: middle
Full Example
The background colours are just to illustrate the layout.
* {
margin: 0;
padding: 0;
}
fieldset {
border: none;
height: 70px;
}
fieldset:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
background: #F90;
width: 0;
}
legend {
height: 100%;
line-height: 70px;
width: 150px;
text-align: center;
background: #F90;
float: left;
}
input[type=checkbox] {
margin: 0 5px;
}
.days label {
background: #F90;
width: 30px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.validity label {
background: #F90;
width: 100px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
<form>
<fieldset class="days">
<legend>Day(s) of Week</legend>
<label for="monday">
<input type="checkbox" id="monday" />Mo
</label>
<label for="tuesday">
<input type="checkbox" id="tuesday" />Tu
</label>
<label for="wednesday">
<input type="checkbox" id="wednesday" />We
</label>
<label for="thursday">
<input type="checkbox" id="thursday" />Th
</label>
<label for="friday">
<input type="checkbox" id="friday" />Fr
</label>
<label for="saturday">
<input type="checkbox" id="saturday" />Sa
</label>
<label for="sunday">
<input type="checkbox" id="sunday" />Su
</label>
</fieldset>
<fieldset class="validity">
<legend>Validity</legend>
<label for="from">Valid From
<select id="from">
<option>Option</option>
</select>
</label>
<label for="to">Valid to
<select id="to">
<option>Option</option>
</select>
</label>
</fieldset>
</form>
Demo here
Here is the code:
<html>
<body>
<div>Name <input type="text"></input></div><br>
<div>Day(s) of week</div>
<div style="margin-left: 120px;margin-top: -25px;">
<div><input type="checkbox" checked><br>Mo</input></div>
<div style="
width: 10px;
margin-left: 30px;
margin-top: -37px;">
<input type="checkbox" checked><br>Tu</input></div>
<div style="
width: 10px;
margin-left: 60px;
margin-top: -37px;">
<input type="checkbox" checked><br>We</input></div>
<div style="
width: 10px;
margin-left: 90px;
margin-top: -37px;">
<input type="checkbox" checked><br>Th</input></div>
<div style="
width: 10px;
margin-left: 120px;
margin-top: -37px;">
<input type="checkbox" checked><br>Fr</input></div>
<div style="
width: 10px;
margin-left: 150px;
margin-top: -37px;">
<input type="checkbox" checked><br>Sa</input></div>
<div style="
width: 10px;
margin-left: 180px;
margin-top: -37px;"><input type="checkbox" checked><br>Su</input>
</div>
</div>
<br>
<div>Validity
<select>
<option>January</option>
<option>February</option>
</select>
<select>
<option>January</option>
<option>February</option>
</select>
</div>
</body>
</html>
I understand css and have an external file, but I don't know how to move everything from this poll to the css file. The poll is under the div id "poll" so anything I change in css will affect the entire poll instead of specific parts. Can I split the question of the poll and the answers into separate divs or is there a better way to re-write the code?
I know that the poll still works but I like to be organized and the validator is showing many errors because of this.
<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
<table>
<tr>
<th colspan="2">What game site do you visit most?</th>
</tr>
<tr>
<td>
<input type="radio" name="answer" value="1" id="t78ar8answer1">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="2" id="t78ar8answer2">
</td>
<td>
<label for="t78ar8answer2">GameSpot</label>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="3" id="t78ar8answer3">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="4" id="t78ar8answer4">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="5" id="t78ar8answer5">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font>
</td>
</tr>
<tr>
<td colspan="2" height="10">
<center>
<input type="submit" value=" Vote ">
<input type="submit" name="view" value=" View ">
</center>
</td>
</tr>
</a> </font>
</td>
</tr>
</table>
</form>
</div>
Here's the jsfiddle http://jsfiddle.net/qX3Jp/ for a visual. Also, I know the code's format isnt right. I did that because it was all in one line and harder to read. If any additional information is needed, please ask before rejecting my question. Thanks
Here is a jsfiddle showing how i would do it. without a table because I hate tables and think that the only time they should be used is to display data and never for page layout.
also all of the styling has been separated from the markup.
for those too lazy to click the link... here is the code.
HTML:
<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
<h2 id="title">What game site do you visit most?</h2>
<div id="radio_btns">
<input type="radio" name="answer" value="1" id="t78ar8answer1">Ign<br />
<input type="radio" name="answer" value="2" id="t78ar8answer2">GameSpot<br />
<input type="radio" name="answer" value="3" id="t78ar8answer3">GameFAQs<br />
<input type="radio" name="answer" value="4" id="t78ar8answer4">GamerZone<br />
<input type="radio" name="answer" value="5" id="t78ar8answer5">Mmohut
</div>
<div id="submit_btns">
<input type="submit" value=" Vote ">
<input type="submit" name="view" value=" View ">
</div>
</form>
</div>
CSS:
#poll {
margin: 30px 0px 0px 5px;
font-family: Tahoma;
}
#radio_btns {
margin-bottom: 5px;
font-size: 13px;
}
#radio_btns input {
margin: 5px 10px 5px 5px;
}
#title {
margin-bottom: 3px;
font-size: 13px;
}
#submit_btns {
margin: 0px 0px 0px 60px;
}
notice that I broke the markup into sections and gave them ID's to make the CSS styling easier.
I went full form and removed what I see as unnecessary elements: tables + more. I put the font information in the body tag. Everything else in the CSS is layout related.
CSS:
* {
padding:0;
margin:0;
}
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#000;
}
label {
display:block;
}
fieldset {
border:none;
text-align:center;
}
legend {
font-weight:bold;
}
HTML:
<form method="post" action="http://poll.pollcode.com/t78ar8" id="poll">
<legend>What game site do you visit most?</legend>
<label for="t78ar8answer1"><input type="radio" name="answer" value="1" id="t78ar8answer1"> Ign</label>
<label for="t78ar8answer2"><input type="radio" name="answer" value="2" id="t78ar8answer2"> GameSpot</label>
<label for="t78ar8answer3"><input type="radio" name="answer" value="3" id="t78ar8answer3"> GameFAQs</label>
<label for="t78ar8answer4"><input type="radio" name="answer" value="4" id="t78ar8answer4"> GamerZone</label>
<label for="t78ar8answer5"><input type="radio" name="answer" value="5" id="t78ar8answer5"> Mmohut</label>
<fieldset>
<input type="submit" value=" Vote ">
<input type="submit" name="view" value=" View ">
</fieldset>
</form>
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.