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
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>
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>
I have the following HTML:
<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
<div class="theLoginBox" style="clear: both;">
<div class="loginTitle">
Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
<br />
<input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
<br />
<span style="float: right;">Forgot login/password</span>
</div>
</div>
<div style="z-index: 99999999999;">
<input type="text" value="Search WD" />
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
.dispLoginSearch
{
width: 47%;
height: 150px;
line-height: 150px;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
border: 1px solid #0026ff;
}
.theLoginBox
{
border: 2px solid #D5D5D5;
border-radius: 4px;
width: 97%;
height: 90px;
padding: 10px;
white-space: nowrap;
background: #ff6a00;
}
.loginTitle
{
height: 88px;
display: block;
vertical-align: top;
white-space: nowrap;
font-weight: bold;
text-align: left;
background: #b6ff00;
}
When I view the website, I see the following:
What I would like it be shown:
How do I fix the issue? It is happening in both IE and other browsers.
UPDATE:
I added overflow: auto in the loginTitle class and this is what is shown:
Each section is taking up a lot of space and showing the scrollbar :/
This is because of line 5 of your CSS : line-height: 150px;.
Just remove it and you should be fine.
If you want it to look like image you attached, see here: http://codepen.io/anon/pen/FothH
html:
<form action="#">
<p>Log in to ###### | Sign up</p>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Go"/>
Forgot login/password
</form>
css:
form {
border: 1px solid #d4d4d4;
display: block;
width: 375px;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
}
form p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
input {
display: inline-block;
border-radius: 7px;
}
input[type=text], input[type=password] {
border: none;
background: #ebebeb;
font-size: 16px;
padding: 6px 10px;
width: 180px;
}
input[type=password] {
width: 120px;
}
input[type=submit] {
font-size: 16px;
width: 25px;
padding: 5px 0px;
background: none;
color: red;
border: none;
}
form a {
display: block;
line-height: 25px;
text-align: right;
margin-right: 30px;
color: #d4d4d4;
text-decoration: none;
margin-bottom: 5px;
}
I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance
You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/