I am using the following :
Personal Detail
to navigate from one tab to another. However whenever I click on this the page jumps up. I am not using javascript and using CSS to define tabs. I am not sure how to avoid this
article.tabs {
position: relative;
display: block;
width: 60em;
height: 20em;
margin: 2em;
}
article.tabs section {
position: absolute;
display: block;
top: 1.5em;
left: 0;
height: 45em;
width: 1050px;
padding: 10px 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
z-index: 0;
}
article.tabs section:first-child {
z-index: 1;
}
article.tabs section h2 {
position: absolute;
font-size: 1em;
font-weight: normal;
width: auto;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2 {
left: 110px;
}
article.tabs section:nth-child(3) h2 {
left: 222px;
}
article.tabs section:nth-child(4) h2 {
left: 313px;
}
article.tabs section:nth-child(5) h2 {
left: 411px;
}
article.tabs section:nth-child(6) h2 {
left: 522px;
}
article.tabs section h2 a {
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2 {
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2 {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<html>
<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>add_staff</title>
<link rel="stylesheet" type="text/css" href="css/add_staff.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<form action="new_staff.php" method="POST">
<article class="tabs">
<section id="tab1">
<h2>Personal Detail</h2>
<p class="tabnav" align="right">
<img src="file:///C:/Users/Gaurav/Pictures/Saved%20Pictures/test%20photo.jpg" alt="Staff image" style="border: 2px solid ; width: 165px; height: 200px;" align="left" vspace="10">
<div class="form-group">
<label for="stafftitle">Title</label>
<select name="stafftitle" required>
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Master">Master</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
<label for="stafffname">Firstname</label>
<input name="stafffname" placeholder="First name" required>
<label for="staffsname">Surname</label>
<input name="staffsname" placeholder="Surname" required>
<br><br>
<label for="staffgender">Gender</label>
<select name="staffgender" required>
<option value="">Please select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
<option value="X">Mx</option>
</select>
<label for="staffmname">Middlename</label>
<input name="staffmname" placeholder="Middlename">
<label for="staffage">Age(yrs)</label>
<input name="staffage" type="number" placeholder="Age in years" required>
<br><br>
<label for="staffpemail">Email Address(Personal)</label>
<input name="staffpemail" type="email" placeholder="Personal email address" size="35" required>
<label for="staffdob">Birthdate</label>
<input type="date" name="staffdob" required>
<br><br>
<label for="staffwemail">Email Address(Work)</label>
<input name="staffwemail" type="email" placeholder="Work email address" size="35" required>
<label for="staffhphone">Homephone</label>
<input size="" type="number" name="staff_contact[]">
<br>
<br>
<label for="staffmobile">Mobile</label>
<input name="staff_contact[]" placeholder="Mobile" type="number" required>
<label for="staffheight">Height(cm)</label></small>
<input name="staffheight" type="number" placeholder="Height in cm" size="12" required>
<label for="staffweight">Weight(kg)</label>
<input name="staffweight" min="10" max="10000000" type="number" placeholder="Weight in Kg" required>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload" aria-hidden="true"></i></i> Upload Photo </label>
<input id="file-upload" name="staffphoto" type="file" accept=".JPG" />
<br>
<label for="staffrel">Religion</label>
<input type="text" name="staffrel" />
<label for="staffblgrp">Blood Group</label>
<select name="staffblgrp" required>
<option value="">Please select...</option>
<option value="A+">A+ve</option>
<option value="B+">B+ve</option>
<option value="AB+">AB+ve</option>
<option value="O+">O+ve</option>
<option value="A-">A-ve</option>
<option value="B-">B-ve</option>
<option value="AB-">AB-ve</option>
<option value="O-">O-ve</option>
</select>
<label for="staffnatn">Nationality</label>
<select name="stunatn" required>
<option value="">Please select...</option>
<option value="afghan">Afghan</option>
<option value="albanian">Albanian</option>
<option value="algerian">Algerian</option>
<option value="american">American</option>
<option value="andorran">Andorran</option>
<option value="angolan">Angolan</option>
<option value="antiguans">Antiguans</option>
<option value="argentinean">Argentinean</option>
<option value="armenian">Armenian</option>
<option value="australian">Australian</option>
<option value="austrian">Austrian</option>
<option value="azerbaijani">Azerbaijani</option>
<option value="bahamian">Bahamian</option>
<option value="bahraini">Bahraini</option>
<option value="bangladeshi">Bangladeshi</option>
<option value="barbadian">Barbadian</option>
<option value="barbudans">Barbudans</option>
<option value="batswana">Batswana</option>
<option value="belarusian">Belarusian</option>
<option value="belgian">Belgian</option>
<option value="belizean">Belizean</option>
<option value="beninese">Beninese</option>
<option value="bhutanese">Bhutanese</option>
<option value="bolivian">Bolivian</option>
<option value="bosnian">Bosnian</option>
<option value="brazilian">Brazilian</option>
<option value="british">British</option>
<option value="bruneian">Bruneian</option>
<option value="bulgarian">Bulgarian</option>
<option value="burkinabe">Burkinabe</option>
<option value="burmese">Burmese</option>
<option value="burundian">Burundian</option>
<option value="cambodian">Cambodian</option>
<option value="cameroonian">Cameroonian</option>
<option value="canadian">Canadian</option>
<option value="cape verdean">Cape Verdean</option>
<option value="central african">Central African</option>
<option value="chadian">Chadian</option>
<option value="chilean">Chilean</option>
<option value="chinese">Chinese</option>
<option value="colombian">Colombian</option>
<option value="comoran">Comoran</option>
<option value="congolese">Congolese</option>
<option value="costa rican">Costa Rican</option>
<option value="croatian">Croatian</option>
<option value="cuban">Cuban</option>
<option value="cypriot">Cypriot</option>
<option value="czech">Czech</option>
<option value="danish">Danish</option>
<option value="djibouti">Djibouti</option>
<option value="dominican">Dominican</option>
<option value="dutch">Dutch</option>
<option value="east timorese">East Timorese</option>
<option value="ecuadorean">Ecuadorean</option>
<option value="egyptian">Egyptian</option>
<option value="emirian">Emirian</option>
<option value="equatorial guinean">Equatorial Guinean</option>
<option value="eritrean">Eritrean</option>
<option value="estonian">Estonian</option>
<option value="ethiopian">Ethiopian</option>
<option value="fijian">Fijian</option>
<option value="filipino">Filipino</option>
<option value="finnish">Finnish</option>
<option value="french">French</option>
<option value="gabonese">Gabonese</option>
<option value="gambian">Gambian</option>
<option value="georgian">Georgian</option>
<option value="german">German</option>
<option value="ghanaian">Ghanaian</option>
<option value="greek">Greek</option>
<option value="grenadian">Grenadian</option>
<option value="guatemalan">Guatemalan</option>
<option value="guinea-bissauan">Guinea-Bissauan</option>
<option value="guinean">Guinean</option>
<option value="guyanese">Guyanese</option>
<option value="haitian">Haitian</option>
<option value="herzegovinian">Herzegovinian</option>
<option value="honduran">Honduran</option>
<option value="hungarian">Hungarian</option>
<option value="icelander">Icelander</option>
<option value="indian">Indian</option>
<option value="indonesian">Indonesian</option>
<option value="iranian">Iranian</option>
<option value="iraqi">Iraqi</option>
<option value="irish">Irish</option>
<option value="israeli">Israeli</option>
<option value="italian">Italian</option>
<option value="ivorian">Ivorian</option>
<option value="jamaican">Jamaican</option>
<option value="japanese">Japanese</option>
<option value="jordanian">Jordanian</option>
<option value="kazakhstani">Kazakhstani</option>
<option value="kenyan">Kenyan</option>
<option value="kittian and nevisian">Kittian and Nevisian</option>
<option value="kuwaiti">Kuwaiti</option>
<option value="kyrgyz">Kyrgyz</option>
<option value="laotian">Laotian</option>
<option value="latvian">Latvian</option>
<option value="lebanese">Lebanese</option>
<option value="liberian">Liberian</option>
<option value="libyan">Libyan</option>
<option value="liechtensteiner">Liechtensteiner</option>
<option value="lithuanian">Lithuanian</option>
<option value="luxembourger">Luxembourger</option>
<option value="macedonian">Macedonian</option>
<option value="malagasy">Malagasy</option>
<option value="malawian">Malawian</option>
<option value="malaysian">Malaysian</option>
<option value="maldivan">Maldivan</option>
<option value="malian">Malian</option>
<option value="maltese">Maltese</option>
<option value="marshallese">Marshallese</option>
<option value="mauritanian">Mauritanian</option>
<option value="mauritian">Mauritian</option>
<option value="mexican">Mexican</option>
<option value="micronesian">Micronesian</option>
<option value="moldovan">Moldovan</option>
<option value="monacan">Monacan</option>
<option value="mongolian">Mongolian</option>
<option value="moroccan">Moroccan</option>
<option value="mosotho">Mosotho</option>
<option value="motswana">Motswana</option>
<option value="mozambican">Mozambican</option>
<option value="namibian">Namibian</option>
<option value="nauruan">Nauruan</option>
<option value="nepalese">Nepalese</option>
<option value="new zealander">New Zealander</option>
<option value="ni-vanuatu">Ni-Vanuatu</option>
<option value="nicaraguan">Nicaraguan</option>
<option value="nigerien">Nigerien</option>
<option value="north korean">North Korean</option>
<option value="northern irish">Northern Irish</option>
<option value="norwegian">Norwegian</option>
<option value="omani">Omani</option>
<option value="pakistani">Pakistani</option>
<option value="palauan">Palauan</option>
<option value="panamanian">Panamanian</option>
<option value="papua new guinean">Papua New Guinean</option>
<option value="paraguayan">Paraguayan</option>
<option value="peruvian">Peruvian</option>
<option value="polish">Polish</option>
<option value="portuguese">Portuguese</option>
<option value="qatari">Qatari</option>
<option value="romanian">Romanian</option>
<option value="russian">Russian</option>
<option value="rwandan">Rwandan</option>
<option value="saint lucian">Saint Lucian</option>
<option value="salvadoran">Salvadoran</option>
<option value="samoan">Samoan</option>
<option value="san marinese">San Marinese</option>
<option value="sao tomean">Sao Tomean</option>
<option value="saudi">Saudi</option>
<option value="scottish">Scottish</option>
<option value="senegalese">Senegalese</option>
<option value="serbian">Serbian</option>
<option value="seychellois">Seychellois</option>
<option value="sierra leonean">Sierra Leonean</option>
<option value="singaporean">Singaporean</option>
<option value="slovakian">Slovakian</option>
<option value="slovenian">Slovenian</option>
<option value="solomon islander">Solomon Islander</option>
<option value="somali">Somali</option>
<option value="south african">South African</option>
<option value="south korean">South Korean</option>
<option value="spanish">Spanish</option>
<option value="sri lankan">Sri Lankan</option>
<option value="sudanese">Sudanese</option>
<option value="surinamer">Surinamer</option>
<option value="swazi">Swazi</option>
<option value="swedish">Swedish</option>
<option value="swiss">Swiss</option>
<option value="syrian">Syrian</option>
<option value="taiwanese">Taiwanese</option>
<option value="tajik">Tajik</option>
<option value="tanzanian">Tanzanian</option>
<option value="thai">Thai</option>
<option value="togolese">Togolese</option>
<option value="tongan">Tongan</option>
<option value="trinidadian or tobagonian">Trinidadian or Tobagonian</option>
<option value="tunisian">Tunisian</option>
<option value="turkish">Turkish</option>
<option value="tuvaluan">Tuvaluan</option>
<option value="ugandan">Ugandan</option>
<option value="ukrainian">Ukrainian</option>
<option value="uruguayan">Uruguayan</option>
<option value="uzbekistani">Uzbekistani</option>
<option value="venezuelan">Venezuelan</option>
<option value="vietnamese">Vietnamese</option>
<option value="welsh">Welsh</option>
<option value="yemenite">Yemenite</option>
<option value="zambian">Zambian</option>
<option value="zimbabwean">Zimbabwean</option>
</select>
<label for="staffcategory">Staff Category</label>
<select name="staffcategory" required>
<option value="">Please select...</option>
<option value="Principal">Principal</option>
<option value="Teacher">Teacher</option>
<option value="Administrator">Administrator</option>
<option value="General">General Staff</option>
</select>
</div>
<fieldset style="text-align:left">
<legend><i class="fa fa-home" aria-hidden="true"></i> Address Details</legend>
<label for="staffadd1">Address Line 1</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd2">Address Line 2</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd3">Address Line 3</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcity">City</label>
<input type="text" name="staff_contact[]" />
<label for="staffstate">State</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcountry">Country</label>
<input type="text" name="staff_contact[]" />
<label for="staffpcode">Pincode</label>
<input type="text" name="staff_contact[]" />
</fieldset>
<br><br>
<div style="text-align:right">
<input name="staff_petails_submit" type="submit" value="Save">
<button>Next ››</button></p>
</div>
</section>
<section id="tab2">
<fieldset>
<h2>Qualification and Work Experience Details</h2>
<fieldset>
<legend><i class="fa fa-graduation-cap" aria-hidden="true"></i>Qualification Details</legend>
<table border="2px" width="950px">
<tr>
<td>Particulars</td>
<td>School/College Name</td>
<td>Marks/CGPA Obtained</td>
<td>Year of Passing</td>
</tr>
<tr>
<td>10th Class</td>
<td><input name="staff_10sname" type="text"></td>
<td><input name="staff_10marks" type="text"></td>
<td><input name="staff_10pyear" type="text"></td>
</tr>
<tr>
<td>12th Class</td>
<td><input name="staff_12sname" type="text"></td>
<td><input name="staff_12marks" type="text"></td>
<td><input name="staff_12pyear" type="text"></td>
</tr>
<tr>
<td>Graduation</td>
<td><input name="staff_gsname" type="text"></td>
<td><input name="staff_gmarks" type="text"></td>
<td><input name="staff_gpyear" type="text"></td>
</tr>
<tr>
<td>Post Graduation</td>
<td><input name="staff_pgsname" type="text"></td>
<td><input name="staff_pgmarks" type="text"></td>
<td><input name="staff_pgpyear" type="text"></td>
</tr>
<tr>
<td>Professional Qualification</td>
<td><input name="staff_pqsname" type="text"></td>
<td><input name="staff_pqmarks" type="text"></td>
<td><input name="staff_pqpyear" type="text"></td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><i class="fa fa-industry" aria-hidden="true"></i>Work Experience</legend>
<table border="2px" width="950px">
<tr>
<td>School/Company Name</td>
<td>Date of Joining</td>
<td>Date of Leaving</td>
<td>Designation</td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
</table>
</fieldset>
<p class="tabnav" align="right"><button>‹‹ Back</button>
<input name="staff_qedetails_submit" type="submit" value="Submit">
</fieldset>
</section>
</article>
</form>
</body>
</html>
One work around is to use an anchor just before the element to target and set in fixed position
basicly:
<a id="mytarget></a>
<div>the container to style</div>
and
#mytarget {position:fixed;/* coordonates might if neede */}
#mytarget + div {/* style to apply */ }
example made from your code adding :
2 anchors taking sections ids
1 css selector/rule
modifying 2 selectors
article.tabs {
position: relative;
display: block;
width: 60em;
height: 20em;
margin: 2em;
}
article.tabs section {
position: absolute;
display: block;
top: 1.5em;
left: 0;
height: 45em;
width: 1050px;
padding: 10px 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
z-index: 0;
}
article.tabs section:first-child {
z-index: 1;
}
article.tabs section h2 {
position: absolute;
font-size: 1em;
font-weight: normal;
width: auto;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2 {
left: 110px;
}
article.tabs section:nth-child(3) h2 {
left: 222px;
}
article.tabs section:nth-child(4) h2 {
left: 313px;
}
article.tabs section:nth-child(5) h2 {
left: 411px;
}
article.tabs section:nth-child(6) h2 {
left: 522px;
}
article.tabs section h2 a {
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
a[id] {position:fixed}
article.tabs a:target + section ,
article.tabs a:target + section h2 {
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2 {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<html>
<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>add_staff</title>
<link rel="stylesheet" type="text/css" href="css/add_staff.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<form action="new_staff.php" method="POST">
<article class="tabs">
<a id="tab1"></a>
<section>
<h2>Personal Detail</h2>
<p class="tabnav" align="right">
<img src="file:///C:/Users/Gaurav/Pictures/Saved%20Pictures/test%20photo.jpg" alt="Staff image" style="border: 2px solid ; width: 165px; height: 200px;" align="left" vspace="10">
<div class="form-group">
<label for="stafftitle">Title</label>
<select name="stafftitle" required>
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Master">Master</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
<label for="stafffname">Firstname</label>
<input name="stafffname" placeholder="First name" required>
<label for="staffsname">Surname</label>
<input name="staffsname" placeholder="Surname" required>
<br><br>
<label for="staffgender">Gender</label>
<select name="staffgender" required>
<option value="">Please select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
<option value="X">Mx</option>
</select>
<label for="staffmname">Middlename</label>
<input name="staffmname" placeholder="Middlename">
<label for="staffage">Age(yrs)</label>
<input name="staffage" type="number" placeholder="Age in years" required>
<br><br>
<label for="staffpemail">Email Address(Personal)</label>
<input name="staffpemail" type="email" placeholder="Personal email address" size="35" required>
<label for="staffdob">Birthdate</label>
<input type="date" name="staffdob" required>
<br><br>
<label for="staffwemail">Email Address(Work)</label>
<input name="staffwemail" type="email" placeholder="Work email address" size="35" required>
<label for="staffhphone">Homephone</label>
<input size="" type="number" name="staff_contact[]">
<br>
<br>
<label for="staffmobile">Mobile</label>
<input name="staff_contact[]" placeholder="Mobile" type="number" required>
<label for="staffheight">Height(cm)</label>
<input name="staffheight" type="number" placeholder="Height in cm" size="12" required>
<label for="staffweight">Weight(kg)</label>
<input name="staffweight" min="10" max="10000000" type="number" placeholder="Weight in Kg" required>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload" aria-hidden="true"></i> Upload Photo </label>
<input id="file-upload" name="staffphoto" type="file" accept=".JPG" />
<br>
<label for="staffrel">Religion</label>
<input type="text" name="staffrel" />
<label for="staffblgrp">Blood Group</label>
<select name="staffblgrp" required>
<option value="">Please select...</option>
<option value="A+">A+ve</option>
<option value="B+">B+ve</option>
<option value="AB+">AB+ve</option>
<option value="O+">O+ve</option>
<option value="A-">A-ve</option>
<option value="B-">B-ve</option>
<option value="AB-">AB-ve</option>
<option value="O-">O-ve</option>
</select>
<label for="staffnatn">Nationality</label>
<select name="stunatn" required>
<option value="">Please select...</option>
<option value="afghan">Afghan</option>
<option value="albanian">Albanian</option>
<option value="algerian">Algerian</option>
<option value="american">American</option>
<option value="andorran">Andorran</option>
<option value="angolan">Angolan</option>
<option value="antiguans">Antiguans</option>
<option value="argentinean">Argentinean</option>
<option value="armenian">Armenian</option>
<option value="australian">Australian</option>
<option value="austrian">Austrian</option>
<option value="azerbaijani">Azerbaijani</option>
<option value="bahamian">Bahamian</option>
<option value="bahraini">Bahraini</option>
<option value="bangladeshi">Bangladeshi</option>
<option value="barbadian">Barbadian</option>
<option value="barbudans">Barbudans</option>
<option value="batswana">Batswana</option>
<option value="belarusian">Belarusian</option>
<option value="belgian">Belgian</option>
<option value="belizean">Belizean</option>
<option value="beninese">Beninese</option>
<option value="bhutanese">Bhutanese</option>
<option value="bolivian">Bolivian</option>
<option value="bosnian">Bosnian</option>
<option value="brazilian">Brazilian</option>
<option value="british">British</option>
<option value="bruneian">Bruneian</option>
<option value="bulgarian">Bulgarian</option>
<option value="burkinabe">Burkinabe</option>
<option value="burmese">Burmese</option>
<option value="burundian">Burundian</option>
<option value="cambodian">Cambodian</option>
<option value="cameroonian">Cameroonian</option>
<option value="canadian">Canadian</option>
<option value="cape verdean">Cape Verdean</option>
<option value="central african">Central African</option>
<option value="chadian">Chadian</option>
<option value="chilean">Chilean</option>
<option value="chinese">Chinese</option>
<option value="colombian">Colombian</option>
<option value="comoran">Comoran</option>
<option value="congolese">Congolese</option>
<option value="costa rican">Costa Rican</option>
<option value="croatian">Croatian</option>
<option value="cuban">Cuban</option>
<option value="cypriot">Cypriot</option>
<option value="czech">Czech</option>
<option value="danish">Danish</option>
<option value="djibouti">Djibouti</option>
<option value="dominican">Dominican</option>
<option value="dutch">Dutch</option>
<option value="east timorese">East Timorese</option>
<option value="ecuadorean">Ecuadorean</option>
<option value="egyptian">Egyptian</option>
<option value="emirian">Emirian</option>
<option value="equatorial guinean">Equatorial Guinean</option>
<option value="eritrean">Eritrean</option>
<option value="estonian">Estonian</option>
<option value="ethiopian">Ethiopian</option>
<option value="fijian">Fijian</option>
<option value="filipino">Filipino</option>
<option value="finnish">Finnish</option>
<option value="french">French</option>
<option value="gabonese">Gabonese</option>
<option value="gambian">Gambian</option>
<option value="georgian">Georgian</option>
<option value="german">German</option>
<option value="ghanaian">Ghanaian</option>
<option value="greek">Greek</option>
<option value="grenadian">Grenadian</option>
<option value="guatemalan">Guatemalan</option>
<option value="guinea-bissauan">Guinea-Bissauan</option>
<option value="guinean">Guinean</option>
<option value="guyanese">Guyanese</option>
<option value="haitian">Haitian</option>
<option value="herzegovinian">Herzegovinian</option>
<option value="honduran">Honduran</option>
<option value="hungarian">Hungarian</option>
<option value="icelander">Icelander</option>
<option value="indian">Indian</option>
<option value="indonesian">Indonesian</option>
<option value="iranian">Iranian</option>
<option value="iraqi">Iraqi</option>
<option value="irish">Irish</option>
<option value="israeli">Israeli</option>
<option value="italian">Italian</option>
<option value="ivorian">Ivorian</option>
<option value="jamaican">Jamaican</option>
<option value="japanese">Japanese</option>
<option value="jordanian">Jordanian</option>
<option value="kazakhstani">Kazakhstani</option>
<option value="kenyan">Kenyan</option>
<option value="kittian and nevisian">Kittian and Nevisian</option>
<option value="kuwaiti">Kuwaiti</option>
<option value="kyrgyz">Kyrgyz</option>
<option value="laotian">Laotian</option>
<option value="latvian">Latvian</option>
<option value="lebanese">Lebanese</option>
<option value="liberian">Liberian</option>
<option value="libyan">Libyan</option>
<option value="liechtensteiner">Liechtensteiner</option>
<option value="lithuanian">Lithuanian</option>
<option value="luxembourger">Luxembourger</option>
<option value="macedonian">Macedonian</option>
<option value="malagasy">Malagasy</option>
<option value="malawian">Malawian</option>
<option value="malaysian">Malaysian</option>
<option value="maldivan">Maldivan</option>
<option value="malian">Malian</option>
<option value="maltese">Maltese</option>
<option value="marshallese">Marshallese</option>
<option value="mauritanian">Mauritanian</option>
<option value="mauritian">Mauritian</option>
<option value="mexican">Mexican</option>
<option value="micronesian">Micronesian</option>
<option value="moldovan">Moldovan</option>
<option value="monacan">Monacan</option>
<option value="mongolian">Mongolian</option>
<option value="moroccan">Moroccan</option>
<option value="mosotho">Mosotho</option>
<option value="motswana">Motswana</option>
<option value="mozambican">Mozambican</option>
<option value="namibian">Namibian</option>
<option value="nauruan">Nauruan</option>
<option value="nepalese">Nepalese</option>
<option value="new zealander">New Zealander</option>
<option value="ni-vanuatu">Ni-Vanuatu</option>
<option value="nicaraguan">Nicaraguan</option>
<option value="nigerien">Nigerien</option>
<option value="north korean">North Korean</option>
<option value="northern irish">Northern Irish</option>
<option value="norwegian">Norwegian</option>
<option value="omani">Omani</option>
<option value="pakistani">Pakistani</option>
<option value="palauan">Palauan</option>
<option value="panamanian">Panamanian</option>
<option value="papua new guinean">Papua New Guinean</option>
<option value="paraguayan">Paraguayan</option>
<option value="peruvian">Peruvian</option>
<option value="polish">Polish</option>
<option value="portuguese">Portuguese</option>
<option value="qatari">Qatari</option>
<option value="romanian">Romanian</option>
<option value="russian">Russian</option>
<option value="rwandan">Rwandan</option>
<option value="saint lucian">Saint Lucian</option>
<option value="salvadoran">Salvadoran</option>
<option value="samoan">Samoan</option>
<option value="san marinese">San Marinese</option>
<option value="sao tomean">Sao Tomean</option>
<option value="saudi">Saudi</option>
<option value="scottish">Scottish</option>
<option value="senegalese">Senegalese</option>
<option value="serbian">Serbian</option>
<option value="seychellois">Seychellois</option>
<option value="sierra leonean">Sierra Leonean</option>
<option value="singaporean">Singaporean</option>
<option value="slovakian">Slovakian</option>
<option value="slovenian">Slovenian</option>
<option value="solomon islander">Solomon Islander</option>
<option value="somali">Somali</option>
<option value="south african">South African</option>
<option value="south korean">South Korean</option>
<option value="spanish">Spanish</option>
<option value="sri lankan">Sri Lankan</option>
<option value="sudanese">Sudanese</option>
<option value="surinamer">Surinamer</option>
<option value="swazi">Swazi</option>
<option value="swedish">Swedish</option>
<option value="swiss">Swiss</option>
<option value="syrian">Syrian</option>
<option value="taiwanese">Taiwanese</option>
<option value="tajik">Tajik</option>
<option value="tanzanian">Tanzanian</option>
<option value="thai">Thai</option>
<option value="togolese">Togolese</option>
<option value="tongan">Tongan</option>
<option value="trinidadian or tobagonian">Trinidadian or Tobagonian</option>
<option value="tunisian">Tunisian</option>
<option value="turkish">Turkish</option>
<option value="tuvaluan">Tuvaluan</option>
<option value="ugandan">Ugandan</option>
<option value="ukrainian">Ukrainian</option>
<option value="uruguayan">Uruguayan</option>
<option value="uzbekistani">Uzbekistani</option>
<option value="venezuelan">Venezuelan</option>
<option value="vietnamese">Vietnamese</option>
<option value="welsh">Welsh</option>
<option value="yemenite">Yemenite</option>
<option value="zambian">Zambian</option>
<option value="zimbabwean">Zimbabwean</option>
</select>
<label for="staffcategory">Staff Category</label>
<select name="staffcategory" required>
<option value="">Please select...</option>
<option value="Principal">Principal</option>
<option value="Teacher">Teacher</option>
<option value="Administrator">Administrator</option>
<option value="General">General Staff</option>
</select>
</div>
<fieldset style="text-align:left">
<legend><i class="fa fa-home" aria-hidden="true"></i> Address Details</legend>
<label for="staffadd1">Address Line 1</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd2">Address Line 2</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd3">Address Line 3</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcity">City</label>
<input type="text" name="staff_contact[]" />
<label for="staffstate">State</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcountry">Country</label>
<input type="text" name="staff_contact[]" />
<label for="staffpcode">Pincode</label>
<input type="text" name="staff_contact[]" />
</fieldset>
<br><br>
<div style="text-align:right">
<input name="staff_petails_submit" type="submit" value="Save">
<button>Next ››</button>
</div>
</section>
<a id="tab2"></a>
<section>
<fieldset>
<h2>Qualification and Work Experience Details</h2>
<fieldset>
<legend><i class="fa fa-graduation-cap" aria-hidden="true"></i>Qualification Details</legend>
<table border="2px" width="950px">
<tr>
<td>Particulars</td>
<td>School/College Name</td>
<td>Marks/CGPA Obtained</td>
<td>Year of Passing</td>
</tr>
<tr>
<td>10th Class</td>
<td><input name="staff_10sname" type="text"></td>
<td><input name="staff_10marks" type="text"></td>
<td><input name="staff_10pyear" type="text"></td>
</tr>
<tr>
<td>12th Class</td>
<td><input name="staff_12sname" type="text"></td>
<td><input name="staff_12marks" type="text"></td>
<td><input name="staff_12pyear" type="text"></td>
</tr>
<tr>
<td>Graduation</td>
<td><input name="staff_gsname" type="text"></td>
<td><input name="staff_gmarks" type="text"></td>
<td><input name="staff_gpyear" type="text"></td>
</tr>
<tr>
<td>Post Graduation</td>
<td><input name="staff_pgsname" type="text"></td>
<td><input name="staff_pgmarks" type="text"></td>
<td><input name="staff_pgpyear" type="text"></td>
</tr>
<tr>
<td>Professional Qualification</td>
<td><input name="staff_pqsname" type="text"></td>
<td><input name="staff_pqmarks" type="text"></td>
<td><input name="staff_pqpyear" type="text"></td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><i class="fa fa-industry" aria-hidden="true"></i>Work Experience</legend>
<table border="2px" width="950px">
<tr>
<td>School/Company Name</td>
<td>Date of Joining</td>
<td>Date of Leaving</td>
<td>Designation</td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
</table>
</fieldset>
<p class="tabnav" align="right"><button>‹‹ Back</button>
<input name="staff_qedetails_submit" type="submit" value="Submit">
</fieldset>
</section>
</article>
</form>
</body>
</html>
Mind this.
using a fixed anchors breaks the normal and usefull behavior, that brings to sight content targeted. Coming from an external link, the form might not be seen and visitor will have to guess where he is suppose to go and look at :)
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am attempting to use CSS grid (orderForm.css below) however the css styling is not responding to the html that i have written. I have found a lot of times I am not calling the element correctly due to nesting of divs. I was hoping you all could look at my code and tell me what is going on. Some pages it works in visual studios and some pages do not work.
/* Skeleton of pages below */
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
}
nav#original.navigation,
h1 {
grid-column: 4 / 10;
grid-row: 1 / 2;
text-align: center;
}
/* Fix the images, not correctly displaying */
div.blackLogo {
grid-column: 1 / 4;
grid-row: 1 / 2;
image-resolution: from-image 300dpi;
}
div.pinkLogo {
grid-column: 10 / 13;
grid-row: 1 / 2;
}
ul li {
display: inline;
list-style: none;
}
/* Footer not responding to grid dimensons */
footer {
grid-column: 1 / 13;
grid-row: 4 / 5;
text-align: center;
}
h1 {
padding: 10px;
}
/* div#all.container {
grid-column: 1/13 ;
grid-row: 2/3;
} */
/* div#name.container, div#billing-address.container,div#mailing-address.container {
display: inline;
grid-column: 1 / 7;
grid-row: 2 / 4;
}*/
body>div.grid-container>div#partOne.container {
grid-column: 1 / 7;
grid-row: 2 / 4;
}
/* columns not running span of grid-column dimensions */
div#partTwo.container {
grid-column: 7 / 13;
grid-row: 2 / 4;
}
/* div#product-choice.container >h2#product-Choice.heading {
text-align: center;
} */
/* div#partTwo.container > div#product-choice.container > h2#product-choice.heading {
grid-column: 7 / 13;
grid-row: 2 / 4;
} */
<div class="grid-container">
<nav class="navigation" id="original">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Order</li>
<li>Order form</li>
<li>Gallery</li>
</ul>
</nav>
<h1 class="name" id="order-form">Order Form</h1>
<div class="blackLogo">
<img src="/images/hoodHealerBlack.jpg" alt="Black Hood Healer Logo" width="200" height="80" class="logo" id="Black" />
</div>
<div class="pinkLogo">
<img src="/images/hoodHealerPink.jpg" alt="Pink Hood Healer Logo" width="200" height="80" class="logo" id="Pink" />
</div>
<div class="container" id="partOne">
<div class="container" id="name">
<h2>Name</h2>
<label for="Fname">First Name:</label>
<input type="text" id="Fname" name="first-name" />
<label for="MInitial">Middle Initial:</label>
<input type="text" id="MInitial" name="middle-initial" />
<label for="Lname">Last Name:</label>
<input type="text" id="Lname" name="last-name" />
</div>
<div class="container" id="billing-address">
<h2 class="heading" id="billingAddress">Billing Address</h2>
<label for="Street-address">Street Address:</label>
<input type="text" id="Street-address" name="StreetAdress" />
<label for="apartment-PO">Apt # or PO Box:</label>
<input type="number" id="apartment-PO" name="apartmentPOBox" />
<!--City, state ; zip code- number; apt number or po box input - number-->
<br />
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<form>
<fieldset>
<label for="state">State</label>
<select id="state" name="state">
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">
District of Columbia
</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">
Northern Marianas Islands
</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</fieldset>
</form>
<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zipcode" />
<input type="checkbox" id="mailing-address" name="mailingaddress" value="Mailing address" />
<label for="mailing-address">
Mailing address is the same as billing address.</label
><br />
<div class="container" id="mailing_address">
<h2 class="heading" id="mailingAddress">Mailing Address</h2>
<label for="Street_address">Street Address:</label>
<input type="text" id="Street_address" name="StreetAdress" />
<label for="apartment_PO">Apartment number or PO Box:</label>
<input type="number" id="apartment_PO" name="apartmentPOBox" />
<!--City, state ; zip code- number; apt number or po box input - number-->
<label for="zip_code">Zip Code:</label>
<input type="number" id="zip_code" name="zipcode" />
<label for="City">City:</label>
<input type="text" id="City" name="city" />
<form>
<fieldset>
<label for="State">State</label>
<select id="State" name="state">
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">
District of Columbia
</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">
Northern Marianas Islands
</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</fieldset>
</form>
</div>
</div>
</div>
<div class="contaitner" id="partTwo">
<div class="container" id="product-choice">
<h2 class="heading" id="product-Choice">Choose your product:</h2>
<form>
<input type="radio" id="Hat" name="Product" value="HAT" />
<label for="Hat">Hat</label><br />
<input type="radio" id="Shirt" name="Product" value="SHIRT" />
<label for="Shirt">Shirt</label><br />
<input type="radio" id="Hoodie" name="Product" value="HOODIE" />
<label for="Hoodie">Hoodie</label><br />
<input type="radio" id="Pants" name="Product" value="PANTS" />
<label for="Pants">Pants</label><br />
</form>
</div>
<div class="container" id="size-choice">
<h2 class="heading" id="size-Choice">Choose your size:</h2>
<form>
<input type="radio" id="Small" name="Size" value="SMALL" />
<label for="Small">Small</label><br />
<input type="radio" id="Medium" name="Size" value="MEDIUM" />
<label for="Medium">Medium</label><br />
<input type="radio" id="Large" name="Size" value="LARGE" />
<label for="Large">Large</label><br />
<input type="radio" id="X-Large" name="Size" value="X-LARGE" />
<label for="X-Large">X-Large</label><br />
<input type="radio" id="XX-Large" name="Size" value="XX-LARGE" />
<label for="XX-Large">XX-Large</label><br />
<input type="radio" id="XXX-Large" name="Size" value="XXX-LARGE" />
<label for="XXX-Large">XXX-Large</label><br />
<input type="radio" id="XXXX-Large" name="Size" value="XXXX-LARGE" />
<label for="XXXX-Large">XXXX-Large</label><br />
<input type="radio" id="XXXXX-Large" name="Size" value="XXXXX-LARGE" />
<label for="XXXXX-Large">X-Large</label><br />
</form>
</div>
<div class="container" id="logo-color">
<h2 class="heading" id="logo-Color">Choose your style of logo:</h2>
<form>
<input type="radio" id="pink" name="logoColor" value="PINK" />
<label for="pink">Pink</label><br />
<input type="radio" id="black" name="logoColor" value="BLACK" />
<label for="black">Black</label><br />
<!-- <input type="radio" id="Custom" name="logoColor" value="CUSTOM">
<label for="Custom">Custom</label> -->
</form>
<input type="submit" value="Submit" />
</div>
</div>
<footer>
<p>copyright Kajah's Krafts</p>
Contact Us
</footer>
</div>
After going back and double checking my CSS file and the link to the CSS file i found my error. Line 235 container is spelled wrong
Most of the time, when you aren't seeing your stylings being applied, it is a problem with loading the stylesheets. Can you ensure that you are including the link tag in every page's head?
<head>
<!-- omit -->
<link rel="stylesheet" href="/CSS/orderForm.css">
</head>
Most likely the link to your style sheet is pointing to the wrong location. /CSS/orderForm.css try removing the / like this "CSS/orderForm.css"
I am trying to email this survey and its results as a string to an email address when the "send Survey" button is clicked. I cannot figure out how to make this action occur. Does anyone have any ideas how to accomplish this? I have tried using the form tag with the action set to mailto:recipient#yahoo.com and the method as get. Is there anything I am missing here? I have read several pages on emailing surveys on HTML button actions. Thanks. I have the following code:
//preset all form values
document.ColorSurvey.Visistor.value = "John Doe";
document.ColorSurvey.State.Selectedindex = 5;
document.ColorSurvey.Password.value = "shhhhh';
document.ColorSurvey.Gender[1].checked = true;
.form {
margin: 0 auto;
width: 210px;
}
.form label {
display: inline-block;
text-align: right;
float: left;
}
.form input {
display: inline-block;
text-align: left;
float: right;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
label.orange {
color: orange;
}
label.violet {
color: violet;
}
label.grey {
color: grey;
}
label.yellow {
color: yellow;
}
label.red {
color: red;
}
label.green {
color: green;
}
label.pink {
color: pink;
}
label.blue {
color: blue;
}
<title>
Color Survey
</title>
<h1>Color Survey</h1>
<form action=”mailto:contact#yourdomain.com” method=”get” enctype=”multipart/form-data” name=”EmailTestForm”>
<div align="center">
<label>Name:</label>
<input type="text" name="name:">
<br>
<label>Email:</label>
<input type="text" name="email:">
<br>
<label>Phone:</label>
<input type="text" name="phone:">
<label>EXT:</label>
<input type="text" name="EXT:" style="width: 45px;">
<br>
<label>State:<select id="countrySelect" name="countrySelect">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<br>
<label>Password:</label>
<input type="text" name="Password:">
<label>Confirm:</label>
<input type="text" name="Confirm:">
</div>
<div align="center">
<label><input type="checkbox" name="favcolors[]" value="cycling" /> black</label>
<label class='orange'><input type="checkbox" name="favcolors[]" value="orange" /> orange</label>
<label class='violet'><input type="checkbox" name="favcolors[]" value="violet" /> violet</label>
<br>
<label class='grey'><input type="checkbox" name="favcolors[]" value="Grey" /> Grey</label>
<label class='yellow'><input type="checkbox" name="favcolors[]" value="Yellow" /> Yellow</label>
<label><input type="checkbox" name="favcolors[]" value="White" /> White</label>
<br>
<label class='red'><input type="checkbox" name="favcolors[]" value="red" /> red</label>
<label class='green'><input type="checkbox" name="favcolors[]" value="green" /> green</label>
<label><input type="checkbox" name="favcolors[]" value="other" /> other</label>
<br>
<label class='pink'><input type="checkbox" name="favcolors[]" value="pink" /> pink</label>
<label class='blue'><input type="checkbox" name="favcolors[]" value="blue" /> blue</label>
</div>
<div align='center'>
<label>Comments:</label>
<input type="text" name="Comments:" style="width: 300px; height: 40px;">
<br>
<br>
<label>Code:</label>
<input type="text" name="Comments:" style="width: 80px;">
<label>For internal use only</label>
<br>
<button>Send Survey</button>
<button>Clear Form</button>
</div>
</form>
I have full div in which there are two divs: one div for images and other div for a form. The two divs should be side by side to each other. The issue is that the form div is going below the image, not side by side with the image. Here is the error image:
I have tried but have not got the needed results.
Both the div should be responsive for all devices
.container {
width: 960px;
margin: 0px auto;
}
#left-column {
height: 500px;
width: 700px;
float: left;
background-color: blue;
}
#right-column {
height: 500px;
width: 260px;
float: left;
background-color: orange;
}
#media screen and (max-width:959px) {
.container {
width: 100%;
}
#left-column {
width: 70%;
}
#right-column {
width: 30%;
}
img {
width: 100%;
}
}
#media screen and (max-width:640px) {
#left-column {
width: 100%;
}
#right-column {
width: 100%;
}
}
#media screen and (max-width:320px) {
.container {
width: 320px;
}
}
<div class="container">
<img src="images/banner.jpg" />
<section id="left-column">
<img src="images/future.jpg" style="height:500px; width:700px;">
</section>
<aside id="right-column">
<div class="col-md-4">
<div class="container">
<div class="form-row">
<div class="form-group">
<label for="name"></label>
<input type="text" class="form-control" id="fullname" name="fullname" value="" placeholder="ENTER NAME" required>
</div>
<div class="form-group">
<label for="email"></label>
<input type="email" class="form-control" id="email" name="email" value="" placeholder="ENTER EMAIL" required>
</div>
</div>
<div class="form-group">
<label for="mobile"></label>
<input type="text" class="form-control" id="mobile" name="mobile" pattern="[0-9]{10}" maxlength="16" value="" placeholder="ENTER MOBILE NUMBER" required>
</div>
<div class="form-group">
<label for="location"></label>
<input type="text" class="form-control" id="location" name="location" value="" placeholder="ENTER LOCATION" required>
</div>
<div class="form-group">
<select class="form-control" id="program" name="program" required>
<option value="program">SELECT YOUR PROGRAM</option>
<option value="PG Diploma Programs">PG Diploma Programs</option>
<option value="Diploma Programs">Diploma Programs</option>
<option value="Certificate Programs">Certificate Programs</option>
</select>
</div>
<label style="font-color:white;" for="business">PLEASE SELECT YOUR DATE OF BIRTH
<div class="nogap">
<select name="day" class="form-control col-md-4" id="numberRooms">
<option value="dateofbirth">DD</option>
<option value="0">DD</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month" class="form-control col-md-4" id="numberBeds">
<option value="0">MM</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select class="form-control col-md-4" name="year" id="year">
<option value="0">YYYY</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
</div>
</label>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" name="terms" value="check"><p>I allow NMIMS Distance Learning to contact me to provide details</p></label>
</div>
<div class="wrapper">
<!---<input type="submit" id= "submit" name="submit" value="Submit"/>-->
<input type="submit" id="submit" name="submit" class="btn btn-primary" value="SEND ENQUIRY">
</div>
</div>
</div>
</div>
</aside>
</div>
It looks like you're using Bootstrap as a CSS framework. In that case I would recommend you check their docs on using the Bootstrap grid: https://getbootstrap.com/docs/3.3/examples/grid/
Something similar to the following will give you a responsive 2 column layout
<div class="container">
<div class="row">
<div class="col-sm-6">left column</div>
<div class="col-sm-6">right column</div>
</div>
</div>
To achieve similar using CSS you could do the follow:
.col-1,
.col-2 {
display: inline-block;
width: 50%;
}
#media screen and (max-width: 720px) {
.col-1,
.col-2 {
display: block;
width: 100%;
}
}
This isn't the only way to achieve a 2 column responsive layout but I hope it will give you some pointers. You could also experiment with using floats, flexbox or the newer CSS grid.
It would be worth your time to do some reading up on best practices for your markup and styling. There are a number of issues there that might cause you some issues further on.
I am trying to layout a table (I know a grid might work better but do not feel like changing everything for the 3rd time). I have 2 identical cells but one is smaller than the other. No matter what I do, whether I create a smaller class, or make them equal one will always be bigger than another
.grid td.normal{
width: 100px;
}
.grid td.small{
width: 50px;
}
<tr>
<!--Section Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="section.php" method="get" class="form-labels-on-toptabletry">
<label><span>Section:</span><br></label>
<select name="section">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value=8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
</select><br>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Township Search-->
<td colspan="1" class="normal">
<form name="township" action="township.php" method="get" class="form-labels-on-toptabletry">
<label><span>Township:</span><br>
<input type="text" name="township"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--TD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="td.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Township Direction:</span><br>
<select name="td">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="N">North</option>
<option value="S">South</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Range Search-->
<td colspan="1" class="small">
<form name="range" action="range.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Range:</span><br>
<input type="text" name="range"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--RD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="rd" action="rd.php" method="get" class="form-labels-on-toptabletry">
<label><span>Range Direction:</span><br>
<select name="rd">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="W">West</option>
<option value="E">East</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
</tr>
On the snippet it looks ok but here is what it looks like when I test it:
Different Size Inputs
Does anybody have any idea why this would be happening?
I've just created an image and am using it as a submit button:
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/button.png" width="170" height="40" value="Sign up" class="loudbutton" />
However the image is larger than it should be, it's flowing outside the images border (not css).
You can see the example:
All the blue outside of the black border should not show!
Does anyone have any idea what's going on?
You can see the full HTML at: http://jsfiddle.net/9vsLyhwg/
Thanks
Remove padding: 7px; from .loudbutton, .quietbutton {
#submit {
padding:0;
}
<!doctype html>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://secure.workbooks.com/resources/=QzM/workbooks_signup_form.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://secure.workbooks.com/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://secure.workbooks.com/javascripts/jquery_validate.js"></script>
<title>Signup to Workbooks</title>
<script type="text/javascript">
$(window).load(function() { $("#spinner").fadeOut("fast"); });
</script>
</head><br>
<body>
<div id="spinner"></div>
<div id="wrap">
<div id="main">
<div id="main-body">
<form id="customer_signup_form" method="post">
<input type="hidden" name="edition" id="edition" value="trial"/>
<input name="nickname" id="nickname" class="hide"/>
<table>
<tr>
<td>
<label for="first_name">First Name</label>
</td>
<td>
<input name="first_name" id="first_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="last_name">Last Name</label>
</td>
<td>
<input name="last_name" id="last_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input name="email" id="email" class="required email" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="confirm_email">Email (Confirm)</label>
</td>
<td>
<input name="confirm_email" id="confirm_email" class="required email" equalTo='#email' size="40"/>
</td>
</tr>
<tr>
<td>
<label for="job_role">Job Role</label>
</td>
<td>
<select name="job_role" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1775">Business Leader</option>
<option value="1776">Customer Support: Leader</option>
<option value="1777">Customer Support: Team Member</option>
<option value="1778">Finance: Leader</option>
<option value="1779">Finance: Team Member</option>
<option value="1780">HR: Leader</option>
<option value="1781">HR: Team Member</option>
<option value="1782">Individual Contributor</option>
<option value="1783">Industry Analyst</option>
<option value="1784">Investment Analyst</option>
<option value="1785">IT: Leader</option>
<option value="1786">IT: Team Member</option>
<option value="1787">Journalist</option>
<option value="1788">Marketing: Leader</option>
<option value="1789">Marketing: Team Member</option>
<option value="1790">Office Manager / Assistant</option>
<option value="1791">Operations: Leader</option>
<option value="1792">Operations: Team Member</option>
<option value="1793">Procurement Professional</option>
<option value="1794">Purchasing: Leader</option>
<option value="1795">Purchasing: Team member</option>
<option value="1796">Sales: Leader</option>
<option value="1798">Sales: Team Member</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="telephone">Telephone</label>
</td>
<td>
<input name="telephone" id="telephone" class="required" minlength="10" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="number_of_employees">Number of Employees</label>
</td>
<td>
<input name="number_of_employees" id="number_of_employees" class="required integer" pattern="[0-9]*" size="7"/>
</td>
</tr>
<tr>
<td>
<label for="company_name">Company Name</label>
</td>
<td>
<input name="company_name" id="company_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="industry">Industry</label>
</td>
<td>
<select name="industry" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1721">Agriculture, Forestry & Fishing</option>
<option value="1722">Charity</option>
<option value="1723">Construction</option>
<option value="1725">Education & Training</option>
<option value="1726">Energy: B2B</option>
<option value="1727">Energy: B2C</option>
<option value="1728">Energy: Utilities</option>
<option value="2204">Finance: General</option>
<option value="1729">Finance: B2B</option>
<option value="1730">Finance: B2C</option>
<option value="1731">Finance: Investment Banking</option>
<option value="1732">Finance: Retail Banking</option>
<option value="1733">Government: Local</option>
<option value="1734">Government: National</option>
<option value="1735">Government: National, Local</option>
<option value="1736">Health: B2C</option>
<option value="1737">Health: Government</option>
<option value="1738">Health: Social Care</option>
<option value="1739">Hotels & Restaurants</option>
<option value="2205">Insurance: General</option>
<option value="1740">Insurance: B2B</option>
<option value="1741">Insurance: B2C</option>
<option value="1799">IT & Telecommunications: General</option>
<option value="1742">IT & Telecommunications: Hardware</option>
<option value="1743">IT & Telecommunications: Mobile Operators</option>
<option value="1744">IT & Telecommunications: National Carriers</option>
<option value="1745">IT & Telecommunications: Reseller/Integrator</option>
<option value="1746">IT & Telecommunications: Service Provider</option>
<option value="1747">IT & Telecommunications: Software</option>
<option value="1748">IT & Telecommunications: Vendor</option>
<option value="1749">Leisure</option>
<option value="1750">Manufacturing</option>
<option value="1751">Media & Publishing</option>
<option value="1752">Mining & Quarrying</option>
<option value="1755">Real Estate</option>
<option value="1756">Research & Laboratories</option>
<option value="1759">Services: Accounting</option>
<option value="1760">Services: Advertising, Marketing & Event Management</option>
<option value="1762">Services: Consulting</option>
<option value="1763">Services: Engineering, Architecture & Design</option>
<option value="1765">Services: Legal</option>
<option value="2060">Services: Recruitment & HR</option>
<option value="1767">Services: Other</option>
<option value="1768">Services: Personal Services</option>
<option value="1769">Services: Professional Services</option>
<option value="2062">Trade Association & Professional Bodies</option>
<option value="1772">Transport & Logistics</option>
<option value="1773">Water Supply, Sewerage & Waste Management</option>
<option value="1774">Wholesale, Retail & Distribution</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="current_crm">Current CRM</label>
</td>
<td>
<select name="current_crm" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1503">Salesforce.com</option>
<option value="2495">Microsoft Dynamics CRM Cloud</option>
<option value="1042">Microsoft Dynamics CRM On Network</option>
<option value="1232">Sugar CRM</option>
<option value="1052">Sage CRM</option>
<option value="1053">Saleslogix from Infor (ex Sage)</option>
<option value="1234">Netsuite</option>
<option value="1048">Spreadsheets / None</option>
<option value="1054">Custom/In-house</option>
<option value="2059">Other</option>
<option value="1842">Workbooks</option>
<option value="1504">Access Database</option>
<option value="1051">ACT!</option>
<option value="2157">Aderant CRM</option>
<option value="2491">Base CRM</option>
<option value="2100">Bluecube CRM</option>
<option value="1512">Capsule</option>
<option value="2489">CallPro</option>
<option value="2199">CCH Central</option>
<option value="2397">Charitylog</option>
<option value="2409">CiviCRM</option>
<option value="2092">Clarity</option>
<option value="1507">ClickHQ</option>
<option value="2263">Dealmaker (TAS Group)</option>
<option value="1509">Exact</option>
<option value="2099">FileMaker</option>
<option value="2076">FileVision</option>
<option value="2135">Frontline Data</option>
<option value="1043">Goldmine</option>
<option value="1046">Goldvision</option>
<option value="1505">Highrise</option>
<option value="2137">iMIS</option>
<option value="1840">Industry Specific</option>
<option value="1841">Insightly CRM</option>
<option value="2122">Intouch CRM</option>
<option value="1928">IRIS Integra</option>
<option value="2305">Lagan CRM</option>
<option value="2271">Lexis Nexis InterAction</option>
<option value="1237">Link CRM</option>
<option value="1930">Logical Office</option>
<option value="1044">Maximizer</option>
<option value="2505">Membrain</option>
<option value="2513">Method CRM</option>
<option value="1049">MS Outlook BCM</option>
<option value="1236">Myoffice.net</option>
<option value="1537">NetAge</option>
<option value="2146">Nimble CRM</option>
<option value="1983">Officetalk</option>
<option value="2369">OOMI CRM</option>
<option value="1610">Open CRM</option>
<option value="2200">Only Considering Workbooks</option>
<option value="2182">Onyx CRM</option>
<option value="2106">Open Market</option>
<option value="1510">Oracle</option>
<option value="2327">Orchard CRM</option>
<option value="2179">Pivotal CRM</option>
<option value="2156">Progress CRM</option>
<option value="1984">Prospectsoft</option>
<option value="2155">ProTech</option>
<option value="2102">Raisers Edge - Blackbaud</option>
<option value="1047">Really Simple Systems</option>
<option value="2139">Sage - Edition Unknown</option>
<option value="1206">Salesforce.com - Enterprise Edition</option>
<option value="1041">Salesforce.com - Group Edition</option>
<option value="1205">Salesforce.com - Professional Edition</option>
<option value="2121">Salesnet CRM</option>
<option value="1541">SalesNexus</option>
<option value="1444">Salesorder</option>
<option value="1511">SAP</option>
<option value="2181">Saratoga CRM</option>
<option value="2493">Second CRM</option>
<option value="2201">Siebel</option>
<option value="1929">Shuttleworth</option>
<option value="2105">Spirit</option>
<option value="1985">Superoffiice</option>
<option value="1648">Team Scope</option>
<option value="2097">Technique MIS</option>
<option value="2138">ThankQ</option>
<option value="1229">Tracker RMS</option>
<option value="1513">TSG MRM</option>
<option value="2272">Union Square CRM</option>
<option value="1839">VTiger</option>
<option value="2159">Webchise</option>
<option value="1050">WebCRM</option>
<option value="1045">Zoho</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/button.png" width="170" height="40" value="Sign up" class="loudbutton" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$.extend($.validator.messages, {
min: 'Please choose an option.'
});
$("#customer_signup_form").validate({
submitHandler: function(form) {
$('#submit').attr('disabled', 'disabled').attr('value', 'Registering. Please wait...');
document.body.style.cursor = "progress";
form.submit();
}
});
$("#customer_first_name").focus();
});
//]]>
</script>
</div>
</div>
</div>
</body>
</html>
In your workbooks_signup_form.css css file you have the .loudbutton declaration with...
background-color: rgb(79, 111, 163);
Remove that and the overflow color is removed.
you have used this:
.loudbutton, .quietbutton {
color: #FFF;
border-radius: 0.5em;
background-color: #4F6FA3;
border: medium none;
padding: 7px;
margin: 10px 0px;
float: right;
}
remove background-color: #4F6FA3; and you are good to go.