I have added a 2 column layout to my contact form.
the only thing is it does not display in 2 columns but single columns.
my html is:
<div id="container">
<div id="column1">
<h1>You can talk to me. I don't bite...</h1></div><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin#kh.co.uk
</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
and my css is:
#container {
float: left;
width: 98%;
position:relative;
}
#column1, #column2 {
width: 50%;
float: left;
position:relative;
}
please can someone tell me where I am going wrong?
thank you.
Kev
I found my problem.
my closing div tag for <div id="column1"> was not at the end of my column 1 content.
thanks for all your help.
Your HTML is invalid. You have too many closing tags. Remove the one after the closing tag and it will be fine:
See Fiddle
You have a closing div tag on the same line as the H1, It shouldnt be there so remove it.
Check this fiddle http://jsfiddle.net/WT6zC/
<div id="container">
<div id="column1">
<h1>You can talk to me. I don't bite...</h1><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin#kh.co.uk
</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
You have not written code properly.
extra
</div>
here is the fiddle
Related
I have this html snippet:
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
And I would like to select first fieldset in the form. This what I am doing:
form.job-manager-form:first-child {
background-color: red;
}
But it selects all fieldset elements. How does :first-child works?
JSFiddle is here.
You need to target the element you want and then say it's the first-child.
There is an excellent article explaining how these selectors works:
useful-nth-child-recipies
fieldset:first-child {
background-color: red;
}
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
fieldset:first-child {
background-color: red;
}
This will work. However, your first-child fieldset is set to display:none; so it will not actually show the background color.
It selects an element if it is the first child of its parent.
Your selector doesn't select any fieldsets. It selects the form.
The fieldsets have a (default) transparent background, so you can see the red through them.
To select the fieldset that is the first child of a form you would need:
form.job-manager-form > fieldset:first-child
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
I'm trying to remove the message box and I want to move the e-mail box to the right of the name, so that it all fits into the top bar.
I have tried removing the message box through the html code, but when I do, I get errors and it doesn't function properly.
I assume I have to remove something in the PHP because it's obviously not able to find the missing html code, but as I don't understand PHP I don't know what to remove.
this is the html code for the subscribe button
<div class="subscribe">
<div class="containerContact">
<div id="contactFormContainer">
<div id="contactForm">
<div class="loader"></div>
<div class="bar"></div>
<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="input_boxes">
<p><label for="name">Name</label><span class="name-missing">Please enter your name</span><br />
<input id="name" type="text" value="" name="name" />
</p>
<p>
<label for="e-mail">E-mail</label><span class="email-missing">Please enter a valid e-mail</span><br />
<input id="e-mail" type="text" value="" name="email" />
</p>
<p><label for="message">Message</label><span class="message-missing">Say something!</span><br />
<textarea id="message" rows="" cols="" name="message"></textarea>
</p>
</div>
<input class="submit" type="submit" name="submit" value="Submit Form" onfocus="this.blur()" />
</form>
</div>
<div class="contact"></div>
</div>
</div>
<!-- this is the overlay which hides the rest of the website when the Subscribe button is pressed. -->
<div id="backgroundPopup"></div>
</div>
I can't post more than one link, so here is a text dump to the PHP and CSS for the subscribe button
any help would be much appreciated!!
fiddler:
http://jsfiddle.net/9QeP4/1/
^^^ slide the result width to the left so it will show them all next to each other
code:
<div>
<div style="display: inline-block;">
<label>Account Name:</label> <br>
<label>Email Address:</label> <br>
<label>Password:</label>
</div>
<div style="display: inline-block;">
<form>
<input type="text" name="txtAccountName"> <br>
<input type="text" name="txtEmailAddress"> <br>
<input type="password" name="txtPassword"> <br>
<input type="submit" value="Submit">
</form>
</div>
<div style="display: inline-block;">
<label>Some error message</label> <br>
<label>Some other Error message</label> <br>
<label>Why was the E capitalized in that last sentence</label>
</div>
</div>
Why does this add padding/margin to the labels? It pushes them down instead of being flush against the top for some reason
Not Padding Margin issue,its alignment issue.. use vertical-align: top; your problem is solved.
<div style="display: inline-block;vertical-align: top;">
<label>Account Name:</label> <br>
<label>Email Address:</label> <br>
<label>Password:</label>
</div>
Your Html codes were not formatted properly
HTML
<div style="position: relative;">
<div style="float:left; display:inline-block;">
<label>Account Name:</label> <br/>
<label>Email Address:</label> <br/>
<label>Password:</label>
</div>
<div style="float:left;display:inline-block;">
<form action="/webroot/NewUserSignUpProcess" method="post">
<input type="text" name="txtAccountName"/> <br/>
<input type="text" name="txtEmailAddress"/> <br/>
<input type="password" name="txtPassword"/> <br/>
<input id="newSignupSubmit" type="submit" value="Submit"/>
</form>
</div>
<div style="display: inline-block;float:left;">
<label>Some error message</label> <br/>
<label>Some other Error message</label> <br/>
<label>Why was the E capitalized in that last sentence</label>
</div>
</div>
I have formatted it
Working Fiddle
It's not a margin or padding, just follows the HTML rules.
Because all three div is inline-block, so it will show in a line.
The second block is higher than the other two, so it shows like this.
I think it is better to change your html code.
Make related controls in the same group. Or in the future, it may be harder to change the layout.
I'm getting errors when trying to validate this page in HTML5:
Unclosed element fieldset.
Stray end tag fieldset.
Unclosed element form.
For this block of html:
<form class="pure-form pure-form-aligned" id="submit_form_contact" novalidate>
<fieldset>
<div class="pure-control-group">
<label for="name">Your Name:</label>
<input id="name" type="text" placeholder="Name" name="name" required>
</div>
<div class="pure-control-group">
<label for="email">Your Email:</label>
<input id="email" type="email" placeholder="Email Address" name="email" required>
</div>
<div class="pure-control-group">
<label for="email_text">Inquiry Type: </label>
<select id="inquiry_dropdown" class="pure-input-1-2" name="inquiry">
<option>General</option>
<option>Sales & Marketing</option>
<option>Press & Editorial</option>
</select>
</div>
<div class="pure-control-group">
<label for="message" style="vertical-align: top;">Message:</label>
<textarea id="message" type="text" placeholder="Enter message here..." name="message"></textarea>
</div>
<div id="errors" style="text-align: center; color: red;"></div>
<button id="contact_submit" class="pure-button pure-button-primary" style="background-color: #003A70; float:right; margin-right: 35px;margin-top:15px;">Submit</button>
</div>
</fieldset>
</form>
... I can't figure out why. Everything seems to be closed properly. Can anyone spot anything I'm doing wrong?
You have an </div> after your "contact_submit" button, but no corresponding <div>. This is causing the parser the ham up.
I would suggest a code editor such as Notepad++ - one of its features is tag matching, where it can tell you easily if you have mismatched tags.