my css code is below:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style>
<div class="login-help">
Register • Forgot Password
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
so the view will looks like :
So,I need two div class which I have to place inside <div id="content"></div>
I have tried..
but it is not creating..How can i do this?
your question is not very clear
but if you are saying that the login form is not creating try putting the css code inside the index.html which means inline it works fine
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style>
/*the login card css is inside the html */
.login-card {
padding: 40px;
width: 274px;
background-color: #F7F7F7;
margin: 0 auto 10px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.login-card h1 {
font-weight: 100;
text-align: center;
font-size: 2.3em;
}
.login-card input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.login-card input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.login {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.login-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.login-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.login-card a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-card a:hover {
opacity: 1;
}
.login-help {
width: 100%;
text-align: center;
font-size: 12px;
}
/************/
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: 'Cabin', sans-serif;
background-color: #f0f6ff;
}
.contanier {
margin:auto;
background: #fff;
height: 1500px;
display: block;
width: 70%;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#rightcol {
position:relative;
float: right;
display:inline-block;
width: 30%;
margin-left:auto;
margin-right:auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#content {
background: #fff;
position:relative;
display:inline-block;
margin-left:auto;
margin-right:auto;
width: 68%;
height: 1500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
.slider {
display: block;
margin: auto;
margin-bottom: 30px;
width: 60px;
}
.slider ul {
height: 8px;
}
.slider ul li {
float: left;
list-style: none;
background: url(../img/slide_point_bg.png) no-repeat;
width: 8px;
height: 8px;
margin-left: 5px;
border-radius: 100%;
}
.slider ul li.active {
background: url(../img/slide_point_active_bg.png) no-repeat;
}
.slider ul li:hover {
box-shadow: 0 0 0.5em black;
}
.list-of-resources {
display: table;
}
.list-of-resources > div {
display: table-row;
}
.list-of-resources > div > div {
display: table-cell;
/* padding: 5px 0; */
}
.list-of-resources > div > div:last-child {
padding: 0 0 0 30px;
}
.list-of-resources a {
text-decoration: none;
color: white;
}
.list-of-resources a:hover {
color: tomato;
}
#registration {
font-family:'Open Sans Condensed', sans-serif;
width: 100%;
margin: 0px auto;
position: relative;
}
#registration .fieldset {
border-radius: 3px;
}
#registration legend {
text-align: center;
background: black;
width: 100%;
padding: 30px 0;
border-radius: 3px 3px 0 0;
color: white;
font-size:2em;
}
.fieldset form{
border:3px solid black;
margin:0 auto;
display:block;
width:100%;
padding:30px 20px;
box-sizing: border-box;
border-radius:0 0 3px 3px;
}
.placeholder #registration label {
display: none;
}
.no-placeholder #registration label{
margin-left:5px;
position:relative;
display:block;
color:grey;
text-shadow:0 1px white;
font-weight:bold;
}
/* all */
::-webkit-input-placeholder { text-shadow:1px 1px 1px white; font-weight:bold; }
::-moz-placeholder { text-shadow:0 1px 1px white; font-weight:bold; } /* firefox 19+ */
:-ms-input-placeholder { text-shadow:0 1px 1px white; font-weight:bold; } /* ie */
#registration input[type=text] {
padding: 15px 20px;
border-radius: 1px;
margin:5px auto;
background-color:#f9ebae;
border: 1px solid silver;
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 5px rgba(0,0,0,0.2), 0 1px rgba(255,255,255,.8);
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition:background-color .5s ease;
-moz-transition:background-color .5s ease;
-o-transition:background-color .5s ease;
-ms-transition:background-color .5s ease;
transition:background-color .5s ease;
}
.no-placeholder #registration input[type=text] {
padding: 10px 20px;
}
#registration input[type=text]:active, .placeholder #registration input[type=text]:focus {
outline: none;
border-color: silver;
background-color:white;
}
#registration input[type=submit] {
font-family:'Open Sans Condensed', sans-serif;
text-transform:uppercase;
outline:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
background-color: red;
padding: 10px;
color: white;
border-radius: 3px;
font-size: 1.5em;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
position:relative;
top:0;
}
#registration input[type=submit]:hover {
background-color: #2980b9;
}
#registration input[type=submit]:active {
background:#5C8CA7;
}
.parsley-error-list{
background-color:#C34343;
padding: 5px 11px;
margin: 0;
list-style: none;
border-radius: 0 0 3px 3px;
margin-top:-5px;
margin-bottom:5px;
color:white;
border:1px solid #870d0d;
border-top:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position:relative;
top:-1px;
text-shadow:0px 1px 1px #460909;
font-weight:700;
font-size:12px;
}
.parsley-error{
border-color:#870d0d!important;
border-bottom:none;
}
#registration select{
width:100%;
padding:5px;
}
::-moz-focus-inner {
border: 0;
}
#media screen and (max-width: 1000px) {
.container {
width: 90%;
}
}
#media screen and (max-width: 700px) {
#rightcol, #content{display:block; width:100%;}
.contanier {
display:block;
width:95%;
-webkit-flex-flow: column;
flex-direction: column;
}
#rightcol, #content {
/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#rightcol{
min-height: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<div class="contanier">
<div id="content">
<div class="login-card">
<h1>Log-in</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login login-submit" value="login">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
<div class="login-card">
<h1>Log-in</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login login-submit" value="login">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
</div>
<div id="rightcol">
<div id="registration">
<div class='fieldset'>
<legend>put your id below</legend>
<form action="#" method="post" data-validate="parsley">
<div class='row'>
<label for="email">put your id</label>
<input type="text" placeholder="yourid#example.com" name='email' data-required="true" data-type="email" data-error-message="Your E-mail is required">
</div>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>
</html>
if this not you problem please comment i can help with this
and id you want to put the login form right you should make the div id content's width more than what you have and put a float right then and then you can make the other adjustments to the css code
*
{
margin: 0;
padding: 0;
}
body
{
width: 50%;
font-family: 'Cabin' , sans-serif;
background-color: #f0f6ff;
}
.contanier
{
margin: auto;
background: #fff; /* height: 1500px; */
display: block; /* width: 10%; */
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#rightcol
{
position: relative;
float: right;
display: inline-block;
width: 30%;
margin-left: auto;
margin-right: auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#content
{
background: #fff;
position: relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 68%;
height: 1500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
.slider
{
display: block;
margin: auto;
margin-bottom: 30px;
width: 60px;
}
.slider ul
{
height: 8px;
}
.slider ul li
{
float: left;
list-style: none;
background: url(../img/slide_point_bg.png) no-repeat;
width: 8px;
height: 8px;
margin-left: 5px;
border-radius: 100%;
}
.slider ul li.active
{
background: url(../img/slide_point_active_bg.png) no-repeat;
}
.slider ul li:hover
{
box-shadow: 0 0 0.5em black;
}
.list-of-resources
{
display: table;
}
.list-of-resources > div
{
display: table-row;
}
.list-of-resources > div > div
{
display: table-cell; /* padding: 5px 0; */
}
.list-of-resources > div > div:last-child
{
padding: 0 0 0 30px;
}
.list-of-resources a
{
text-decoration: none;
color: white;
}
.list-of-resources a:hover
{
color: tomato;
}
#registration
{
font-family: 'Open Sans Condensed' , sans-serif;
width: 100%;
margin: 0px auto;
position: relative;
}
#registration .fieldset
{
border-radius: 3px;
}
#registration legend
{
text-align: center;
background: black;
width: 100%;
padding: 30px 0;
border-radius: 3px 3px 0 0;
color: white;
font-size: 2em;
}
.fieldset form
{
border: 3px solid black;
margin: 0 auto;
display: block;
width: 100%;
padding: 30px 20px;
box-sizing: border-box;
border-radius: 0 0 3px 3px;
}
.placeholder #registration label
{
display: none;
}
.no-placeholder #registration label
{
margin-left: 5px;
position: relative;
display: block;
color: grey;
text-shadow: 0 1px white;
font-weight: bold;
}
/* all */
::-webkit-input-placeholder
{
text-shadow: 1px 1px 1px white;
font-weight: bold;
}
::-moz-placeholder
{
text-shadow: 0 1px 1px white;
font-weight: bold;
}
/* firefox 19+ */
:-ms-input-placeholder
{
text-shadow: 0 1px 1px white;
font-weight: bold;
}
/* ie */
#registration input[type=text]
{
padding: 15px 20px;
border-radius: 1px;
margin: 5px auto;
background-color: #f9ebae;
border: 1px solid silver;
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 5px rgba(0,0,0,0.2), 0 1px rgba(255,255,255,.8);
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color .5s ease;
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-ms-transition: background-color .5s ease;
transition: background-color .5s ease;
}
.no-placeholder #registration input[type=text]
{
padding: 10px 20px;
}
#registration input[type=text]:active, .placeholder #registration input[type=text]:focus
{
outline: none;
border-color: silver;
background-color: white;
}
#registration input[type=submit]
{
font-family: 'Open Sans Condensed' , sans-serif;
text-transform: uppercase;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
background-color: red;
padding: 10px;
color: white;
border-radius: 3px;
font-size: 1.5em;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
position: relative;
top: 0;
}
#registration input[type=submit]:hover
{
background-color: #2980b9;
}
#registration input[type=submit]:active
{
background: #5C8CA7;
}
.parsley-error-list
{
background-color: #C34343;
padding: 5px 11px;
margin: 0;
list-style: none;
border-radius: 0 0 3px 3px;
margin-top: -5px;
margin-bottom: 5px;
color: white;
border: 1px solid #870d0d;
border-top: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: -1px;
text-shadow: 0px 1px 1px #460909;
font-weight: 700;
font-size: 12px;
}
.parsley-error
{
border-color: #870d0d !important;
border-bottom: none;
}
#registration select
{
width: 100%;
padding: 5px;
}
::-moz-focus-inner
{
border: 0;
}
.login-card
{
padding: 40px;
width: 274px;
background-color: #F7F7F7;
margin: 0 auto 10px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.login-card h1
{
font-weight: 100;
text-align: center;
font-size: 2.3em;
}
.login-card input[type=submit]
{
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.login-card input[type=text], input[type=password]
{
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0; /* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=text]:hover, input[type=password]:hover
{
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.login
{
text-align: center;
font-size: 14px;
font-family: 'Arial' , sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px; /* border-radius: 3px; */ /* -webkit-user-select: none;
user-select: none; */
}
.login-submit
{
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe; /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.login-submit:hover
{
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8; /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.login-card a
{
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-card a:hover
{
opacity: 1;
}
.login-help
{
width: 100%;
text-align: center;
font-size: 12px;
}
#media screen and (max-width: 1000px)
{
.container
{
width: 90%;
}
}
#media screen and (max-width: 700px)
{
#rightcol, #content
{
display: block;
width: 100%;
}
.contanier
{
display: block;
width: 95%;
-webkit-flex-flow: column;
flex-direction: column;
}
#rightcol, #content
{
/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#rightcol
{
min-height: 50px;
max-height: 50px;
}
}
#Div1
{
float: left;
}
#Div2
{
float: right;
}
<div class="contanier">
<div id="Div1">
<div class="login-card" style="float: left">
<h1>
Log-in</h1>
<br />
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login login-submit" value="login">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
</div>
<div id="Div2">
<div id="Div3">
<div class='fieldset'>
<legend>put your id below</legend>
<form action="#" method="post" data-validate="parsley">
<div class='row'>
<label for="email">
put your id</label><br />
<input type="text" placeholder="yourid#example.com" name='email' data-required="true"
data-type="email" data-error-message="Your E-mail is required">
</div>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<div id="Div4">
<div class="login-card" style="float: left">
<h1>
Log-in</h1>
<br />
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login login-submit" value="login">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
</div>
</div>
try this snippet. It will create two login divs on the left and one 'put your id' div on right. you can create a blank HTML file to test this snippet. if you run this snippet in this browser, you might see the divs one below another due to width of result section, but works fine on the full screen page.
Related
I wish to make it so that the textarea is no longer than the original length of the page. Meaning you shouldn't need a scrollbar to see the whole thing.
Currently I am following the answer from this question to use flexbox to make it fill the height dynamically.
Currently the text area is longer than the original size and therefore a scrollbar appears and to see the whole thing you have to scroll down.
html, body {
height: 100%;
margin: 0;
}
input[type=text]{
width: 100%;
font-size: 32px;
border: 3px solid #999;
padding: 12px 20px;
margin: 5px 10px;
box-sizing: border-box;
flex: 0 1 auto;
outline: none;
}
div {
display: flex;
}
.fillspace {
display: flex;
height: 100%;
}
input[type=text]:focus{
border: 3px solid #555;
}
button {
background-color: #0099cc;
border: none;
color: white;
text-align: center;
padding: 16px 32px;
text-decoration: none;
display: inline-block;
font-size: 32px;
margin: 5px 10px 5px 0;
}
button:hover{
background-color: #007399;
outline: none;
}
button:active{
background-color: #007399;
}
textarea{
outline: none;
resize: none;
font-size: 32px;
border: 3px solid #999;
padding: 12px 20px;
margin: 5px 10px 10px 10px;
box-sizing: border-box;
width: 100%;
height: 100%;
flex: 1 1 auto;
}
textarea:focus{
border: 3px solid #555;
}
h1{
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
<body>
<h1>Command Queue</h1>
<div>
<input placeholder="Type command here" type="text"/>
<button>Run</button>
</div>
<div class="fillspace">
<textarea id="commandOutput">{{.}}</textarea>
</div>
</body>
Using flex you could solve it by change the following css rules:
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
div {
display: flex;
}
.fillspace {
flex: 1
}
Notice that you need a container displayed as flex, in this case with column direction (body) and later set flex: 1 to the container you want to grows as much as possible.
Hope this helps,
Regards
I used offsetHeight
const textarea = document.querySelector("textarea");
const a = document.querySelector("#a");
const input = document.querySelector("input");
const h1 = document.querySelector("h1");
let a_h = a.offsetHeight;
let inp_h = input.offsetHeight;
let h1_h = h1.offsetHeight;
let total_height = a_h + inp_h + h1_h;
textarea.style.height = "calc(100% - " + total_height + "px)";
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
input[type=text]{
width: 100%;
font-size: 32px;
border: 3px solid #999;
padding: 12px 20px;
margin: 5px 10px;
box-sizing: border-box;
flex: 0 1 auto;
outline: none;
}
div {
display: flex;
}
.fillspace {
display: flex;
height: 100%;
}
input[type=text]:focus{
border: 3px solid #555;
}
button {
background-color: #0099cc;
border: none;
color: white;
text-align: center;
padding: 16px 32px;
text-decoration: none;
display: inline-block;
font-size: 32px;
margin: 5px 10px 5px 0;
}
button:hover{
background-color: #007399;
outline: none;
}
button:active{
background-color: #007399;
}
textarea{
outline: none;
resize: none;
font-size: 32px;
border: 3px solid #999;
padding: 12px 20px;
margin: 5px 10px 10px 10px;
box-sizing: border-box;
width: 100%;
height: 100%;
flex: 1 1 auto;
}
textarea:focus{
border: 3px solid #555;
}
h1{
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
<body>
<h1>Command Queue</h1>
<div id="a">
<input placeholder="Type command here" type="text"/>
<button>Run</button>
</div>
<div class="fillspace">
<textarea id="commandOutput">{{.}}</textarea>
</div>
</body>
Try this:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
body > * {
flex: 0 0 auto;
}
input[type=text]{
width: 100%;
font-size: 32px;
border: 3px solid #999;
padding: 12px 20px;
margin: 5px 10px;
box-sizing: border-box;
outline: none;
}
div {
display: flex;
}
.fillspace {
flex: 1 0 auto;
}
input[type=text]:focus{
border: 3px solid #555;
}
button {
background-color: #0099cc;
border: none;
color: white;
text-align: center;
padding: 16px 32px;
text-decoration: none;
display: inline-block;
font-size: 32px;
margin: 5px 10px 5px 0;
}
button:hover{
background-color: #007399;
outline: none;
}
button:active{
background-color: #007399;
}
textarea{
outline: none;
resize: none;
font-size: 32px;
border: 3px solid #999;
padding: 12px 20px;
margin: 5px 10px 10px 10px;
box-sizing: border-box;
width: 100%;
}
textarea:focus{
border: 3px solid #555;
}
h1{
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
<body>
<h1>Command Queue</h1>
<div class="cmd-group">
<input placeholder="Type command here" type="text"/>
<button>Run</button>
</div>
<div class="fillspace">
<textarea id="commandOutput">{{.}}</textarea>
</div>
</body>
I am working on Expandable Search but facing one problem. When i click on search bar then search bar is expanding. But right side content is moving down. I wanna hide right side content when search bar is expand similar to stackoverflow search bar.
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
background-color: #FAFAFB;
border-top: 3px solid #F48024;
float: left;
padding-bottom: 10px;
-moz-box-shadow: 3px 3px 5px 1px #ccc;
-webkit-box-shadow: 3px 3px 5px 1px #ccc;
box-shadow: 3px 3px 5px 1px #ccc;
}
.innerheader {
width: 1000px;
margin: auto;
}
.logo_name {
display: inline-block;
margin-top: 13px;
line-height: 1em;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 22px;
}
.ga_a {
float: left;
}
.ga_b {
float: left;
padding: 5px;
padding-bottom: 10px;
margin-top: 5px;
}
.ga_b ul {
margin: 0px;
padding: 0px;
margin-left: 7px;
line-height:1;
}
.ga_b ul>li {
display:inline-block;
margin-left: 5px;
padding: 5px;
}
.ga_b ul>li a {
text-decoration: none;
color: black;
font-size: 15px;
font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
}
.ga_b ul>li:hover {
background-color: #ECECEC;
}
.ga_c {
float: left;
}
.ga_c input {
outline: none;
}
.ga_c input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
margin-left: 10px;
}
.ga_c input::-webkit-search-decoration,
.ga_c input::-webkit-search-cancel-button {
display: none;
}
.ga_c input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ffffff;
padding: 9px 10px 9px 32px;
width: 175px;
border-radius: 5px;
margin-top: 5px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.ga_c input[type=search]:focus {
width: 400px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
.ga_c input:-moz-placeholder {
color: #999;
}
.ga_c input::-webkit-input-placeholder {
color: #999;
}
.ga_d {
float: left;
}
.ga_d ul>li {
display: inline-block;
display: fixed;
}
<div class="mainheader">
<div class="innerheader">
<div class="ga_a">
<a class="navbar-brand logo_name" href="#">WebSiteName</a>
</div>
<div class="ga_b">
<ul>
<li>Text One</li>
<li>Text Two</li>
<li>Text Three</li>
</ul>
</div>
<div class="ga_c">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</div>
You can do it with the positioning:
* {box-sizing: border-box} /* recommended */
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
min-width: 1000px; /* added / needs to match the .innerheader width */
margin: 0 auto; /* added */
background-color: #FAFAFB;
border-top: 3px solid #F48024;
float: left;
padding-bottom: 10px;
-moz-box-shadow: 3px 3px 5px 1px #ccc;
-webkit-box-shadow: 3px 3px 5px 1px #ccc;
box-shadow: 3px 3px 5px 1px #ccc;
}
.innerheader {
width: 1000px;
margin: 0 auto; /* modified */
}
.logo_name {
display: inline-block;
margin-top: 13px;
line-height: 1em;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 22px;
}
.ga_a {
float: left;
}
.ga_b {
float: left;
padding: 5px;
padding-bottom: 10px;
margin-top: 5px;
}
.ga_b ul {
margin: 0;
padding: 0;
margin-left: 7px;
line-height: 1;
}
.ga_b ul>li {
display:inline-block;
margin-left: 5px;
padding: 5px;
}
.ga_b ul>li>a {
text-decoration: none;
color: #000; /*black*/
font-size: 15px;
font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
}
.ga_b ul>li:hover {
background: #ECECEC;
}
.ga_c {
position: relative; /* needs to be set because of the absolute positioned child */
float: left;
}
.ga_c input {
outline: none;
}
.ga_c input[type=search] {
position: absolute; /* needs to be positioned absolutely, i.e. be removed from the normal document flow so that it can "overlay" and other element, of course the z-index needs to be set */
z-index: 9999; /* usually something big just to be sure it stays on top / in front of everything else */
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
margin-left: 10px;
}
.ga_c input::-webkit-search-decoration,
.ga_c input::-webkit-search-cancel-button {
display: none;
}
.ga_c input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #fff;
padding: 9px 10px 9px 32px;
width: 175px;
border-radius: 5px;
margin-top: 5px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.ga_c input[type=search]:focus {
width: 400px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
.ga_c input:-moz-placeholder {
color: #999;
}
.ga_c input::-webkit-input-placeholder {
color: #999;
}
.ga_d {
position: relative; /* positioned relative to its normal position so that we can move it with "directional" properties */
left: 229px; /* moved to the right by the width of the .ga_c (inspected the element) */
float: left;
}
.ga_d ul>li {
display: inline-block;
display: fixed;
}
<div class="mainheader">
<div class="innerheader">
<div class="ga_a">
<a class="navbar-brand logo_name" href="#">WebSiteName</a>
</div>
<div class="ga_b">
<ul>
<li>Text One</li>
<li>Text Two</li>
<li>Text Three</li>
</ul>
</div>
<div class="ga_c">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</div>
With your structure, it is not possible using css only. However if change the structure you could have something like this.
*{
box-sizing: border-box;
font-family: arial;
}
input{
padding: 10px;
background: #eee;
border: 1px solid #ddd;
display: inline-block;
transition: .3s;
margin-right: 10px;
width: 250px;
}
input:focus{
width: 400px;
}
input:focus + div{
opacity: 0;
visibility: hidden;
}
ul{
padding: 0;
margin: 0;
}
ul li{
display: inline;
margin-right: 5px;
}
div {
display: inline-block;
transition: .3s;
}
<input type="search" placeholder="Search">
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
I am preety new to HTML and CSS. And I also know is a very basic question. I am trying to create a login frontend the code which I am using is as shown below. Code is written by using HTML and css only
<!DOCTYPE html>
<html>
<head>
<style>
form {
border: 6px solid #f1f1f1;
}
input[type=text]{
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
input[type=password] {
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 40px 12px 0;
}
.container {
padding: 20px;
}
span.psw {
float: right;
padding-top: 16px;
}
</style>
</head>
<body>
<center>
<h2>Inventory Update Interface Login</h2>
</center>
<form method="post">
<div class="container">
<label>
<b>Username</b>
</label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label>
<b>Password</b>
</label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
but the problem is that I want to make the box in the center of the screen and text field to be slightly smaller in length. Thank in advance!
Add This CSS
.container{
max-width:600px;
border: 6px solid #f1f1f1;
margin:0 auto;
}
form {}
.container {
max-width: 600px;
border: 6px solid #f1f1f1;
margin: 0 auto;
}
input[type=text] {
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
input[type=password] {
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 40px 12px 0;
}
.container {
padding: 20px;
}
span.psw {
float: right;
padding-top: 16px;
}
<center>
<h2>Inventory Update Interface Login</h2>
</center>
<form method="post">
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
TRY THIS
<style>
form {
border: 6px solid #f1f1f1;
}
input[type=text]{
width: 100%;
padding: 8px 8px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
input[type=password] {
width: 100%;
padding: 8px 8px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 15px 35px 15px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
text-align: center;
vertical-align: middle;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 40px 12px 0;
}
.container {
padding: 20px;
margin-left: 25%;
margin-right: 25%;
span.psw {
float: right;
padding-top: 16px;
}
</style>
#nishant kumar A part from formatting I just want to ask for learning purpose that why you have given "width: 10%;" to "button"?
Suggestion: Instead of that you may consider to use "min-width: Xpx". where "x" will be any number as per your requirement.
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;
}