When I set the font-size: 200%
When I set the font-size: 190%:
I tested it on the firefox and I found it.
I don't know why "font-size: 200%" makes these differences...
body {
font-size: 190%;
font-family: sans-serif;
}
input {
width: 300px;
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px gray solid;
}
#wrapper {
margin: 0, auto;
width: 1000px;
}
lable {
width: 100px;
float: left;
}
.element-container {
margin-bottom: 5px;
}
<div id="wrapper">
<div class="element-container">
<lable for="email">Email</lable>
<input type="text" name="email" id="email" placeholder="input the email here">
</div>
<div class="element-container">
<lable for="phone">Telephone</lable>
<input type="text" name="phone" id="phone" placeholder="input the phone number here">
</div>
</div>
you can give it a padding-right of 5% which will move the box away from the text.
lable {
width: 100px;
float: left;
padding-right:5%;
}
Related
I have a contact form that has a width of 45% of the parent div. Instead of white space next to it, I'd like to add a coloured div (a square grid) and add some relevant info within said coloured div. However, with my current code, I'm, unable to get the form and div inline.
I've read some SO posts this one, but they are unable to assist (maybe it's the way I have my current CSS code)
#contact {
width: 90%;
height: 700px;
margin-left: 5%;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 45%;
border: 1px solid black;
padding: .5rem;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
#contact #grid {
height: 100%
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
display: inline;
}
<div id = "contact">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
<div id = "grid">
</div>
</div>
Use this below code:
#contact {
height: 700px;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
max-width: 1140px;
}
.left-gird, .right-grid {
width: 49%;
float: left;
}
.left-gird {
margin-right: 1%;
}
.right-gird {
margin-left: 1%;
}
.color-box {
height: 400px;
background-color: gray;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 100%;
border: 1px solid black;
padding: .5rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
#contact #grid {
height: 100%;
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
display: inline;
}
h3 {
margin-top: 0;
}
<div id = "contact">
<div class="left-gird">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
</div>
<div class="right-grid">
<div class="color-box"> color box here</div>
</div>
</div>
Use float:left for form and next div for inline
#contact {
width: 90%;
height: 700px;
margin-left: 5%;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 90%;
border: 1px solid black;
padding: .5rem;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
form{
float:left;
width:50%;
}
#contact #grid {
height: 100%;
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
float:left;
}
<div id = "contact">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
<div id = "grid">
</div>
</div>
I'm styling a form for a site and I need it to look like this -
My coded version, so far, looks like this -
The name & email sections for some reason won't size properly and there seems to be padding or margin properties somewhere which I can't seem to override. Here's my code as it stands -
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
.name {
float: left;
}
input[type=text],
input[type=email] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
input[type=subject] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
textarea {
resize: vertical;
font-size: 10px;
width: 100%;
background: #F0F0F0;
height: 100px;
}
input[type=submit] {
background: #00bfff;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
}
<div class="six columns">
<form>
<fieldset>
<div class="name">
<input type="text" required placeholder="NAME">
</div>
<div class="name">
<input type="email" required placeholder="EMAIL">
</div>
<div>
<input type="subject" placeholder="SUBJECT">
</div>
<div>
<textarea placeholder="MESSAGE..."></textarea>
</div>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
UPDATE - Latest version.
I made a bunch of tweaks and kind of last track as I went, so I hope you're able to read through this and figure it out. If not, please feel free to ask questions!
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
fieldset {
border: none;
padding: 0;
margin: 0;
display: flex;
}
div.row {
display: flex;
width: 100%;
}
div.row input {
margin-left: 5px;
}
div.row input:first-child {
margin-left: 0;
}
input[type=text],
input[type=email] {
background: #E8E8E8;
font-size: 10px;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin-bottom: 5px;
padding: 6px 12px;
}
textarea {
resize: none;
font-size: 10px;
background: #E8E8E8;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 6px 12px;
margin-bottom: 5px;
}
input[type=submit] {
background: #1ba4dd;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
padding: 8px 0;
}
input[type=submit]:hover {
background: #00bfff;
}
<div class="six columns">
<form>
<fieldset>
<div class="row">
<input name="name" type="text" required placeholder="NAME">
<input name="email" type="email" required placeholder="EMAIL">
</div>
<input name="subject" type="text" placeholder="SUBJECT">
<textarea rows="8" placeholder="MESSAGE..."></textarea>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
I am creating a registration form and am wondering how can I move the whole form to the center of the page? right now its all on the left side of the container, I want it to look a bit something like this: https://id2.s.nfl.com/fans/register?returnTo=http%3A%2F%2Fweeklypickem.fantasy.nfl.com%2F
#Regcontainer {
width: 1200px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> </h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label>FIRST NAME</label>
<input type="text" name="FName" />
<label>LAST NAME</label>
<input type="text" name="SNAME" />
<br/>
<label>EMAIL ADDRESS</label> <input id="email" name="email" type="text" />
<BR/>
<label>CREATE YOUR USERNAME</label> <input name="uname" type="text" /> <br/>
<label>CREATE PASSWORD</label> <input name="pass" type="password" />
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Here is the solution I came up with... but what does it do?
#Registercontainer needs to be on the center of the page. Meaning, your fixed with of 1200px is not going to work too well. I took the approach of reducing the size of your from container to give a better look and feel like this:
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
/* ... your other properties here ... */
}
Another note, your <label> needs the for attribute as specified in this article.
Let me know if you have any questions, FYI there are many ways to make this work for you.
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
padding: 15px;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> Register With NackStack</h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label for="fname">FIRST NAME</label>
<input type="text" name="FName" id="fname" />
<br/>
<label for="sname">LAST NAME</label>
<input type="text" name="SNAME" id="sname" />
<br/>
<label for="email">EMAIL ADDRESS</label>
<input id="email" name="email" type="text" />
<br/>
<label for="uname">CREATE YOUR USERNAME</label>
<input name="uname" type="text" id="uname" />
<br/>
<label for="password">CREATE PASSWORD</label>
<input name="pass" type="password" id="password"/>
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Add margin:auto and a fixed width to the parent <div>. Example:
<div id="Registercontainer" style="margin-left:auto;margin-right:auto;width:250px">
Fiddle:
https://jsfiddle.net/mwatz122/g9ay26x3/
#Registercontainer {
text-align: center;
}
Please try this. It might help.
Put your form within a <div> like this:
<div align="center">
<!-- insert code here -->
</div>
Then in the CSS, add
form {
text-align: left;
}
i have no idea what the problem is! No matter what i try it wont work, the divs just overlap in the middle of the screen. I tried using every possible combination of display and position.
I need the divs to go one under another.
http://jsfiddle.net/s2dv6agr/
please help :(
#container{
position: relative;
}
#container1{
position: absolute;
z-index: 100;
}
#container2{
position: absolute;
z-index: 110;
}
Assuming the following HTML
<div id="container">
<div id="container1">
Hello
</div>
<div id="container2">
Hello again
</div>
</div>
#container {
position: relative;
}
#container1 {
position: relative;
z-index: 100;
}
#container2 {
position: relative;
z-index: 110;
}
This will display below each other.
http://jsfiddle.net/baLz1tvo/
Remove position:absolute and use position:relative at everywhere.
Use:
#container1{float: left}
#container2{float:right}
Try This : just example
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/stripe.png) repeat;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 371px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
margin-top:30px;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">Gaming:</label>
<input type="text" name="Name" id="Name" />
<label for="City">Sports:</label>
<input type="text" name="City" id="City" />
<label for="Email">Watching Tv:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Sleeping:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Hiking:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Skiing:</label>
<input type="text" name="Email" id="Email" />
<input type="submit" name="submit" value="Add my info" class="submit-button" />
</form>
Can you give some explanation for position: absolute , normally if we use position: absolute, everything come over to parent element. Use position: absolute with top, left , right , bottom properties to align different places.
I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance
You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/