So when I change the width on my website it doesn't work I've tried changing position but it just will not work
HTML and CSS:
.wrapper-main{
display: block;
height: 54%; !important
width: 0px;
background-color: #fff;
margin-bottom: 15%;
text-align: center;
vertical-align: middle;
}
<div class="wrapper-main">
<section class="section-default">
<h1 class="header">Signup</h1>
<form action="includes/sign-up.inc.php" method="post">
<label for="username" id="label">Username</label><br>
<input type="text" id="username" placeholder="Username goes here.">
<br><br>
<label for="e-mail" id="label">E-mail</label><br>
<input type="text" id="e-mail" placeholder="E-mail goes here.">
<br><br>
<label for="pwd" id="label">Password</label><br>
<input type="password" id="pwd" placeholder="Password goes here.">
<br><br>
<label for="password" id="label">Password</label><br>
<input type="text" id="pwd-repeat" placeholder="Password goes here.">
<br><br>
<button type="Submit" name="signup-submit">Signup</button>
</form>
</section>
</div>
The problem is that the width value and !important value is, in this case, is invalid.
As you can see in the picture the property is invalid. Try to give width to a text form rather than a <div>.
Because you miss ; after your !important;
height: 54% !important;
width: 100px;
Related
I've been trying to get my form elements to align for ages and tried restarting multiple times, but it's just not working with me. This is what I'm trying to get:
This is what I get:
JSFiddle demo
My main problem is probably the radio buttons, which I can't get text to the right of when they're floated right, and for some reason can't get to float left without floating everything left.
I am really new to HTML, so I might just be missing something obvious?
.container {
margin-left: 300px;
margin-right: 600px;
margin-bottom: 200px;
line-height: 3;
display: inline-block;
}
.container input {
width: 700px;
float: right;
}
.container select {
width: 400px;
float: right;
}
<div class="container">
<form action="user data.php">
<input type="text" name="fname" value="First Name"> <br>
<input type="text" name="lname" value="Last Name"> <br>
<input type="text" name="email" value="e-mail Address"> <br>
<input type="text" name="cell" value="Cell Number"> <br>
<input type="text" name="id" value="ID/Passport Number"> <br>
<input type="text" name="dob" value="Date of Birth"> <br>
<label for="course">Course:</label>
<select name="course"></select> <br>
<label for="hlevel">Highest Education Level:</label>
<select name="hlevel"></select> <br>
<p>Identification Type:</p>
<input type="radio" name="idtype" id="passnum" style="width: 5px;" value="Passport Number">
<label for="passnum"> Passport Number </label> <br>
<input type="radio" name="idtype" id="idnum" value="ID Number">
<label for="idnum"> ID Number </label> <br>
<label for="gender">Gender:</label>
<label for="pgroup">Population Group:</label>
<select name="pgroup"></select> <br>
<input type="submit" name="submitbtn" value="Submit Info">
</form>
</div>
In HTML, add class to submit button
<input class="submit-btn" type="submit" name="submitbtn" value="Submit Info">
In CSS, add below
form {
max-width: 700px;
}
input {
max-width: 700px;
}
.submit-btn {
max-width: 80px;
}
I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given:
create a label element selector to float to the left with block
display set text alignment to right assign width of 8em set an
appropriate amount of padding configure and input element and
textarea element selectors with block display of 12em bottom margin
Here is the code I have so far:
form{
float:left;
display:block;
text-align:right;
width:8em;
}
input {
display: block;
margin-bottom:1em;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
.form{
margin-left: 12em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.
Here's the working fiddle: https://jsfiddle.net/qptgsc1e/
Just some minor changes, Replace this CSS and HTML and you're good to go.
If you want to see the code changes Check it here
form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>
First lets start with fixing your HTML.
This line is formatted wrong.
<input type="email" name="email" id= value"" required> <br>
Needs to be
<input type="email" name="email" id="" value="" required> <br>
To be.
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
Now that we have that fixed as well as some spacing we can start on centering the submit button.
Now we will wrap the submit button with a div
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
Then all that is left is to style the div, you can do this which ever way you find best margin, text-align, etc.
.buttonHolder{ text-align: center; }
Final HTML:
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>
Check if this style works for you.
form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
min-width: 180px;
}
label{
display: block;
}
input {
display: block;
margin-bottom:1em;
}
input[type="submit"]{
display: block;
margin: auto;
width: auto;
min-width: 50px;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
please include style in the submit button.
<input type="submit" value="Apply Now" style="margin:0 auto;">
refer : center form submit buttons html / css
hello i'm creating a login form .but my check box and term text related to it not positioning correctly .i have add <br> tag but no effect .i tried clearfix it's not work either.here is the fiddle preview.
this is my html code
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
<label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
<label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
<label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>
<input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
<input type="submit" value="Sign Up" />
</form>
</div>
Wrap the checkbox and text in a div and float it left. Avoid the usage of <center> it will not be supported in HTML5
.mainlog {
width: 450px;
height: 250px;
border: 5px solid #DBDBDB;
border-radius: 5px;
padding: 20px;
}
.in {
padding: 8px;
border: 1px solid #DFDFDF;
width: 250px;
float: left;
margin-bottom: 10px;
border-radius: 5px;
}
.la {
width: 120px;
float: left;
text-align: left;
text-transform: uppercase;
color: #6B6B6B;
clear: both;
}
.lb {} .checkbox {
float: left;
}
}
<center>
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label>
<input name="xname" class="in" value="" type="text">
<br>
<label class="la" for="xemail">Email</label>
<input name="xemail" class="in" value="" type="text">
<br>
<label class="la" for="xpass">password</label>
<input name="xpass" class="in" value="" type="text">
<br>
<label class="la" for="xpasscon">confirm</label>
<input name="xpasscon" class="in" value="" type="text">
<br>
<div class="checkbox">
<input type="checkbox" name="term" />
<label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
<br />
</div>
<input type="submit" value="Sign Up" />
</form>
</div>
</center>
Quick fix: wrapp checkbox with it's label into div with class "width".
Then in CSS add ".width" with styles: width:100%; clear:both.
.width{
width:100%;
clear:both;
}
Demo
I did a minor change in your code and it looks good to me. I am not sure if this is what you were looking for.
Please check the fiddle here.
These were the changes I made.
HTML:
<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
<input type="checkbox" name="term" />
<label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>
CSS:
.lb {
float:left; /* Floats the element to left */
}
I hope this works for you. :)
P.S. I have removed all the <br> tags inside the <form>
I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.
remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.
I'm learning some css and want to make a two column form, without any table tags and such.
This is what i have got (code from CSS Cookbook 3ed edition).
JSfiddle HERE...
HTML code:
<div class="container">
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
CSS code:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
Because you float one div and not the other.
With a few simple CSS changes it'll work (as long as the h4 does not span multiple lines):
#register {
float: left;
width: 275px;
}
#contactinfo {
float: left;
}
See the updated fiddle.
Here's how I'd debug (except I'd use Firebug or another Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/
As stated by #Arjan in his answer, this is due to floating and its effects.
Uncomment the last CSS declaration for a solution that won't modify layout. Also add margin-top to both columns or padding-top if you want a vertical margin back...
Another option is to remove the margins from the h4 (although, as said in other answers, floating [or similar] both columns makes more sense).
h4 {margin: 0;}
You have to float all the div in your containter
#register {
float: left;
}
#contactinfo {
float:left;
margin-left:30px; /*increase or decrease if you like*/
}