I am trying to put distance between two inputs, this is what it looks like now: http://i.imgur.com/Et6siwO.png. My code:
<form class="popup-form" id="login-popup-form">
<label>Your username/email:</label> <input class="popup-input" id="login-popup-username-field" name="username" placeholder="Username"/><br />
<label>Your password:</label> <input class="popup-input" id="login-popup-password-field" name="password" placeholder="Password"/>
</form>
I tried this in CSS:
#popup-wrapper .popup-input
{
position:absolute;
right: 20px;
width: 200px;
margin-bottom:20px;
}
FIDDLE
This should do:
margin-top: 15px;
Also you can use margin-bottom, margin-left and margin-right.
Or you could do:
.form-group {
.input-class {
padding: 5px;
}
}
Related
I want to add an "€" symbol on the right of the input field, I saw some examples online but sadly they dont work because I already have a label for my input. Is there a way to do it with the label already in use?
Heres the HTML code:
<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
</div>
and in case you want to see what CSS I have:
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
I would use a pseudo-element, mostly because you then can set a data-attribute with javascript, if you ever going to need to change currency in the future.
Inputs don't have pseudo-elements, so I needed to wrap the input in a span. Then I'm able to use position: absolute in combination with transform: translate to put the € where I wanted it.
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.inputfield span {
position: relative;
}
.inputfield span[data-currency]::after {
position: absolute;
content: attr(data-currency);
right: 1em;
top: 50%;
transform: translate(-100%, -50%);
}
<div class="inputfield">
<label> Example </label>
<span data-currency="€"><input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required></span>
</div>
please see if the following works for you...
HTML
<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
<span class="currency">€</span>
CSS
<style>
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.currency {
position: relative;
left: -20px
}
Play around with the left value on the currency style to get your desired position.
The quickest and simplest way is just adding a currency sign before/after your input tag like:
<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>€
if you need to style the currency sign you can place it in a span tag:
<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required><span class="euroClass">€</span>
Try this out:
<input placeholder="Type something">
<span>₠</span>
I'm creating a form and I have several input boxes on the same line.
I'd like to have the email input to take one line. The date, time, and number inputs to take another line. However, I'm not sure how to get the date/time/number inputs to span exactly 100% of the width of the form.
The percentages I have now in the CSS are estimates, so the edge of the number box doesn't vertically align with the email input box.
input[type=email] {
width: 100%;
}
input[type=date] {
width: 22%;
margin-right: 15px;
}
input[type=time] {
margin-right: 15px;
}
input[type=number] {
width: 11.4%
}
<form>
Email: <input type="email"><br>
Date: <input type="date">
Time: <input type="time">
Number in Party: <input type="number">
</form>
I would do it using flex, Here's a working example
I wrapped each line on a div, like this:
<form>
<div>Email: <input type="email"></div>
<div>
<div>Date: <input type="date"></div>
<div>Time: <input type="time"></div>
<div>Number in Party: <input type="number"></div>
</div>
</form>
css
form{
display: flex;
flex-direction: column;
}
form>div{
display: flex;
}
form>div input{
flex-grow: 1;
}
form>div>div{
display: flex;
flex-grow: 1;
}
You can use <label> to give yourself some explicit control the width, padding & margin of the form field labels.
Example:
label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}
label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}
input {
width: 80%;
}
input:nth-of-type(n+2) {
width: 13%;
}
<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>
input[type=email] {
width: 100%;
}
input[type=date] {
width: 21%;
}
input[type=time] {
width: 21%;
margin-right:42px;
}
input[type=number] {
width: 20.9%;
}
<form>
Email: <input type="email"><br><br>
Date : <input type="date">
Time : <input type="time">
Number in Party : <input type="number">
</form>
Im trying to move the positioning of box8 more down but for some reason it's not moving. Instead its moving down container 4.. please help!
Im trying to move the positioning of box8 more down but for some reason it's not moving. Instead its moving down container 4.. please help
HTML
<div id="con4">
<div id="box8">
<form>
First name:<br>
<input type="text" placeholder="from">
<br>
Last name: <br>
<input type="text" placeholder="to">
<input type="date" value="date" placeholder="depart date">
<br>
<input type="date" value="date" placeholder="return date">
<input type="text" placeholder="airline">
or fly one way
</form>
</div>
</div>
CSS
#con4 {
width:1024px;
height:470px;
background-image: url(media/plane.jpg);
float:none;
}
#box8 {
width:300px;
height:340px;
margin-left: 120px;
background-color: white;
position:relative;
margin-top:50px;
}
(sigh) The infamous collapsing margins problem again. I see a lot of those lately.
The margin you give to box8 is shared by con4, so they both move down the same amount.
Solution: don't give a margin-top to box8, give a padding-top to con4 instead.
#con4 {
width: 1024px;
height: 470px;
background-image: url(//lorempixel.com/1024/470);
float: none;
padding-top:50px;
}
#box8 {
width: 300px;
height: 340px;
margin-left: 120px;
background-color: white;
position: relative;
}
<div id="con4">
<div id="box8">
<form>
First name:
<br>
<input type="text" placeholder="from">
<br>Last name:
<br>
<input type="text" placeholder="to">
<input type="date" value="date" placeholder="depart date">
<br>
<input type="date" value="date" placeholder="return date">
<input type="text" placeholder="airline">or fly one way
</form>
</div>
</div>
(Note that I had to change the background-image for con4 to make it visible)
Add padding to the con4 instead of margin to box8
#con4 {
width:1024px;
height:470px;
background: #000;
float:none;
padding-top:100px;
}
#box8 {
width:300px;
height:340px;
margin-left: 120px;
background-color: white;
position:relative;
}
http://jsbin.com/mejatayaqu/2/
#lily replace your css with this:
#con4 {
width:1024px;
height:470px;
background-image: url(media/plane.jpg);
float:none;
}
#box8 {
width:300px;
height:340px;
margin-left: 120px;
background-color: white;
position:absolute;
margin-top:50px;
}
How can I get my boxes to align with my text?
I have also copy and pasted the html/css code in jsFiddle!
http://jsfiddle.net/EFByC/51/
<form
action="http://www.sblogger/cgi-bin/subcomments"
method="post" >
<fieldset name="commentFS" id="commentFS">
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required"/>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" title="Supply a valid e-mail address" required="required"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" title="You must provide your password" required="required"/>
<label for="commentbox">Comment<br />
(500 character limit)</label>
<textarea maxlength="500" name="commentbox" id="commentbox"></textarea>
<input type="submit" value="Submit Comment"/>
</fieldset>
</form>
here you go, edited your Fiddle
It comes down to this:
If you float left & right, you need a wrapper to preserve the room for the floats.
so i added this:
p {
overflow: hidden;/*this should be clearfix, just for demo it is overflow fix*/
}
label{
display: block;
float: left;
font-size: 0.9em;
width: 20%;/* was 100%*/
margin-top: 5px;
margin-bottom: 5px;
/*clear: left*/
}
and the wrapper:
<p>
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required">
</p>
i see you use float, display and width:100%; , you definitly have too much unnedeed rules here .
inline-block + width, can do it and allow you to vertiacal-align labels and inputs,
float+clear can work too, but vertical-align will not be avalaible :
example with inline-block:
/*Field set styles */
fieldset {
background-color: rgb(245,245,255);
margin: 15px auto;
padding: 5px;
width: 90%;
}
/* Label Styles */
label{
display: inline-block;
font-size: 0.9em;
margin-top: 5px;
margin-bottom: 5px;
width:35%;
}
/*Input control styles */
input, textarea {
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
width: 55%;
vertical-align:middle;
}
/*Text area styles */
textarea {
height: 150px;
}
http://jsfiddle.net/EFByC/58/
What would be a proper css method to make the following so it is the same with the exception that the text input fields vertically line up along their left side?
So the check boxes will still be right up against the input fields and in between the label and input fields, but the input fields still all light up.
Current HTML:
<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>
Current CSS:
label {
font-size: 90%;
float:left;
width: 15em;
}
Why not just use a negative margin?
.checkbox {margin-left: -16px;}
Depending on the rest of your setup might require a bit of tweaking for cross-browser pixel-perfectness.
I would personally probably also just float both the labels and the inputs and get rid of the <p>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
display: block;
font-size: 90%;
width: 15em;
clear:left;
}
label, input {
float:left;
}
input[type=checkbox]
/* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
{
margin-left: -2em;
}
</style>
</head>
<body>
<form>
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
<label for="search_server">Server:</label>
<input type="checkbox" name="server_like" />
<input id="search_server" type="text" name="Server" />
<label for="search_host">Host:</label>
<input id="search_host" type="text" name="Host" />
</form>
</body>
</html>
Do this.
HTML Markup:
<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>
Css Markup:
fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}
Then add a width to your form, depending on the input sizes, with your checkbox, just float it in between and use margins.
I would do something like this;
<div class="label">Uri:</div><div class="field"><input type="text" /></div>
Then give the div with the class 'label' an default width and float them next to eachother.
EDIT: Saw you changed your post;
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
Your css could be something like
label
{
width: 150px;
float:left;
clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
float:left;
}
If your form is small, you can just use a <table>.