I have created a simple login form. Here is a screenshot of the login form.
Here is the HTML code. I have used the 960 framework.
<article class="container_12">
<section id="login" class="grid_3">
<form action="POST">
<div id="loginheader"></div>
<fieldset class="logininputfields">
<input type="text" name="username" placeholder="Username" autofocus>
<input type="password" name="password" placeholder="Password">
</fieldset>
<fieldset class="submitfield">
<input type="submit" value="Log In">
</fieldset>
</form>
</section>
</article>
and here is the CSS
#login
{
height: 330px;
}
#loginheader
{
background: black;
height: 32px;
}
.logininputfields
{
background-color: #e5e5e5;
padding-left: 24px;
padding-bottom: 40px;
height: 160px;
}
.logininputfields input[type="text"],input[type="password"]
{
background: #c8cbcc;
margin-top: 30px;
border:1px solid #ccc;
color: #ededed;
font-weight: 600;
height: 30px;
width: 170px;
}
.submitfield input[type="submit"]
{
background: #0099ff;
border: 1px solid #ccc;
height: 42px;
width: 220px;
font-weight: 600;
font-size: large;
color: white;
}
.submitfield input[type="submit"]:hover
{
background: rgba(0,154,255,0.60);
}
I don't understand why there is a space between the submit button and the gray area. How can avoid it?
The browser you're viewing this in likely has default margins on all fieldsets. Try removing those margins page wide with something like this:
fieldset {
margin:0px;
padding:0px;
}
In my case, the above solution din't work. I have added a blank <Col></Col> in order to get space between the fieldsets.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
This is probably a stupid question, but it has been driving me crazy the whole day. I need both divs with the class of contacthor to be aligned on the top, but not forcing them by using margin-top: -x or etc. Here is an image of the issue.
Also, Im new to web design so if I have useless code please explain.
Thanks.
#redcontact {
margin-bottom: 0;
padding-left: 5vh;
font-size: 15px;
line-height: 30px;
background: black;
}
.contacthor {
display: inline-block;
}
form > .contacthor > .input {
color: #C5B358;
font-size: 15px;
background-color: black;
margin-top: 0;
margin-left: 1vh;
margin-bottom: 1vh;
height: 30px;
width: 190px;
display: block;
}
.contacthor > textarea {
color: #C5B358;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
width: 60vh;
height: 25vh;
background: black;
border: 1px;
border-style: solid;
border-radius: 3px;
border-color: grey;
padding-left: 4px;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
<div id="redcontact">
<form action="action_page.php">
<div class="contacthor">
<label for="name">Nombre</label>
<input class="input" type="text" name="name_user" placeholder="test">
<label for="org">Empresa</label>
<input class="input" type="text" name="org" placeholder="test">
<label for="mail">Mail</label>
<input class="input" type="text" name="mail" placeholder="contacto#test.com">
</div>
<div class="contacthor">
<p>Mensaje</p>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
I would agree with Chere's answer in that you should be using something like CSS Grid or Flexbox. However, if you want to stay simple for this example, or just want to know why your code isn't working, here is a solution:
#redcontact {
margin-bottom: 0;
padding-left: 5vh;
font-size: 15px;
line-height: 30px;
background: black;
}
.contacthor {
display: inline-block;
}
form>.contacthor>.input {
color: #C5B358;
font-size: 15px;
background-color: black;
margin-top: 0;
margin-left: 1vh;
margin-bottom: 1vh;
height: 30px;
width: 190px;
display: block;
}
.contacthor>textarea {
color: #C5B358;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
width: 60vh;
height: 25vh;
background: black;
border: 1px;
border-style: solid;
border-radius: 3px;
border-color: grey;
padding-left: 4px;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
.contacthor>p {
margin-bottom: 5px;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
.contacthor>input[value=enviar] {
display: block;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
/* ===== Styles to fix example ===== */
label, p {
color: white;
}
/* ===== Styles to answer your question ===== */
.contacthor {
vertical-align: top;
}
<div id="redcontact">
<form action="action_page.php">
<div class="contacthor">
<label for="name">Nombre</label>
<input class="input" type="text" name="name_user" placeholder="test">
<label for="org">Empresa</label>
<input class="input" type="text" name="org" placeholder="test">
<label for="mail">Mail</label>
<input class="input" type="text" name="mail" placeholder="contacto#test.com">
</div>
<div class="contacthor">
<p>Mensaje</p>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
The main thing to take away from this is the addition of vertical-align: top. Here is a similar question and here is the documentation for the vertical-align property.
Note: I think there may have been some CSS missing, so the snippet looks a bit odd and I had to make a couple of unrelated changes.
Why is there a . before the input?
Also, I highly recommend not using vh or pixels. You should go with em. Without doing everything, you should probably try to do something like that, with flexbox.
#redcontact {
width: 100%;
height: 100%;
font-size: 15px;
line-height: 1.5;
background-color: #000;
color: #fff;
}
form {
display: flex;
padding: 2em;
.contacthor {
display: flex;
flex-direction: column;
width: 50%;
padding: 0 2em;
input,
textarea {
color: #C5B358;
background-color: transparent;
margin-left: 1em;
margin-bottom: 1em;
padding: 0.5em 1em;
width: auto;
display:block;
}
input {
border: 0;
}
textarea {
border: 1px solid grey;
border-radius: 3px;
}
}
}
I have made a grid. See if you are looking for somewhat similar thing.
https://codepen.io/kalpeshshende/pen/qJjomO
form{
display:grid;grid-gap:10px;
grid-template-columns:1fr 2fr;
}
.holder{
max-width:600px;
margin:auto;
background:black;
color:#C5B358;padding:10px;
}
.contacthor{
display:grid;grid-gap:10px;
}
textarea{
height:100px;
}
input[type=submit]{
width:120px;
}
p{
padding:0px;
}
input[type=text]{
background:black;
color:;border:none;
}
Markup :
<body>
<div class="holder">
<form action="">
<div class="contacthor">
<label for="name" >Nombre</label>
<input class="input" type="text" name="name_user" placeholder="test">
<label for="org">Empresa</label>
<input class="input" type="text" name="org" placeholder="test">
<label for="mail">Mail</label>
<input class="input" type="text" name="mail" placeholder="contacto#test.com">
</div>
<div class="contacthor">
<label for="Mensaje">Mensaje</label>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
</body>
Try adding vertical-align: top; to contracthor.
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>
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>
I have design a login form using html and css. The styles are displayed correctly in chrome and firefox. But in IE it has some problems.
HTML
<div id="wrapper">
<div id="page">
<form id="adminLoginForm">
<label>User Name :</label>
<input type="text" class="uname"/>
<label>Password :</label>
<input type="password" class="pwd"/>
<input type="submit" class="loginSubmit submit" value="SUBMIT"/>
<p class="alert loginAlert">Test alert</p>
</form>
</div>
</div>
CSS
#wrapper{
width:1000px;
margin:0 auto;
}
p{
margin:0;
padding:0;
}
#page{
float: left;
width: 1000px;
min-height: 480px;
background-color: #FFFFFF;
padding-bottom:20px;
}
.submit{
float:left;
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
cursor: pointer;
height:30px;
background: url('/img/bg/submit.jpg');
border: none;
border-radius: 10px;
color: #960000;
}
.alert{
float: left;
width: 100%;
margin-top: 5px;
color: #C00;
display:none;
}
#adminLoginForm{
float: left;
width: 350px;
height: 170px;
margin-left: 325px;
margin-top: 150px;
background: url('/img/bg/b15.jpg');
border-radius: 10px;
box-shadow: 0px 0px 10px #A38D77;
padding-top: 10px;
}
#adminLoginForm label{
float: left;
width: 150px;
text-align: right;
font-weight: bold;
color: #000000;
font-size: 15px;
margin-top: 20px;
}
#adminLoginForm input{
float: left;
width: 150px;
margin-top: 19px;
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
}
#adminLoginForm input.loginSubmit{
width:130px;
margin-left:111px;
}
Output in Chrome & Firefox
Output in IE
I know the border-radius and box-shadow not works in IE. But I don't know why the gap between the label and text-boxes in IE. Can anybody help me to resolve this..?
If you wrap the contents of the form in a div that then becomes the only child of the form, the issue is fixed:
HTML:
<form id="adminLoginForm">
<div>
<label>User Name :</label>
<input type="text" class="uname"/>
<label>Password :</label>
<input type="password" class="pwd"/>
<input type="submit" class="loginSubmit submit" value="SUBMIT"/>
<p class="alert loginAlert">Test alert</p>
</div>
</form>
I thought of this because I recall (back in the days when it seemed XHTML would become the new web standard) that, with XHTML, native inline elements (like <label> and <input>) are not valid children of the <form> element.
I don't think that's the case with regular HTML, but the point is that the <form> tag and the various <input>elements are rather special, and tend to follow their own CSS formatting rules.
try to use table pattern for these type of designs..best compatibility trick for all browsers..
<div id="wrapper">
<div id="page">
<form id="adminLoginForm">
<table>
<tr><td><label>User Name :</label></td><td><input type="text" class="uname"/></td></tr>
<tr><td><label>Password :</label></td><td><input type="password" class="pwd"/></td></tr>
<tr><td colspan="2" style="text-align:center;"><input type="submit" class="loginSubmit submit" value="SUBMIT"/></td></tr>
</table>
<p class="alert loginAlert">Test alert</p>
</form>
</div>
</div>