Ey Jay
Reputation: 75
Heading on Forms
I'm having a problem here. My first two heading doesn't have a problem. But when I insert my 3rd heading the form is screwed. Here is the code. Yes, i'm quite new.
![enter image description here][1]
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<h2>Oral Expression</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
css code
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
Upvotes: 1
Views: 11342
Answers (4)
Khanh Tran
Reputation: 447
The answer is here: http://jsfiddle.net/2dcPE/5/
Please check.
Please keep in mind:
- Add
float: left;forh1andh2in Css Add to Css
br{ clear: left; }
Add
<br />in HTML to make new line
UPDATE:
HTML
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1><br/>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1><br/>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1><br/>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1><br/>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<div>
<h2>Oral Expression</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
CSS
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
br{
clear: left;
}
Upvotes: 1
sonnyhe2002
Reputation: 2121
This is happening because there is enough space to hold part of text from the h2 tag so in your h2 css add
clear:left;
Upvotes: 1
Rohit Azad Malik
Reputation: 32182
Live demo....................................................................
Hi now define your #stylized h2 to clear both
as like this
#stylized h2{
clear:both;
}
Upvotes: 1
neo108
Reputation: 5246
Remember input elements are inline elements, so the headings will appear after the input element if there is enough space for it to do so. The Oral in the heading Oral Expression is wide enough to fit after the input element and that is why it is behaving that way.
Try changing the width of .assestment-form from 400px to 375px and the heading will appear in the next line.
Upvotes: 1