I have code below for a contact form I have created. When you click preview, a second page view comes up. Is it possible to get the "Submit" button in the same position as the "Preview" button? Anything helps, cheers.
function openNav() {
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
padding-left:25px;
font-family:Verdana;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelName{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>
So here's the full code -
add "collapsed" class to the html div id=myNav
toggle this class on the 2 clickHandlers (openNav and closeNav)
give the anchor tag X close a z-index: 100;
give the "collapsed" class the relevant css.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
padding-left:25px;
font-family:Verdana;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelName{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
</style>
</head>
<body>
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>
<script>
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
</script>
</body>
</html>
Messing around quickly here;
Take percentage margins off .overlay-content and add padding to .overlay in the same manner as the previous screen (25px). Commented out previous code
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
padding: 25px;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
Then fill .container to 100% height and push the last fieldset down;
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
Though be careful as a general rule using absolute positioning.
Related
I want that when a user comes and tries to type text in "input" the label goes up, and if they leave that area blank it comes back to the original position. If user typed something over there it will stay up there.
I tried this code with input box with required it is working fine, but when I try to do this with input and add some content in input the label coming back down it need to be stay up there.
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" placeholder="" >
<label class="floating-label" >Button text</label>
</div>
I remove input:not(:focus):valid~.floating-label so it can work with not required field
Try this code since because of placeholder happening.
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
input + .form-control-placeholder {
position: absolute;
transition: all 200ms;
top: -20px;
bottom: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
input:placeholder-shown + .form-control-placeholder {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-control:focus + .form-control-placeholder {
position: absolute;
transition: all 200ms;
top: -20px;
bottom: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
label{
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
<br>
<br>
<div class="form-group">
<input type="text" class="form-control" placeholder=" " >
<label class="form-control-placeholder">Button text</label>
</div>
Add Space to you placeholder by default and after that use input:not(:placeholder-shown) property to check if input is empty or not. Here working example of your code
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.btn-add input:not(:placeholder-shown) ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" placeholder=" " >
<label class="floating-label" >Button text</label>
</div>
Since :placeholder-shown only works with placeholder text shown (no empty string) you could use visibility.
div {
margin-top:40px;
}
.btn-add input[type="text"] {
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: -20px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float input:placeholder-shown ~ label {
top: 0;
visibility: hidden;
}
.form-float {
position: relative;
}
<div class="form-float btn-add">
<input type="text" placeholder="Button Label" >
<label class="floating-label">Button Label</label>
</div>
These are two solutions. I think they need some adjustment because probably they are not correct.
Solution #1: Floating label on focus
.custom-form-input {
display: block;
width: 100%;
height:32px;
padding: 1rem .55rem .065rem .55rem;
font-weight: 400;
border: 1px solid #cad3d6;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: #fafafa;
font-size: 0.79em;
color:#000000;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.custom-form-input:focus,
.custom-form-input:active {
color: #212529;
background-color: #fff;
border-color: #585d61;
outline: 0;
}
.custom-form-floating {
position:relative;
}
.custom-form-floating-label {
position:absolute;
color: #9aa0a9;
font-size: 0.85em;
height:100%;
width:100%;
top: 0px;
display:flex;
align-items: center;
padding: 0 .55rem 0 .55rem;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
user-select: none;
pointer-events: none
}
.custom-form-input:focus ~ label,
.custom-form-input:valid ~ label {
font-size: 0.65rem;
height:55%;
}
.wrapper {
width:150px;
}
<div class="custom-form-floating">
<input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Example 1</label>
</div>
<div class="wrapper">
<div class="custom-form-floating">
<input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Example 2</label>
</div>
</div>
Solution #2: Floating label when type a letter
.custom-form-input {
display: block;
width: 100%;
height: 5px;
font-weight: 400;
border: 1px solid #cad3d6;
transition: border-color .15s ease-in-out;
background-color: #fafafa;
font-size: 1.2em;
color: #000000;
padding: 1rem .50rem 1rem .50rem;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.custom-form-input:focus,
.custom-form-input:active {
color: #212529;
background-color: #fff;
border-color: #585d61;
outline: 0;
}
.custom-form-floating {
position: relative;
}
.custom-form-floating-label {
position: absolute;
color: #9aa0a9;
font-size: 0.85em;
height: 100%;
width: 100%;
top: 0px;
display: flex;
align-items: center;
padding: 0 .55rem 0 .55rem;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
user-select: none;
pointer-events: none
}
.custom-form-input:valid {
padding: 1.50rem .50rem .50rem .50rem;
font-size: 0.79em;
}
.custom-form-input:valid~label {
font-size: 0.65rem;
height: 55%;
}
.wrapper {
width:250px;
}
<div class="wrapper">
<div class="custom-form-floating">
<input id="test" class="custom-form-input"
aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Correo electrónico o
usuario</label>
</div>
</div>
My input is overlapping with the text in its place holder after text is already in its spot.
My HTML For this Form:
<form action="./includes/login.inc.php" method="post">
<div class="group">
<input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<div class="btn-box">
<button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
</div>
</form>
And here is my style sheet, just for this form and nothing else:
form {
width: 320px;
margin: 45px auto;
}
form h1 {
font-size: 3em;
font-weight: 300;
text-align: center;
color: #2196F3;
}
form h5 {
text-align: center;
text-transform: uppercase;
color: #c6c6c6;
}
form hr.sep {
background: #2196F3;
box-shadow: none;
border: none;
height: 2px;
width: 25%;
margin: 0px auto 45px auto;
}
form .emoji {
font-size: 1.2em;
}
.group {
position: relative;
margin: 45px 0;
}
textarea {
resize: none;
}
input,
textarea {
background: none;
color: #4F4F4F;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 320px;
border: none;
border-radius: 0;
border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
outline: none;
}
input:focus ~ label,
textarea:focus ~ label {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 335px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
label {
color: #4F4F4F;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
}
.bar {
position: relative;
display: block;
width: 320px;
}
.bar:before {
content: '';
height: 2px;
width: 0;
bottom: 0px;
position: absolute;
background: #FF3B3F;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
left: 0%;
}
.btn {
background: #fff;
color: #959595;
border: none;
padding: 10px 20px;
border-radius: 3px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
color: #752021;
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
background: #FF3B3F;
color: #d3eafd;
}
.btn.btn-link:hover {
background: #0d8aee;
color: #deeffd;
}
.btn.btn-submit {
background: #FF3B3F;
color: white;
}
.btn.btn-submit:hover {
background: #752021;
color: white;
}
.btn.btn-cancel {
background: #eee;
}
.btn.btn-cancel:hover {
background: #e1e1e1;
color: #8b8b8b;
}
.btn-box {
text-align: center;
margin: 50px 0;
}
To be clear I want it to look like the bottom "Password" field when you deselect from the box. The text when its on top of the input moves back down to the bottom and overlaps it when you are deselecting.
Thanks for any help.
You can achieve that with jQuery .focus() and .blur() functions. First of all create a class with the focused style of your label. On input focus check if it has some value. If it has the focused class remains, otherwise remove it. Check the code bellow:
css
label.focused {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}
jQuery
$('input').focus(function() {
$(this).siblings('label').addClass('focused');
}).blur(function () {
if($(this).val().length == 0) {
$(this).siblings('label').removeClass('focused');
}
});
Full code
$('input').focus(function() {
$(this).siblings('label').addClass('focused');
}).blur(function () {
if($(this).val().length == 0) {
$(this).siblings('label').removeClass('focused');
}
});
form {
width: 320px;
margin: 45px auto;
}
form h1 {
font-size: 3em;
font-weight: 300;
text-align: center;
color: #2196F3;
}
form h5 {
text-align: center;
text-transform: uppercase;
color: #c6c6c6;
}
form hr.sep {
background: #2196F3;
box-shadow: none;
border: none;
height: 2px;
width: 25%;
margin: 0px auto 45px auto;
}
form .emoji {
font-size: 1.2em;
}
.group {
position: relative;
margin: 45px 0;
}
textarea {
resize: none;
}
input,
textarea {
background: none;
color: #4F4F4F;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 320px;
border: none;
border-radius: 0;
border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
outline: none;
}
/*input:focus ~ label,
textarea:focus ~ label {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}*/
label.focused {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 335px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
label {
color: #4F4F4F;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
}
.bar {
position: relative;
display: block;
width: 320px;
}
.bar:before {
content: '';
height: 2px;
width: 0;
bottom: 0px;
position: absolute;
background: #FF3B3F;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
left: 0%;
}
.btn {
background: #fff;
color: #959595;
border: none;
padding: 10px 20px;
border-radius: 3px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
color: #752021;
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
background: #FF3B3F;
color: #d3eafd;
}
.btn.btn-link:hover {
background: #0d8aee;
color: #deeffd;
}
.btn.btn-submit {
background: #FF3B3F;
color: white;
}
.btn.btn-submit:hover {
background: #752021;
color: white;
}
.btn.btn-cancel {
background: #eee;
}
.btn.btn-cancel:hover {
background: #e1e1e1;
color: #8b8b8b;
}
.btn-box {
text-align: center;
margin: 50px 0;
}
<form action="./includes/login.inc.php" method="post">
<div class="group">
<input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<div class="btn-box">
<button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Is it possible to have the 3 buttons below spaced to fit any size page? I want to keep the same button size, just making the space between the buttons larger or smaller depending on the screen size. Anything, helps.
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Form</h3>
<h4>Contact us</h4>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Sub-Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
Yes, you can use this below in .fieldset
display: flex;
justify-content: space-between;
Snippet
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width: 125px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Form</h3>
<h4>Contact us</h4>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Sub-Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
Just modify these declarations :
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
border: none;
cursor: pointer;
display:block;
margin: 0 auto;
}
.dropdown {
position: relative;
/*display: inline-block;*/
display:block;
width:33.333333%;
float:left;
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
border: none;
cursor: pointer;
display:block;
margin: 0 auto;
}
.dropdown {
position: relative;
/*display: inline-block;*/
display:block;
width:33.333333%;
float:left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Form</h3>
<h4>Contact us</h4>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Sub-Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset class="fieldset">
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
You can do like this in your CSS:
#media only screen and (max-width: 500px) {
input {
width:100%
}
}
I've got a little problem. I've placed my footer at absolute bottom, relative to body, but when I'm using a scroll, the footer doesn't stick to the bottom anymore.
this is the HTML
<body>
<div id="top-line"></div>
<div id="header">
<div class="wrapper">
<div class="logo"> </div>
</div>
</div>
<div id="menu">
<?php include 'menu.php';?>
</div>
<div class="wrapper">
<div id="content">
<div id="applybox">
<form action = "" method = "post">
<label>Firstname</label>
<input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" />
<label>Lastname</label>
<input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" />
<label>Age</label>
<input class="inputfield" type = "number" name = "password" min="16" max="40" />
<label>Gender</label>
<select class="inputfield" name="gender">
<option value="">Select...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Origin</label>
<select class="inputfield" name="origin">
<option value="">Select...</option>
<option value="Caucasian">Caucasian</option>
<option value="Asian">Asian</option>
<option value="African">African</option>
<option value="Latino">Latino</option>
</select>
<label>Describe your character's life up until current age.</label>
<textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea>
<input class="applybutton" type = "submit" value = "File application"/>
</form>
</div>
</div>
</div>
<div id="footer">Copyright © 2016 Degenraiderz. All rights reserved.</div>
</body>
And this is the CSS
/*===RESET===*/
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
text-decoration: none;
}
* :focus { outline: 0; }
ul {list-style: none;}
/*=================RESET COMPLETE========================*/
#font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff');
}
#font-face {
font-family: 'open_sansregular';
src: url('/fonts/OpenSans-Regular-webfont.eot');
src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
position: relative;
}
body {
font-family: Arial,sans-serif;
font-size: 12px;
background: #555;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
a {
text-decoration: none;
}
#top-line {
height: 8px;
background: #f1ebe0;
}
#footer {
color: #F7F7F7;
position: absolute;
bottom: 0;
width: 100%;
background: #292c2f;
height: 17px;
border-top: 3px solid #f1ebe0;
padding: 4px 0 2px 0;
text-align: center;
clear:both;
}
#header {
width: 100%;
background: #292c2f;
border-bottom: 3px solid #f1ebe0;
}
.headerbar {
width: 100%;
}
#navigation {
list-style: none;
display: block;
padding: 10px 0 10px 0;
text-align:right;
}
#navigation li {
display: inline-block;
position: relative;
}
#navigation li a {
color: #e5e5e5;
font-family: Bebas, Tahoma, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
padding: 10px 17px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
#navigation li a.active {
border-bottom: 3px solid #f1ebe0;
background: #444;
color: #F7F7F7;
}
#navigation li a:hover {
color: #F7F7F7;
background: #444;
border-bottom: 3px solid #f1ebe0;
}
#menu {
width: 100%;
background: #292c2f;
-webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
-moz-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
}
#menu .wrapper {
width: 1170px;
margin: 0 auto;
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
.logo {
position: relative;
min-height: 300px;
background: url(/images/banner.png) center center no-repeat;
background-size: cover;
}
#loginbox {
color: #16325c;
background: #CCC;
width: 380px;
height:300px;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.input {
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
}
.user {
margin-top: 8px;
margin-bottom: 16px;
}
.pass {
margin-top: 8px;
margin-bottom: 16px;
}
.loginbutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.loginbutton:hover {
background-color: #f1ebe0;
}
.remember {
padding: 16px 0;
position: relative;
margin: 0px;
font-size: 14px;
}
.forgot {
width: 100%;
border-top: 1px solid #D8DDE6;
color: #f1ebe0;
padding-top: 10px;
text-align: right;
}
#content {
font-family: open_sansregular, Arial, sans-serif;
margin-top: 10px;
position: relative;
text-align: justify;
color: #e5e5e5;
}
#content .wrapper {
margin-right: -2%;
}
.box {
box-sizing: border-box;
width: 23%;
margin: 1%;
float:left;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .content {
overflow: hidden;
font-size: 15px;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .title {
height:30px;
line-height:30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #666;
font-size:18px;
font-weight:bold;
display:block;
color:white;
padding:10px;
border: 1px solid gray;
border-bottom:none;
}
.dropdown-content {
z-index: 1;
display: none;
position: absolute;
bottom: -135px;
background: #292c2f;
min-width: 202px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav {
font-family: open_sansregular, Arial, sans-serif;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
display: inline-table;
position: relative;
padding: 0;
z-index: 1;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
nav ul li:hover {
background: #444;
}
nav ul li:hover a {
color: #F7F7F7;
}
nav ul li a {
display: block; padding: 15px 40px;
color: #e5e5e5; text-decoration: none;
}
nav ul ul {
background: #292c2f; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
min-width: 185px;
}
nav ul ul li a {
padding: 15px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #444;
border-bottom: 3px solid #f1ebe0;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#applybox {
color: #16325c;
background: #CCC;
width: auto;
height: auto;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.inputfield {
display:block;
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
margin-top: 8px;
margin-bottom: 16px;
}
.applybutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.applybutton:hover {
background-color: #f1ebe0;
}
https://jsfiddle.net/introzen/g88mrg3m/
What have I done wrong here? I've tried putting height: auto; and padding-bottom: 50px; on Body, but then on pages not using scroll, the footer is not at bottom.
Well its because your body got a height:100%;. Because elements height always references to its parents height, it doesn't grow the size you want to.
If you remove the height, the body will calculate its height based on his children.
Remove the height:100%; and it will stick to the end of your screen.
If u want to keep the site on at least 100% height, you can use max-height:100%;.
Change the footer to position: fixed
Using flex your header/footer can grow dynamically and still keep the footer at absolute bottom
In below sample I added a container div, removed position: absolute on the footer and updated/added these 2 CSS rules
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
Stack snippet
/*===RESET===*/
html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,a,form,pagele,td,tr,blockquote,iframe {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
text-decoration: none;
}
* :focus { outline: 0; }
ul {list-style: none;}
/*=================RESET COMPLETE========================*/
#font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('/fonts/BebasNeue.woff') format('woff');
}
#font-face {
font-family: 'open_sansregular';
src: url('/fonts/OpenSans-Regular-webfont.eot');
src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
position: relative;
}
body {
font-family: Arial,sans-serif;
font-size: 12px;
background: #555;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
a {
text-decoration: none;
}
#top-line {
height: 8px;
background: #f1ebe0;
}
#footer {
color: #F7F7F7;
bottom: 0;
width: 100%;
background: #292c2f;
height: 17px;
border-top: 3px solid #f1ebe0;
padding: 4px 0 2px 0;
text-align: center;
clear:both;
}
#header {
width: 100%;
background: #292c2f;
border-bottom: 3px solid #f1ebe0;
}
.headerbar {
width: 100%;
}
#navigation {
list-style: none;
display: block;
padding: 10px 0 10px 0;
text-align:right;
}
#navigation li {
display: inline-block;
position: relative;
}
#navigation li a {
color: #e5e5e5;
font-family: Bebas, Tahoma, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
padding: 10px 17px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
#navigation li a.active {
border-bottom: 3px solid #f1ebe0;
background: #444;
color: #F7F7F7;
}
#navigation li a:hover {
color: #F7F7F7;
background: #444;
border-bottom: 3px solid #f1ebe0;
}
#menu {
width: 100%;
background: #292c2f;
-webkit-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
-moz-box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
box-shadow: 0px 7px 21px 0px rgba(50, 50, 50, 0.65);
}
#menu .wrapper {
width: 1170px;
margin: 0 auto;
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
.logo {
position: relative;
min-height: 300px;
background: url(/images/banner.png) center center no-repeat;
background-size: cover;
}
#loginbox {
color: #16325c;
background: #CCC;
width: 380px;
height:300px;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.input {
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
}
.user {
margin-top: 8px;
margin-bottom: 16px;
}
.pass {
margin-top: 8px;
margin-bottom: 16px;
}
.loginbutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.loginbutton:hover {
background-color: #f1ebe0;
}
.remember {
padding: 16px 0;
position: relative;
margin: 0px;
font-size: 14px;
}
.forgot {
width: 100%;
border-top: 1px solid #D8DDE6;
color: #f1ebe0;
padding-top: 10px;
text-align: right;
}
#content {
font-family: open_sansregular, Arial, sans-serif;
margin-top: 10px;
position: relative;
text-align: justify;
color: #e5e5e5;
}
#content .wrapper {
margin-right: -2%;
}
.box {
box-sizing: border-box;
width: 23%;
margin: 1%;
float:left;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .content {
overflow: hidden;
font-size: 15px;
display: inline-block;
background: #999;
border-radius: 5px;
border: 1px solid #999;
padding: 10px;
}
.box .title {
height:30px;
line-height:30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #666;
font-size:18px;
font-weight:bold;
display:block;
color:white;
padding:10px;
border: 1px solid gray;
border-bottom:none;
}
.dropdown-content {
z-index: 1;
display: none;
position: absolute;
bottom: -135px;
background: #292c2f;
min-width: 202px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav {
font-family: open_sansregular, Arial, sans-serif;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
display: inline-table;
position: relative;
padding: 0;
z-index: 1;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
nav ul li:hover {
background: #444;
}
nav ul li:hover a {
color: #F7F7F7;
}
nav ul li a {
display: block; padding: 15px 40px;
color: #e5e5e5; text-decoration: none;
}
nav ul ul {
background: #292c2f; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
min-width: 185px;
}
nav ul ul li a {
padding: 15px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #444;
border-bottom: 3px solid #f1ebe0;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#applybox {
color: #16325c;
background: #CCC;
width: auto;
height: auto;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
font-family: Bebas, Tahoma, Arial, sans-serif;
border-radius: 5px;
border: 1px solid #333;
}
.inputfield {
display:block;
border: 1px solid #333;
border-radius: 4px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: #F9F9F9;
font-family: open_sansregular, Arial, sans-serif;
box-sizing: border-box;
-webkit-appearance: none;
font-size: 14px;
transition: all 0.1s;
width: 100%;
padding: 12px;
margin-top: 8px;
margin-bottom: 16px;
}
.applybutton {
width: 100%;
background-color: #E9D7AD;
color: #16325c;
transition: all 0.1s;
border: 1px solid #999;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-family: open_sansregular, Arial, sans-serif;
cursor: pointer;
background-image: none !important;
}
.applybutton:hover {
background-color: #f1ebe0;
}
<div class="container">
<div id="top-line"></div>
<div id="header">
<div class="wrapper">
<div class="logo"> </div>
</div>
</div>
<div id="menu">
<?php include 'menu.php';?>
</div>
<div class="wrapper">
<div id="content" style="">
<div id="applybox">
<form action = "" method = "post">
<label>Firstname</label>
<input class="inputfield" type = "text" name = "firstname" placeholder="E.g. Srinivasa" />
<label>Lastname</label>
<input class="inputfield" type = "text" name = "lastname" placeholder="E.g. Ramanujan" />
<label>Age</label>
<input class="inputfield" type = "number" name = "password" min="16" max="40" />
<label>Gender</label>
<select class="inputfield" name="gender">
<option value="">Select...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Origin</label>
<select class="inputfield" name="origin">
<option value="">Select...</option>
<option value="Caucasian">Caucasian</option>
<option value="Asian">Asian</option>
<option value="African">African</option>
<option value="Latino">Latino</option>
</select>
<label>Describe your character's life up until current age.</label>
<textarea class="inputfield" name="background" rows="5" cols="40" placeholder="The life of your character..."></textarea>
<input class="applybutton" type = "submit" value = "File application"/>
</form>
</div>
</div>
</div>
<div id="footer">Copyright © 2016 Degenraiderz. All rights reserved.</div>
</div>
I'm creating a dropdown login form, but once the jQuery is working right, I get the menu displayed at left (when Log in is at right). Some images to see it clearly:
And when I click on 'Log in':
It loads this way. Here's the code:
HTML:
<div id="navthing">
<h2>Log in | Sign Up</h2>
<div class="login">
<div class="arrow-up"></div>
<div class="formholder">
<div class="randompad">
<fieldset>
<label name="email">Email</label>
<input type="email" value="example#example.com" />
<label name="password">Password</label>
<input type="password" />
<input type="submit" value="Login" />
</fieldset>
</div>
</div>
</div>
</div>
And CSS:
#navthing {
text-align: right;
padding: 0.5em;
}
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
}
.formholder {
background: #ecf0f1;
width: 250px;
border-radius: 5px;
padding-top: 5px;
z-index: 1;
display:block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
left: 10%;
position: absolute;
top: -10px;
}
.formholder input[type="email"], .formholder input[type="password"] {
padding: 7px 5px;
margin: 10px 0;
width: 96%;
display: block;
font-size: 18px;
border-radius: 5px;
border: none;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.formholder input[type="email"]:focus, .formholder input[type="password"]:focus {
outline: none;
box-shadow: 0 0 1px 1px #1abc9c;
}
.formholder input[type="submit"] {
background: #1abc9c;
padding: 10px;
font-size: 20px;
display: block;
width: 100%;
border: none;
color: #fff;
border-radius: 5px;
}
.formholder input[type="submit"]:hover {
background: #1bc6a4;
}
.randompad {
padding: 10px;
}
.green {
color: #1abc9c;
}
a {
color: #ecf0f1;
text-decoration: none;
}
a:hover {
color: #1abc9c;
}
jsfiddle
I got the .login's position in absolute because if not the menu made the darkblue div bigger. How could I display the menu (the arrow and the rest of the form) below 'log in'? I'm trying but with no result. Thank you.
If I correctly understand your question, you are trying to position your menu at the right side of navbar. If so, you just need to add correct position to it, by right or left properties. I've also change arrow position and add position:relative to your #navthing.
$( document ).ready(function() {
$('input[type="submit"]').mousedown(function(){
$(this).css('background', '#2ecc71');
});
$('input[type="submit"]').mouseup(function(){
$(this).css('background', '#1abc9c');
});
$('#loginform').click(function(){
$('.login').fadeToggle('slow');
$(this).toggleClass('green');
});
$(document).mouseup(function (e)
{
var container = $(".login");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
$('#loginform').removeClass('green');
}
});
});
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, Tahoma;
font-size: 62.5%;
background: #242c38;
}
#navthing {
text-align: right;
position:relative;
padding: 0.5em;
}
.login {
position: absolute;
right: 52px;
top: 41px;
width:250px;
display:none;
z-index: 9999;
}
.formholder {
background: #ecf0f1;
width: 250px;
border-radius: 5px;
padding-top: 5px;
z-index: 1;
display:block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
right: 10%;
position: absolute;
top: -10px;
}
.formholder input[type="email"], .formholder input[type="password"] {
padding: 7px 5px;
margin: 10px 0;
width: 96%;
display: block;
font-size: 18px;
border-radius: 5px;
border: none;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.formholder input[type="email"]:focus, .formholder input[type="password"]:focus {
outline: none;
box-shadow: 0 0 1px 1px #1abc9c;
}
.formholder input[type="submit"] {
background: #1abc9c;
padding: 10px;
font-size: 20px;
display: block;
width: 100%;
border: none;
color: #fff;
border-radius: 5px;
}
.formholder input[type="submit"]:hover {
background: #1bc6a4;
}
.randompad {
padding: 10px;
}
.green {
color: #1abc9c;
}
a {
color: #ecf0f1;
text-decoration: none;
}
a:hover {
color: #1abc9c;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
/*text-align:center;*/
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="navthing">
<h2>Log in | Sign Up</h2>
<div class="login">
<div class="arrow-up"></div>
<div class="formholder">
<div class="randompad">
<fieldset>
<label name="email">Email</label>
<input type="email" value="example#example.com" />
<label name="password">Password</label>
<input type="password" />
<input type="submit" value="Login" />
</fieldset>
</div>
</div>
</div>
</div>
</header>
Do You want like this?
$( document ).ready(function() {
$('input[type="submit"]').mousedown(function(){
$(this).css('background', '#2ecc71');
});
$('input[type="submit"]').mouseup(function(){
$(this).css('background', '#1abc9c');
});
$('#loginform').click(function(){
$('.login').fadeToggle('slow');
$(this).toggleClass('green');
});
$(document).mouseup(function (e)
{
var container = $(".login");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
$('#loginform').removeClass('green');
}
});
});
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, Tahoma;
font-size: 62.5%;
background: #242c38;
}
#navthing {
text-align: right;
padding: 0.5em;
}
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
right:40px;
}
.formholder {
background: #ecf0f1;
width: 250px;
border-radius: 5px;
padding-top: 5px;
z-index: 1;
display:block;
margin-top:15px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
left: 41%;
position: absolute;
top: 0px;
}
.formholder input[type="email"], .formholder input[type="password"] {
padding: 7px 5px;
margin: 10px 0;
width: 96%;
display: block;
font-size: 18px;
border-radius: 5px;
border: none;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.formholder input[type="email"]:focus, .formholder input[type="password"]:focus {
outline: none;
box-shadow: 0 0 1px 1px #1abc9c;
}
.formholder input[type="submit"] {
background: #1abc9c;
padding: 10px;
font-size: 20px;
display: block;
width: 100%;
border: none;
color: #fff;
border-radius: 5px;
}
.formholder input[type="submit"]:hover {
background: #1bc6a4;
}
.randompad {
padding: 10px;
}
.green {
color: #1abc9c;
}
a {
color: #ecf0f1;
text-decoration: none;
}
a:hover {
color: #1abc9c;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
/*text-align:center;*/
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="navthing">
<h2>Log in | Sign Up</h2>
<div class="login">
<div class="arrow-up"></div>
<div class="formholder">
<div class="randompad">
<fieldset>
<label name="email">Email</label>
<input type="email" value="example#example.com" />
<label name="password">Password</label>
<input type="password" />
<input type="submit" value="Login" />
</fieldset>
</div>
</div>
</div>
</div>
</header>
If you want this block to be in absolute position relative to this link, you have a couple of choices.
One, you keep this structure and put a relative position to the parent, header and then you position it.
Or you put this block in the container of the link itself and add a position:relative; to the container of the link.
I choose the first way to do it and here is the JsFiddle
The code that change :
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
right: 50px;
top:40px
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
right: 10%;
position: absolute;
top: -10px;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
/*text-align:center;*/
z-index: 8;
position:relative; /* I add this line to make it works */
}
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
right: 50px;
top: 40px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
right: 10%;
position: absolute;
top: -10px;
}