Why can't I put icon after the radio button ?
Where am I wrong ? I also would like to put three radio buttons horizontally. How can i make this ? It should look like this http://imgur.com/3FbbAql
JS Fiddle : http://jsfiddle.net/5urfzLg3/
#visa:after {
content: '';
display: block;
width: 32px;
height: 28px;
background: url('img/https://upload.wikimedia.org/wikipedia/commons/1/13/Farm-Fresh_visa.png'); }
Replaced Elements(img,input,area,etc.) cannot have :before or :after(Learn more from this SO answer).
To make them horizontal, just display them inline-block:
.box input[type="radio"]{
display:inline-block;
}
I think this is what you want !! Welcome in advance :)
body {
background-image: url('img/formBackground.jpg');
background-repeat: no-repeat;
}
#wrapper {
width: 420px;
height: 900px;
margin: 20 auto;
}
h2 {
color: white;
font-family: Verdana;
font-size: 18px;
padding: 5px;
margin-top: 5px;
margin-bottom: 0px;
}
.box {
padding: 10px;
margin: 5px;
margin-bottom: 2px;
margin-top: 2px;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.2);
}
.box span {
display: inline-block;
width: 100px;
height: 18px;
}
.box input {
width: 210px;
margin: 0 auto;
padding: 4px;
}
.box textarea {
width: 210px;
height: 130px;
max-width: 210px;
}
#specific {
height: 100px;
vertical-align: top;
padding-top: 5px;
padding-left: 5px;
}
::-webkit-input-placeholder {
color: grey;
}
:-moz-placeholder {
/* Firefox 18- */
color: grey;
}
::-moz-placeholder {
/* Firefox 19+ */
color: grey;
}
:-ms-input-placeholder {
color: grey;
}
#visa:after {
content: '';
display: block;
width: 32px;
height: 28px;
background: url('img/Farm-Fresh_visa.png');
}
.box.cards {
clear: both;
display: table;
}
.box.cards span {
float: left;
}
#cards {
float: left;
clear: none;
}
label {
float: left;
clear: none;
display: block;
padding: 0px 1em 0 0;
}
input[type=radio],
input.radio {
float: left;
clear: none;
margin: 3px 3px 0 2px;
width: auto;
}
<body>
<div id="wrapper">
<h2>Step 1: Your details</h2>
<div class="box">
<span>User</span>
<input type="text" name="username" placeholder="First and last name">
</div>
<div class="box">
<span>Email</span>
<input type="email" name="email" placeholder="example#domain.com">
</div>
<div class="box">
<span>Phone</span>
<input type="text" name="phone" placeholder="eg. +44750000000">
</div>
<h2>Step 1: Delivery adress</h2>
<div class="box">
<span id="specific">Adress</span>
<textarea></textarea>
</div>
<div class="box">
<span>Post Code</span>
<input type="text" name="post-code">
</div>
<div class="box">
<span>Country</span>
<input type="text" name="country">
</div>
<h2>Step 1: Card details</h2>
<div class="box cards">
<span>Card type</span>
<div id="cards">
<input type="radio" name="visa" id="visa">
<label for="visa">visa</label>
<input type="radio" name="AmEx" id="AmEx">
<label for="AmEx">AmEx</label>
<input type="radio" name="mastercard" id="mastercard">
<label for="mastercard">mastercard</label>
</div>
</div>
</div>
</body>
Related
Trying to figure out how to align some buttons to some input fields and it's tricky as hell. I couldn't figure it out.
I've found a lot of things online:
Align button to input with float?
Align button with input forms with labels
Make form button/text field same height in all browsers?
I know I will get a lot of minuses but I just can't get my head around this and I need help.
I've lost a whole day modifying values and I have no clue on how to position things in CSS. I can't understand it.
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: block;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
display: grid;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
<div class="box-head">
<div class="title">
<h1>Configuration Page</h1>
</div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class="textbox">
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id="button" type="submit" value="Enter">
<div class="textbox">
<input type="number" placeholder="Brightness" name="getBrightness" value="">
</div>
<input id="button" type="submit" value="Enter">
</form>
</div>
EDIT: This is how I've fixed it:
I've changed from class to ID: #textbox;
I've put #textbox and #button inside div: #box-box;
I've added display: flex; to #box-box and display: grid; to
both #textbox and #button.
Added margin-left: 25px; to #button;
Here is the result.
Thanks #Flavio Caruso for the inspiration.
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url">
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
#logo {
width: 94%;
height: 50px;
background: url(logo.png) left no-repeat;
background-size:contain;
margin: 30px auto;
}
**#box-box {
display:flex;
}**
#textbox {
**display: grid;**
width: 70%;
overflow: hidden;
font-size: 20px;
padding 10px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
#textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
**display: grid;**
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
**margin-left: 25px;**
margin-top: 30px;
}
There is a few changes you have to do, you must insert the input button inside the div class 'textbox' and add a display:flex, then you ajust the css from button to inline-block and float right.
like that:
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: flex;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
margin: 5px 5px;
}
#button {
display: inline-block;
float: right;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
<input id ="button" type="submit" value="Enter">
</div>
<div class = "textbox" >
<input type="number" placeholder="Brightness" name="getBrightness" value="">
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
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>
Extra margin from a paragraph tag is forcing a button downwards. I am trying to understand why.
Here's one answer I tried looking to find an answer from : is it a bug? margins of P element go outside the containig div, however the answer quotes "collapsing margins" but I don't understand why that would be a correct answer, as margins don't seem to be collapsing in this case but expanding.
I understand the problem can be fixed by giving the paragraph tag a margin of 0, but I want to know why the margin is bleeding, and (if is due to margin collapse), a more verbose explanation from the other answer..
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
There isn't a problem with the margin of the p-tag.
Your #messagesArea height is too high. You can fix it by decreasing it to height: 338px; as shown in the example below:
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 338px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
I can't figure out how to get a gap between
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
and
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
How would I go about doing it. I've tried using margin/padding without any luck?
HTML
<div class="bt fbCenter">
<div class="fb">
<div class="info">
<p>Event Starts:</p>
<p>25th December 2014 19:00</p>
</div>
<div class="info">
<p>Event Ends:</p>
<p>25th December 2014 21:00</p>
</div>
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
</div>
</div>
CSS
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 70%;
padding: 1em;
text-align: left;
margin-bottom: 2.5em;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbCenter {
text-align: center;
}
.bt .fb {
border: 1px solid #818181;
padding: 2em;
color: #585858;
display: inline-block;
text-align: left;
width: 75%;
}
.fb .info {
width: 100%;
margin-bottom: 1em;
}
.fb p {
float: left;
}
.fb p:nth-of-type(even) {
width: 80%;
}
.fb p:nth-of-type(odd) {
width: 20%;
}
.fb p.last {
width: 100%;
font-weight: 100;
}
Fiddle here.
Be aware of margin collapsing and float collapsing.
Add a marging to the top of the from and clear the floats in the info divs
.fb form{
margin-top:2em;}
.fb .info {
width: 100%;
margin-bottom: 1em;
clear:both;
}
.fb form{
margin-top:5em;}
.bt input {
border: 1px solid #ccc;
color: rgb(60, 60, 60);
display: block;
width: 70%;
padding: 1em;
text-align: left;
margin-bottom: 2.5em;
}
.bt button {
width: 100%;
padding: 1.5em;
background-color: #1f1f1f;
color: #fff;
border: 0;
}
.bt button:hover {
background-color: #818181;
cursor:pointer;
}
.fbCenter {
text-align: center;
}
.bt .fb {
border: 1px solid #818181;
padding: 2em;
color: #585858;
display: inline-block;
text-align: left;
width: 75%;
}
.fb .info {
width: 100%;
margin-bottom: 1em;
clear:both;
}
.fb p {
float: left;
}
.fb p:nth-of-type(even) {
width: 80%;
}
.fb p:nth-of-type(odd) {
width: 20%;
}
.fb p.last {
width: 100%;
font-weight: 100;
}
<div class="bt fbCenter">
<div class="fb">
<div class="info">
<p>Event Starts:</p>
<p>25th December 2014 19:00</p>
</div>
<div class="info">
<p>Event Ends:</p>
<p>25th December 2014 21:00</p>
</div>
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
</div>
</div>
Note that the margin on the top of the form needs to be bigger than the margin on the bottom of the .info class. This is due to Margin Collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing & http://www.sitepoint.com/web-foundations/collapsing-margins/)
You should probably also become familiar with Clearfix, how it works, why and when it is needed.
I'm not a fan of float so here as an alterate version that utilises display:table, display:table-row and display:table-cell
You could create another class to insert between both of them like this example http://jsfiddle.net/2kkep4qs/8/
HTML
<div class="info">
<p>Location:</p>
<p>Dominion Theatre, W1T 7AQ</p>
</div>
<div class="bt-space"></div>
<form>
<label>Name (Required)
<input type="text" placeholder="Name" required>
</label>
</form>
CSS New class
.bt-space{padding:25px;}
you can do <hr> and color it white, or
you could always add an empty div between div and form:
<div class="info">
</div>
I tried to set the width and padding of the divs by pixels in all directions to make them fit together but its not working in any way I try. and when I zoom in and out the width of everything changes. I feel I am doing it the wrong way, is there another easier way people adjust the sizes and positions of the elements in page?
JsFiddle: http://jsfiddle.net/ruavcstx/
<!DOCTYPE html>
<html>
<head>
<style>
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
}
.username {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
margin: 0;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
</style>
</head>
<body class="background">
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
</html>
Alright, try these changes in the fiddle: http://jsfiddle.net/ruavcstx/1/
I changed -
username/password class
display: block
padding-top: 35px; (no other setting)
width: 100%;
And I made a minor change in the html (placed a <br/> after the password textbox so the error comes up on the next line).
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
width: 150px;
}
.username {
padding-top: 15px
display: block;
text-align: center;
margin: 0px;
width: 100%;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding-top: 15px;
display: block;
text-align: center;
margin: 0px;
width: 100%;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
HTML:
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/><Br/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
Can you try it?
Instead of float:left, Use display:inline; and fot testing do align center. And, resize it. Its working fine for me.
HTML
<div id="loginsignupform" align="center">
to
<div id="loginsignupform">
CSS
#signuptab {
float: left;
}
to
#signuptab {
display: inline;
}
You have not provided corresponding padding for tabs
Check this updated fiddle : http://jsfiddle.net/ruavcstx/2/
Check out the CSS changes. Hope it helps