CSS fluid layout for inputs - html

I am currently making a website and the sign up page requires:
- first name
- last name
- username
- email
- password
- retype password
I need the first name and last name inputs to be side by side and small while the others below them are approximately twice the width.
Like this:
Name
+-----------+ +-----------+
| first | | last |
+-----------+ +-----------+
Email
+----------------------------+
| |
+----------------------------+
I am extremely opposed to using px and absolutely need to use % for the widths.
I cannot make the small inputs 50% and the large ones 100% because the space in between the two small ones is not accounted for, you know?
I'm talking about this space:
Name
+-----------+ +-----------+
| first |<-->| last |
+-----------+ +-----------+
So that is why I can't use 50% for small ones and 100% for large ones!
Any help is greatly appreciated!

Simple do this:
call the small ones : half
.first {margin-left: 0 !important; clear: left;}
.full {width:100%}
.half {width: 48%;}
.half {float: left; margin-left: 2%;}
<div class="first half">First Name</div>
<div class="half">Last Name input</div>
<div class="full">Email Input</div>
As you can see I used margin % to make the spacing...which thats how I made 48% -2%(you can do whatever you like as long as it equals..).
I made a class called .first to make things look right (you can use jquery to create this an auto class).
Heres a Fiddle:
FIDDLE THAT
Hope this helps you.

Here's a Fiddle
<form>
<input name="firstname" type="text" placeholder="First Name" class="small left"/>
<input name="lastname" type="text" placeholder="Last Name" class="small"/>
<input name="username" type="text" placeholder="User Name" class="big"/>
<input name="email" type="text" placeholder="E-mail" class="big"/>
<input name="password" type="password" placeholder="Password" class="big"/>
<input name="rpassword" type="password" placeholder="Repeat Password" class="big"/>
<button name="submit" type="">Sign Up</button>
</form>
form {
background: #555;
width: 350px;
height: 300px;
text-align: center;
padding: 30px 15px;
border-radius: 10px;
}
button {
background: #04a9e8;
position: relative;
margin: 25% auto;
width: 140px;
height: 24px;
border: 1px solid #444;
letter-spacing: 1px;
font-weight: bold;
color: #fff;
border-radius: 4px;
}
button:hover {
background: #02b9fc;
}
.small,
.big {
background: #f5f5f5;
height: 22px;
padding-left: 4px;
margin-bottom: 12px;
border: 1px solid #444;
}
.small:focus,
.big:focus {
background: #fff;
outline: none;
border: 1px solid #0296cc;
box-shadow: 0 0 2px 0 #0296cc;
}
.small {
width: 45.5%;
}
.big {
width: 98.1%;
}
.left {
margin-right: 15px;
}

if you apply 100% with on input element it will overflow the div box because input element has some default padding, for perfect solution you should use this:
Your CSS:
input{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
.clearfix { clear: both; }
.first, .last{ width: 48%; }
.first{ float: left; }
.last{ float: right; }
.email{ width: 100%;}
Your HTML:
<div class="clearfix">
<label>Name</label><br>
<input type="text" class="first">
<input type="text" class="last">
</div>
<div class="clearfix">
<label>Email</label><br>
<input type="text" class="email">
</div>
You can checkout this page to know how to align layout with float - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

Related

Media query not working on HTML form

I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)

How to group an icon and an input element

I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).

css - align label & textbox at right side of page

I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.

CSS bubble error box for a form

I want to create an error box for a form like the one below.
I already themed the input box and am using jQuery validation to display errors. However I can't get that error box right. I think I'll need to put that together with three tags, but I don't know what tags to use (jQuery validation uses a label tag to display the error).
My current code for the error is:
<label for="email">
<span>Email:</span>
<input type="text" id="email" name="email" class="error">
<label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>
I must make this IE7 compatible.
I made the following changes:
<div class="dataline">
<div class="label">Label:</div>
<div class="field"><input type="text" id="name" name="name" /></div>
<div class="arrow"></div>
<label class="error">Error text</label>
<div class="ender"></div>
</div>
I set the arrowhead as an image for the class arrow so now it looks perfect. Basicly I used 4 left floated block elements (label, input, arrowhead and bubble body). Now I only have two problems: the arrowhead is displayed even when there's no error. How can I hide it when the label is not after it? My other problem is that the container div is 800px wide and if the error text is long, it wraps around to the next line. How can I avoid it?
My css is:
div.dataline {
margin: 10px 0 0 0;
white-space: nowrap;
width: 3000px;
owerflow: visible;
height: 60px;
}
div.field {
float: left;
}
div.label {
float: left;
width: 120px;
margin: 20px 0 0 0;
}
div.arrow {
background-image: url('gfx/redarrow.png');
margin: 7px 0 0 10px;
background-repeat: no-repeat;
width: 20px;
height: 45px;
float: left;
}
div.ender {
background-image: url('gfx/bubbleend.png');
margin: 7px 0 0 0px;
background-repeat: no-repeat;
width: 3px;
height: 45px;
float: left;
}
label.error {
height: 27px;
background-image: url('gfx/bubblemiddle.png');
float: left;
padding: 9px;
margin: 7px 0 0 0;
}
the following fiddle is a good start for your implementation:
http://jsbin.com/aReQUgay/1/edit
#email.error
{
border-color: red;
}
#email.error + label
{
background-color: red;
}

How to have responsive widths for labels and inputs using css

I have done the following with my forms:
Noe everything is fine when I have it on a large screen. But when I test it in my ripple emulator in the browser I get this, the screen size was a 240x320:
Here is my CSS:
.inputbox{
width: 80%;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 2em;
border-top-right-radius: 2em;
box-shadow: inset 0px 2px 2px #ececec;
display: inline;
padding: 8px;
font-size: 100%;
margin-top: 0px;
margin-bottom: 1%;
}
.labelbox{
border-bottom-left-radius:2em;
border-top-left-radius: 2em;
padding: 8px;
display: block;
border: 1px solid #d4d4d4;
background: #e9f939; /* Old browsers */
padding-right: 5px;
color:black;
float:left;
width:17.5%;
text-align: center;
}
Here is my HTML:
<label class="labelbox" for="textareacontactus">Enter Title*</label>
<input type="text" class="inputbox" data-role="none" ng-model="searchtitle" name="searchtitle" id="searchtitle" required>
<label class="labelbox" for="searchauthor">Enter Author</label>
<input type="text" class="inputbox" data-role="none" name="searchauthor" id="searchauthor">
<label class="labelbox" for="searchpublisher">Enter Publisher</label>
<input type="text" class="inputbox" data-role="none" name="searchpublisher" id="searchpublisher">
<label class="labelbox" for="searchedition">Enter Edition</label>
<input type="text" class="inputbox" data-role="none" name="searchedition" id="searchedition" ng-model="searchedition" ng-pattern="/^[0-9]+$/">
Now in the CSS I used width but using the %. So I can't see why its doing this? I would assume by using % it will always take up say 20% relative to the screen size because if this was the case then why does it do this on the emulator? What is the best practice to ahieve this responsive design?
You can use media queries such as #media (max-width: 767px)
Another thing you could try is using an HTML table like in this JSFiddle I made from your existing code: http://jsfiddle.net/ALYxt/