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>
Related
I have this desing and I´ll like to program it but I dont find the way.
Does anyone know how to make it?
How can I put that '+' inside?
Here is the piece of code:-
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 30%;
height: 20px;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul"> <input type="text" class="busqueda_input" name="">
ESTADO <hr id="hr-vertical-azul"> <input type="text" class="busqueda_input" name="">
</div>
You can use the position:absolute, you can literally play with css to get the required output there are many number of way for what u have asked here is something which i have made
Example
.input-field{
position: relative;
width: 250px;
}
.input-field input{
border:none;
background-color: #ccc;
border-radius: 10rem;
width:100%;
height: 25px;
}
.icon{
position: absolute;
top:0;
right:0;
color: white;
font-weight: 600;
font-size: x-large;
background: black;
padding-right: 10px;
padding-left: 5px;
border-top-right-radius: 10rem;
border-bottom-right-radius: 10rem;
}
<div class="input-field">
<input type="text" >
<div class="icon">+</div>
</div>
Try this.
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 190px;
height: 20px;
border:1px solid #ccc;
}
.input-wrap {
position: relative;
display: inline-block;
}
.input-wrap .icon {
background: #616261;
border-radius: 0 50px 50px 0;
bottom: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 29px;
color: #fff;
font-size: 19px;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-wrap">
<input type="text" class="busqueda_input" name="">
<div class="icon">+</div>
</div>
ESTADO
<hr id="hr-vertical-azul">
<div class="input-wrap">
<input type="text" class="busqueda_input" name="">
<div class="icon">+</div>
</div>
</div>
you can add pseudo element to the parent div
http://jsfiddle.net/w9ew0nrw/7/
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-group">
<input type="text" class="busqueda_input" name="">
</div>
ESTADO <hr id="hr-vertical-azul">
<div class="input-group">
<input type="text" class="busqueda_input" name="">
</div>
</div>
.busqueda_input{
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
height: 30px;
border:0;
}
.input-group {
position:relative;
width:200px;
}
.input-group:after {
position:absolute;
top;0;
right:0;
width:30px;
height:30px;
background-color:#333;
color:#fff;
content:"+";
border-radius:0 100% 100% 0;
text-align:center;
line-height:30px;
font-size:20px;
}
You can try this code:
also if you want button instead of + label.
1st textbox is for label
2nd is for button
.busqueda_input {
border-radius: 50px 50px 50px 50px;
background-color: #EBE9E9;
width: 100%;
height: 40px;
border: none;
outline: none;
display: inline-block;
text-indent: 15px;
}
.input-div , .input-div-2 {
width: 50%;
position: relative;
margin-bottom:20px;
}
.input-div:after , .input-div-2 button {
content: "+";
position: absolute;
right: 0px;
top: 0;
background: #616261;
bottom: 0;
border-radius: 50px;
width: 50px;
text-align: center;
font-size: 35px;
color: #fff;
border:none;
outline:none;
}
button{
cursor: pointer;
}
<div class="recep-estado">
RECEPCIÓN <hr id="hr-vertical-azul">
<div class="input-div">
<input type="text" class="busqueda_input" name="">
</div>
ESTADO <hr id="hr-vertical-azul"> <div class="input-div-2"><input type="text" class="busqueda_input" name="">
<button>+</button>
</div>
</div>
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>
The "login the enter chat" button is supposed to fit inside the messageBox div, but is (visually) way bigger than messageBox. I even made padding and margin 0 but it did not change anything.
What is the culprit here (besides myself)?
#chatbox {
width: 500px;
height: 500px;
background-color: lime;
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: 0;
}
<h1>Chat with Customer Service</h1>
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<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>
The p element inside your #messagesArea has a margin values.
The #messagesArea has padding.
Remove these two and you are done :)
#messagesArea {
padding: 0;
}
#messagesArea p {
margin: 0;
}
Here is a working example:
#chatbox {
width: 500px;
height: 500px;
background-color: lime;
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: 0;
}
#messagesArea p {
margin: 0;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: 0;
}
<h1>Chat with Customer Service</h1>
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<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>
Note - if you do need these margin/padding values - make sure you set the container (#chatbox) with the correct height value. In your case - it should be 512px - it will include the padding of the #messageArea and the border of the #messageBox).
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