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;
}
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.
Live demo....................................................................
Hi now define your #stylized h2 to clear both
as like this
#stylized h2{
clear:both;
}
Live demo
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;
The answer is here: http://jsfiddle.net/2dcPE/5/
Please check. Please keep in mind:
Add float: left; for h1 and h2 in 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;
}
Related
I have a form I'm looking to place an image behind, like in this example:
The code is as follows:
#minicontact{width:25%;float:right;margin:-525px 155px -5px 0;}
#miniformtitle{margin:0 auto; text-align:center;}
#buttonmini{cursor:pointer;width:150px !important;height:60px !important;font-size:120% !important;text-align:center !important;background-color:#6db9fa !important;color:#ffffff !important;border-radius:20px !important; margin-top:20px; display:block; padding:0px;
margin:0 auto;}
<div id="minicontact">
<h3 id="miniformtitle">Get Started</h3>
<form class="contact" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" method="post" name="simp_cont">
<p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
/><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea><input name="form_name" type="hidden" value="contact_form" />
<button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p>
</form>
</div>
The image I'm trying to use as the background is:
Google probably won't allow you to see the image in run script, but the CSS is there for you to achieve it :)
#minicontact {
width:400px;
height:500px;
float:left;
border:1px solid #ebebeb;
background:url('https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_1280.jpg');
background-size:cover;
background-position:center;
}
<div id="minicontact">
<h3 id="miniformtitle">Get Started</h3>
<form class="contact" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" method="post" name="simp_cont">
<p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
/><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea><input name="form_name" type="hidden" value="contact_form" />
<button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p>
</form>
</div>
Just set a background image via css, and you're good to go.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
I know this has been answered but none of the solution seem to work for me. I am trying to get a label and 2 small form fields into one line. With around 90px space between the label tag and field. Something like the image below.
I am having a problem getting the label "Monday", onto the same like as the 2 field forms, and when i do manage to accomplish this, 1 out of the 2 form fields falls onto the following line. Having the worse luck with something that is probably simple.
currently it looks something like:
Please help!
div.form-group{
width:100%;
float:left;
width: 100%;
margin-left: 450px;
margin-top: -340px;
z-index:-2;
}
div.form-group > label,[type=text]{
float:left;
}
div.form-group > label{
width:100px;
text-align: left;
padding-left: -10px;
margin-right: 40px;
z-index:9;
}
div.form-group[type=text]{
margin-left: 50px;
z-index: 1
}
<div class="form-group">
<label for="Monds"> Monday </label>
<input type="text" name="Monds" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<input type="text" name="Monds" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<div>
Is this what you were looking for?
HTML:
<div id='firstColumn'>
<label for='frName'>Franchise Name</label>
<input type="text" name="frName" id="frName" placeholder="Enter franchise name" required tabindex="1"/>
<br />
<label for='name'>Your Name</label>
<input type="text" name="name" id="name" placeholder="Joe Blogs" required tabindex="2"/>
<br />
<label for='address'>Address</label>
<input type="text" name="addressNo" id="addressNo" placeholder="No" required tabindex="3"/>
<input type="text" name="addressStreet" id="addressStreet" placeholder="Street" required tabindex="4"/>
<input type="text" name="addressTown" id="addressTown" placeholder="Town / City" required tabindex="5"/>
<input type="text" name="addressZIP" id="addressZIP" placeholder="ZIP Code" required tabindex="6"/>
<br />
<label for='phone'>Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" required tabindex="7"/>
<br />
<input type='submit' />
</div>
<div id='secondColumn'>
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Monds" id="Mon" class="open_hours" value='00:00' required tabindex="8">
<span>-</span>
<input type="text" name="Monds" id="Monday" class="open_hours" value='00:00' required tabindex="9">
<hr />
</div>
<div>
<label for="Tues"> Tuesday </label>
<input type="text" name="Tues" id="Tue" class="open_hours" value='00:00' required tabindex="10">
<span>-</span>
<input type="text" name="Tues" id="Tuesday" class="open_hours" value='00:00' required tabindex="11">
<hr />
</div>
<div>
<label for="Weds"> Wednesday </label>
<input type="text" name="Weds" id="Wed" class="open_hours" value='00:00' required tabindex="12">
<span>-</span>
<input type="text" name="Weds" id="Wednesday" class="open_hours" value='00:00' required tabindex="13">
<hr />
</div>
<div>
<label for="Thus"> Thursday </label>
<input type="text" name="Thus" id="Thu" class="open_hours" value='00:00' required tabindex="14">
<span>-</span>
<input type="text" name="Thus" id="Thursday" class="open_hours" value='00:00' required tabindex="15">
<hr />
</div>
<div>
<label for="Fris"> Friday </label>
<input type="text" name="Fris" id="Fri" class="open_hours" value='00:00' required tabindex="16">
<span>-</span>
<input type="text" name="Fris" id="Friday" class="open_hours" value='00:00' required tabindex="17">
<hr />
</div>
<div>
<label for="Sats"> Saturday </label>
<input type="text" name="Sats" id="Sat" class="open_hours" value='00:00' required tabindex="18">
<span>-</span>
<input type="text" name="Sats" id="Saturday" class="open_hours" value='00:00' required tabindex="19">
<hr />
</div>
<div>
<label for="Suns"> Sunday </label>
<input type="text" name="Suns" id="Sun" class="open_hours" value='00:00' required tabindex="20">
<span>-</span>
<input type="text" name="Suns" id="Sunday" class="open_hours" value='00:00' required tabindex="21">
<hr />
</div>
</div>
CSS:
#firstColumn label,
#secondColumn p {
color: red;
}
#firstColumn {
width: 50%;
float:left;
}
#firstColumn label, #firstColumn input {
width: 90%;
display:block;
}
#addressNo + input,
#addressNo + input + input,
#addressNo + input + input + input {
margin-top: 5px;
}
#secondColumn {
float:left;
width: 50%;
}
#secondColumn div {
display:block;
width: 50%;
}
#secondColumn label {
width: 90px;
margin-top: 15px;
}
#secondColumn label:first-of-type {
margin-top: 0px;
}
#secondColumn input {
width : 15%;
text-align: center;
float: right;
}
#secondColumn span {
float: right;
}
I am trying to style my form with labels and the label styles don't seem to work correctly.
Here is what my html looks like for the form:
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<!-- Our form in HTML -->
<label for "name">Your Name (optional):</label>
<br />
<input name="name" type="text" id="name" value="" /><br />
Your E-mail (Optional):<br />
<input name="mail" type="text" value="" />
<br /> comment:<br /> <textarea name="comment" value="" ></textarea><br /> <br /> <input type="submit" value="Send" /> <br /> <input type="reset" value="Reset" /></div>
My css for this part looks like this:
.allpages {text-align:center;color:#007a86;}
h3{text-align:center;}
.webform {background-color: #eeeeee;
width: 655px; border: solid;
border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px 17px;}
.webform .label {display:inline-block; width:200px; vertical-align:top; text-align:right;}
label is not a class... it is a tag.
Working CSS for that piece:
.webform label { } /* see .label changed to label */
Also: Your elements were not laid out properly in HTML, some were not even labels.
Fixed fiddle: http://jsfiddle.net/digitalextremist/mt4jK/2/
Excerpt:
.webform label {
width:200px;
vertical-align:top;
text-align:right;
float: left
}
<label for="name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" />
You created a class selector to reference some tag with class=label
This is the mark-up I have to work with, The form is created via a wordpress plugin so I do not have control over the HTML,
<div class="wpcf7" id="wpcf7-f1-p214-o1">
<form action="/testing/contact-us/#wpcf7-f1-p214-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1" />
<input type="hidden" name="_wpcf7_version" value="2.4.1" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p214-o1" />
</div>
<fieldset>
<span class="wpcf7-form-control-wrap Name"><input type="text" name="Name" value="Name" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />
<span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="Email Address" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span><br />
<span class="wpcf7-form-control-wrap telephone"><input type="text" name="telephone" value="Telephone" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />
<span class="wpcf7-form-control-wrap company"><input type="text" name="company" value="Company" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />
<input type="submit" value="Send" class="wpcf7-submit" /><br />
</fieldset>
<fieldset>
<span class="wpcf7-form-control-wrap town-city"><textarea name="town-city" class="wpcf7-validates-as-required" cols="40" rows="10">Atleast town/city</textarea></span><br />
</fieldset>
<fieldset>
<span class="wpcf7-form-control-wrap your-enquiry"><textarea name="your-enquiry" class="wpcf7-validates-as-required" cols="40" rows="10">Enter your enquiry</textarea></span><br />
</fieldset>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
And this is my current CSS,
.page-id-214 input{
margin:0px 0px 10px 0px;
width:231px;
border:1px solid #aaaaaa;
float:left;
clear:left;
}
I am trying to make it look like this,
Currently I can only get all the elements sitting on top of each other
.page-id-214 textarea {
width:206px;
height:109px;
float:left;
}
try putting
float:left;border:0;margin:0 5px;padding:0;width:206px;
height:109px;
on the fieldset elements, rather than the input. Oh, and make the selector this:
body #wpcf7-f1-p214-o1 to increase selectivity and override any other fieldset styles set on the theme:
so that's:
body #wpcf7-f1-p214-o1 {
float:left;
border:0;
margin:0 5px;
padding:0;
width:206px;
height:109px;
}
My form views fine in IE7 and IE8 but FireFox does not display the form correctly: The problem is it does not display the form inside my "mainContent1"
Note my code below:
<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
border-style: none;
border-top: 1px solid #BFBAB0;
background-color: #F2EFE9;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
}
label em {
display: block;
color: #060;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}
Try putting a clearing div at the bottom, inside of #mainContent1...
<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
<div style="clear:both"></div>
</div>
Don't use a clearing div, it is cleaner to use the ".clearfix" method of clearing.
.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}
However, for IE you will need to add this to your IE css file:
.clearfix{zoom:1}
Then you simply add the class to the container element to clear the floats correctly.
<div id="mainContent1" class="clearfix">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>
This removes the need for extra empty elements within your HTML.