I want to move the "Not got account" submit button to below the form but not sure what I am doing wrong
I think it is the CSS for .box but not sure how to edit it so it moves the button below and I tried using div tags to move it and they did not work.
Is there a bit of code in my CSS that is keeping it in the centre
I would like to keep it in the same style
Any help would be greatly appreiated
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
This is because the 2nd form uses the same class box which centers the element with the first one.
.box {
...
top: 50%; <--- this is the problem
left: 50%;
...
}
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box2 {
padding: 0px;
top: 90%;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box box2" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Just don't position your boxes absolute. Makes it quite difficult to get the positioning right.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Not sure if this is what you are looking for, but position absolute in your form is not the best use in this case. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Anyway, I made some adjustments in your code: I added a div container for the whole page and made some changes in your css as well. You can check it out in the demo below.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
text-align: center;
font-weight: 100;
width: 100vw;
height: 100vh;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
margin-top: 10%;
width: 400px;
padding: 40px;
/* position: absolute; */
/* top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email" />
<input type="password" name="u_pass" placeholder="Password" />
<input type="submit" name="u_btn" value="Login" />
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?" />
</form>
</div>
</div>
</body>
</html>
Related
I have two problems. The first thing is that when I hover over one thing (https://prnt.sc/s9etq3 (the mouse isnt visible because of the screenshot but it is on the object)) I only get an outline and not the full background. The second thing is that I'm too stupid to scale the search box right. I want that it's 10% away from the sides (left and right). The code for the hovering is inside div.gallery:hover
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
background: #222;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.search_box{
position: relative;
left: 0%;
}
.search_box input[type="text"]{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
div.gallery {
margin: 5px;
border: 1px solid #222;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #404040;
background: #404040;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.container
{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div
{
margin: 10px;
}
.container div label
{
cursor: pointer;
}
.container div label input[type="checkbox"]
{
display: none;
}
.container div label span
{
position: relative;
display: inline-block;
background: #424242;
padding: 15px 30px;
color: #555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 20px;
font-size: 20px;
transition: 0.5s;
user-select: none;
overflow: hidden;
}
.container div label span:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.container div label input[type="checkbox"]:checked ~ span
{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="search_box">
<input type="text" name="box" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
</head>
<body>
<div id="result"></div>
<div style="clear:both"></div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
´´´
I want to bring the dropdown chevron behind my dropdown so that when I click anywhere on my dropdown, I can see the menu. Right now the chevron-down area is unclickable.
I have looked into other options of using font awesome but have not been able to do so.
<div id="actions-dropdown" class="actions">
<select class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>
<i id="arrow" class="fa fa-chevron-down"></i>
</div>
CSS
.select-option {
background: transparent;
background-size: auto auto;
-moz-appearance: none;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
width: 100px;
height: 40px;
border: 1px white solid;
margin: 11px 0px 0px 1071px;
z-index: 5;
}
.fa-chevron-down {
color: red;
z-index: -5;
margin: 0px 0px 0px -5px;
}
Method 2 using Font Awesome
.select-option {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
background:black;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-option:after {
content:"\f078";
font-family: FontAwesome;
background: : black;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: blue;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
change your markup like this. use label instead of i. set pointer-events: none to .fa-chevron-down
<div id="actions-dropdown" class="actions">
<select id="select-el" class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>
<label id="arrow" for="select-el" class="fa fa-chevron-down"></label>
</div>
.select-option {
background: transparent;
background-size: auto auto;
-moz-appearance: none;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
width: 100px;
height: 40px;
border: 1px red solid;
margin: 11px 0px 0px 0;
z-index: 5;
}
.actions {
position: relative;
display: inline-block;
}
.fa-chevron-down {
color: red;
z-index: 7;
margin: 0px 0px 0px -5px;
position: absolute;
top:20px;
right:0;
pointer-events:none;
}
.select-option {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
background:black;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-option:after {
content:"\f078";
font-family: FontAwesome;
background: : black;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: blue;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div id="actions-dropdown" class="actions">
<select id="select-el" class="select-option" required>
<option class='option'>option</option>
<option class='option'>option</option>
<option class='option'>option</option>
<option class='option'>option</option>
</select>
<label for="select-el" class="fa fa-chevron-down"></label>
</div>
Case 1) z-index: -5; might be your problem.
.fa-chevron-down {
color: red;
z-index: -5;
margin: 0px 0px 0px -5px;
}
Case 2) .select-option:after not sure if this works because form elements don't have pseudo elements like :before and :after. You might need a different element, like a span to wrap the <select> element and apply :after to span.
Basically I am trying out CSS trying to create a chat box for some reason when I float:right the chat message it goes out of the chat box but I when I float:left it works fine as it should be here is the JS Fiddle which shows the problem!
https://jsfiddle.net/g8ax21aa/
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
Thank you for your time and help.
.msg {
word-break: break-all;
}
seems to be the way to go. MDN.
PS. It turns out that break-word is an unofficial value for word-break property and it should be break-all. From caniuse:
Partial support (CSS3 word-break property) refers to supporting the break-all value, but not the keep-all value. Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.
So, you are better off using word-break: break-all;
See my code below. I added word-break: break-word;
and it works fine.
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
word-break: break-word;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
you must use
.msg {
width:256px; // add this
word-wrap:break-word;// add this
...//your code
}
Demo in jsfiddle
The problem is that in real life there are no words with that size of characters
try this:
width: 100%;
text-overflow: ellipsis;
I have an input field and a button that I want to have horizontally and vertically centered (without transform) side by side in the middle. I can easily fix the centering part, but to place the input field and the button side by side has proven to be much harder. For whatever reason, the button is placed lower than the input field.
The HTML and CSS:
body {
background: #000;
text-align: center;
}
.hd {
font-size: 3.9rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
color: rgb(250, 250, 250);
margin-bottom: 30px;
}
.content {
margin: 0;
position: relative;
margin-top: 20vh;
}
.form-control, .btn {
display: inline-block;
padding: 10px 25px;
font-size: 1rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
border-radius: 0;
-webkit-appearance: none;
}
.form-group {
display: inline-block;
}
.form-control {
border: 0;
float: left;
width: 250px;
}
*:focus {
outline: none;
}
.form-controlt:focus{
outline: none;
}
.btn {
background-color: lightgreen;
border: 0;
background-color: #ff8e41;
-o-transition: all .3s;
transition: all .3s;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
font-style: normal;
font-weight: 600;
position: relative;
border: 0;
box-sizing: border-box;
color: #fff;
text-align: center;
margin: 0 auto;
-webkit-appearance: button;
cursor: pointer;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn[type=submit]:active {
background: #ed7a18;
box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
}
.btn[type=submit]:hover {
background-color: #ffa353;
-o-transition: all .3s;
transition: all .3s;
}
<div class="content">
<div class="hd">Text</div>
<form action="8dy9s8hsd9.php" method="POST">
<div id="name-group" class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</form>
</div>
Put the input and the button elements inside the same div with .form-group class.
body {
background: #000;
text-align: center;
}
.hd {
font-size: 3.9rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
color: rgb(250, 250, 250);
margin-bottom: 30px;
}
.content {
margin: 0;
position: relative;
margin-top: 20vh;
}
.form-control, .btn {
display: inline-block;
padding: 10px 25px;
font-size: 1rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
border-radius: 0;
-webkit-appearance: none;
}
.form-group {
display: inline-block;
}
.form-control {
border: 0;
float: left;
width: 250px;
}
*:focus {
outline: none;
}
.form-controlt:focus{
outline: none;
}
.btn {
background-color: lightgreen;
border: 0;
background-color: #ff8e41;
-o-transition: all .3s;
transition: all .3s;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
font-style: normal;
font-weight: 600;
position: relative;
border: 0;
box-sizing: border-box;
color: #fff;
text-align: center;
margin: 0 auto;
-webkit-appearance: button;
cursor: pointer;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn[type=submit]:active {
background: #ed7a18;
box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
}
.btn[type=submit]:hover {
background-color: #ffa353;
-o-transition: all .3s;
transition: all .3s;
}
<div class="content">
<div class="hd">Text</div>
<form action="8dy9s8hsd9.php" method="POST">
<div id="name-group" class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>
</form>
</div>
Change:
<div id="name-group" class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
To:
<div id="name-group" class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>
body {
background: #000;
text-align: center;
}
.hd {
font-size: 3.9rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
color: rgb(250, 250, 250);
margin-bottom: 30px;
}
.content {
margin: 0;
position: relative;
margin-top: 20vh;
}
.form-control, .btn {
display: inline-block;
padding: 10px 25px;
font-size: 1rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
border-radius: 0;
-webkit-appearance: none;
}
.form-group {
display: inline-block;
}
.form-control {
border: 0;
float: left;
width: 250px;
}
*:focus {
outline: none;
}
.form-controlt:focus{
outline: none;
}
.btn {
background-color: lightgreen;
border: 0;
background-color: #ff8e41;
-o-transition: all .3s;
transition: all .3s;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
font-style: normal;
font-weight: 600;
position: relative;
border: 0;
box-sizing: border-box;
color: #fff;
text-align: center;
margin: 0 auto;
-webkit-appearance: button;
cursor: pointer;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn[type=submit]:active {
background: #ed7a18;
box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
}
.btn[type=submit]:hover {
background-color: #ffa353;
-o-transition: all .3s;
transition: all .3s;
}
<div class="content">
<div class="hd">Text</div>
<form action="8dy9s8hsd9.php" method="POST">
<div id="name-group" class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>
</form>
</div>
Recently I asked about a comparable case over here.
I tried to center the items (in this case) by the solution given in the question above but with no end. I have been wrapping these columns in an apart row col 'div' but (this time) it makes no sense. The dotted line in the background is the real center and all items displayed (envelope-image, CONTACT, get in contact-box and even the contact form and SEND-button) are not exactly in the center of the webpage. Who can help me out of this asymmetry?
Codepen
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div class="supporting">
<div class="container" style="min-height:300px;">
<div class="col">
<h1>😀</h1>
<a>Learn more</a>
</div>
<div class="col">
<img src="http://rexkirby.com/kirbyandson/images/email.svg">
<h2>Contact</h2>
<p></p>
<b>Get in contact</b>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
<h2>Support</h2>
<p></p>
<div class="interests text-center">
<a class="learn-more">Learn more</a>
</div>
<div class="int text-center" style="display:none">
<c>Lorem ipsum.</c>
</div>
</div>
</div>
</div>
</div>
<div class="contactform">
<div class="container">
<div class="row col-md-12">
<div class="col-md-12 text-center">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="row col text-center">
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
CSS:
body:after {
content: "";
position: absolute;
z-index: -1;
top: 10%;
bottom: 0%;
left: 50%;
border-left: 2px dotted rgb(51,51,51);
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 64px;
padding: 0px 0px;
}
.supporting img {
height: 40px;
}
.supporting .col h1 {
font-size: 35px;
padding-bottom: 48px;
margin-top: 49px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
padding: 0 50px;
margin-bottom: 60px;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.supporting a {
font-size: 10px;
color: rgb(51,51,51);
font-weight: 600;
border: 1px solid rgb(51,51,51);
padding: 15px 50px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
.supporting b {
font-size: 10px;
color: rgb(51,51,51);
font-weight: 600;
border: 1px solid rgb(51,51,51);
padding: 15px 39px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
.supporting .int c {
font-size: 15px;
color: rgb(51,51,51);
height: -10px;
padding: 0px 50px;
}
.clearfix {
clear: both;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 30px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Open Sans', sans-serif;
text-transform: normal;
font-size: 11px;
left: -185px;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:middle;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: middle;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: 'Open Sans', sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: rgb(245,245,245);
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid rgb(42,186,214);
color: rgb(51,51,51);
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Open Sans', sans-serif;
float:middle;
width: 50%;
border: rgb(51,51,51) solid 1px;
cursor:pointer;
background-color: rgb(255,255,255);
color: rgb(51,51,51);
font-size: 16px;
padding-top:12px;
padding-bottom:12px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:600;
letter-spacing: 1.1px;
}
#button-blue:hover{
color: rgb(51,51,51);
}
.submit:hover {
rgb(51,51,51);
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
#form-div{
left: 30%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
You have set the width of your ".suporting .col" divs to 33%, which is not quite one-third of the page. If you choose to be more precise (e.g. 33.33%) you will see that your text is more nearly centered on the page. Here is a slight revision of your code.
.supporting .col {
float: left;
width: 33.33%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 64px;
padding: 0px 0px;
}