Hi I am having some problems with the positioning of a submit button. I have posted the code below.
HTML
<div class="search">
<form action="post">
<input type="text" name="fname" placeholder="First name">
<input type="text" name="lname" placeholder="Last name">
<input type="submit" name="submit" value="Search">
</form>
</div>
CSS
.search {
position: absolute;
background-color: red;
width: 100%;
height: 30px;
}
input[type="text"] {
background-color: #f7f7f7;
height: 30px;
width: 280px;
color: #4D4C4C;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding: 0px 5px 0px 5px;
-webkit-box-sizing: border-box;
moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(147, 184, 189,0.8);
}
input[type="submit"] {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
height: 30px;
width: 100px;
}
Here is an image showing the output. My problem is that there is a small space above the submit button and I cant find out why since they both have height set to 30px . I want the button to have the same height as the .search div. Height: 100% does not seem to work.
http://i57.tinypic.com/atswm0.png
Try adding:
input[type="submit"] {
position: absolute;
}
Related
The following problem only happens in Firefox. The html after my textarea appears in the text box when the page runs in the browser. It works fine on Chrome and Safari. I've cleared my cache but it's still doing it. I can't work out why any code would appear in the box after the closing tag. Screenshot below to better explain the problem.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.home-name {
position: absolute;
width: 828px;
height: 38px;
left: 303px;
top: 4184px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
/* identical to box height, or 167% */
text-align: left;
color: #eaeaea;
}
input[type=text] {
padding-left: 20px;
padding-top: 2px;
}
.home-email {
position: absolute;
width: 406px;
height: 38px;
left: 303px;
top: 4236px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-size: 15px;
line-height: 18px;
/* identical to box height */
color: #d3d3d3;
}
.home-phone {
position: absolute;
width: 406px;
height: 38px;
left: 725px;
top: 4236px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-size: 15px;
line-height: 18px;
/* identical to box height */
color: #d3d3d3;
}
.home-message {
position: absolute;
width: 828px;
height: 167px;
left: 303px;
top: 4288px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 18px;
;
/* identical to box height */
color: #eaeaea;
}
.home-message-contact {
position: absolute;
width: 163px;
height: 47px;
left: 638px;
top: 4490px;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
<body>
<form>
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" required>
</div>
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" required>
</div>
<div class="message-form">
<textarea placeholder="Message" class="home-message" required></textarea>
</div>
</form>
<button class="home-message-contact" type="submit">Submit</button>
Looking on your code, you forgot to close </head>. Although it could be unclosed quote, or some script. Your code works fine. You can attach a full code of your file.
UPDATED
I'v recreated your issue. You forgot to close </textarea>
Like this
<textarea placeholder="Message" class="home-message" required></textarea>
This what happens when I removed </textarea>
UPDATE 2
Try to put <button class="home-message-contact" type="submit">Submit</button> inside tag <form>.
Or use construction like this
<div>
<form id="my-form">
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<!-- ... -->
<button type="submit" form="my-form">Submit</button>
</div>
Your question is not clear, however I found same results across browsers.
Closing of head is missing </head> is your html
just change it and refresh on Firefox pressing Shift + F5.
I have a form the whole form needs to be centered in the page. The inputs need some space around the letters for design reasons. If I give a padding the inputs are not perfectly centered anymore.
Can I have the inputs centered and the text inside with some space at the same time?
Here to check:
https://jsfiddle.net/291thr5d/
CSS:
form {
margin: 40px auto;
width: 80%; max-width: 600px; min-width: 300px;
background-color: aliceblue;
}
.title {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size:40px; line-height:40px;
letter-spacing: 1px;
margin:10px 0; padding: 20px;
}
HTML:
<form action="update.php" method="post">
<input type="text" name="titol" value="Title post" class="title">
<input type="submit" name= "actualitzar" value="Submit" class="submit">
</form>
You need to add:
* {
box-sizing: border-box;
}
form {
margin: 40px auto;
width: 80%;
min-width: 300px;
background-color: aliceblue;
}
.title {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
line-height: 40px;
letter-spacing: 1px;
margin: 10px 0;
padding: 20px;
}
* {
box-sizing: border-box;
}
<form action="update.php" method="post">
<input type="text" name="titol" value="Title post" class="title">
<input type="submit" name="actualitzar" value="Submit" class="submit">
</form>
box-sizing includes padding and border in the element's total width and height
Documentation
please add text-align: center to your .title class properties.
form {
margin: 40px auto;
width: 80%;
min-width: 300px;
background-color: aliceblue;
}
.title {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
line-height: 40px;
letter-spacing: 1px;
margin: 10px 0;
padding: 20px;
text-align: center;
}
* {
box-sizing: border-box;
}
<form action="update.php" method="post">
<input type="text" name="titol" value="Title post" class="title">
<input type="submit" name="actualitzar" value="Submit" class="submit">
</form>
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 have a login form with labels and input, i can not get the labels to go on the left and input on the right. Currently they are sitting on top of each other.
Here is the HTML:
<div class="login">
<form name="login" action="submit" method="get" accept- charset="utf-8">
<label for="usermail">Username</label>
<input type="email" name="usermail" placeholder="yourname#email.com" required>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
<input type="submit" value="Login">
</form>
</div>
Here is the CSS:
form {
margin:auto;
position:relative;
width:375px;
height:250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
}
input { float:right;
width:350px;
display:block;
border: 1px solid #999;
height: 25px;
}
Here is the JSFiddle https://jsfiddle.net/ojz87d0x/
On input, change display:block; to display:inline-block;, and add the following:
label {
display: inline-block;
float:left;
clear:both;
}
input[type="submit"] {
clear: both;
}
You'll also need to make sure that the width of the input and the width of the form are different enough to allow space for the label. In this example [in the fiddle]. I set input to 275px and form to 375px.
Here's a newer update to your fiddle.
First of all, the inputs are too wide for both the labels and inputs to be next to each other inside the form. So either widen the form or shorten the inputs.
Next, add float: left to the labels.
form {
margin: auto;
position: relative;
width: 375px;
height: 250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
}
input {
float: right;
width: 300px; /*smaller width*/
display: block;
border: 1px solid #999;
height: 25px;
}
label {
float: left;
margin-top: 3px;
<div class="login">
<form name="login" action="submit" method="get" accept- charset="utf-8">
<label for="usermail">Username</label>
<input type="email" name="usermail" placeholder="yourname#email.com" required>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
<input type="submit" value="Login">
</form>
</div>
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have created a form and it is supposed to look like this:
Can someone please help me edit my code to look like the above image and explain what I was doing wrong? A JSFiddle would be amazing so I can understand how to fix it.
The zip label and field needs to be brought up and the submit button pushed to the right, yet it's not working for me :(
My attempt is as follows:
http://jsfiddle.net/2w6mK/
CSS:
#form-container {
width: 710px;
height: 450px;
padding: 20px 50px;
margin: 35px 0 0 25px;
}
form {
position: relative;
margin-left: -10px;
}
form label {
display: block;
font: normal 12px/16px arial, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-transform: uppercase;
text-align: left;
}
form [type="text"],
form [type="email"] {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 60%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.zip {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 20%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.dob-select {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 80px;
height:25px;
-webkit-appearance: none;
overflow: hidden;
background: url("http://s17.postimage.org/4tmf81arf/down_arrow.png") no-repeat right #fff;
float: left;
margin-right: 5px;
}
.dob-select select {
background: transparent;
width: 125px;
height: 25px;
border: none;
padding: 5px 0 0 5px;
color: #cccccc;
}
.left {
float: left;
}
form [type="submit"] {
display: block;
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
margin: 25px auto;
width: 154px;
height:57px;
border: none;
color: transparent;
font-size: 0;
float: left;
}
form input[type=submit]:hover {
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
cursor: hand;
cursor: pointer;
}
#FileUpload {
position:relative;
margin-top: -13px;
padding-bottom: 15px;
}
#BrowserVisible {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background:url(images/btn_browse.gif) 100% 0px no-repeat;
height:27px;
width:390px;
cursor: hand;
cursor: pointer;
}
#FileField {
display: block;
margin-right: 85px;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
color: #777;
width: 300px;
padding: 5px 5px;
-webkit-appearance: none;
}
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset>
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select">
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset>
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>
EDIT 2:
Add
.short{
width: auto !important;
}
to CSS to draw the ZIP field with full lenght as in picture.
EDIT: remove border: 1px solid silver; when you have understood how positioning is working, it's for debug purpose ;)
Look at: http://jsfiddle.net/pb6mM/3/
form input[type="submit"]{
position: absolute;
right: 0;
bottom: 0;
}
fieldset{
border: 1px solid silver;
}
.fieldsetDate{
padding-right: 30px;
}
.inlineBlock{
display: inline-block;
}
And added
margin-top: 6px;
margin-bottom: 6px;
to .dob-select { to make it the same height of the normal text field.
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset class="fieldsetDate inlineBlock">
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select" >
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset class="inlineBlock">
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>
Add Position:absolute to input button. and there is slight changes in the html code. Check the demo.
DEMO
SAMPLE CSS FORM