Develop Reference

CSS - how to in-line form/input but stack each line with the proper indent?

This is currently my layout, and I'm having a tough time aligning and properly centering these at the same time
Desired output:
Username: [Input]
Password: [Input]
But would also like username,password to be right indented and the input to line up with each other as well.
I know there's tutorials out there but can seem to have it work on my code specifically.Please see code below
#font-face {
font-family: 'Billabong';
font-style: normal;
font-weight: normal;
src: url('/instagram-clone/fonts/Billabong.woff') format('woff');
}
body {
display: block;
border: 1px solid black;
padding:0px;
margin:0px;
height: auto;
}
.titlecontainer {
border: 1px solid black;
padding:0px;
width:400px;
height:40px;
text-align: center;
border-radius: 4px;
color: white;
font-family: Billabong;
font-size: 16px;
line-height: 5px;
background: linear-gradient(176deg, rgba(43,104,140,1) 0%, rgba(28,97,138,1) 100%);
margin: 0 auto;
margin-top: 10%;
}
.inputcontainer {
border: 1px solid black;
width:400px;
height:200px;
margin: -2px auto;
border-radius: 4px;
}
.login {
border: 1px solid black;
}
<div class="titlecontainer">
<h2 id = "igtitle">Instagram</h2>
</div>
<div class="inputcontainer">
<div class="login">
<label for="password">Username:<label>
<input id = "pwinput" type = "text" name="password"/>
<label for="password">Password:<label>
<input id = "pwinput" type = "text" name="password"/>
</div>
</div>

.login label {
display: inline-block;
width: 75px;
}
<div class="login">
<div>
<label for="password">Username:</label>
<input id = "pwinput" type = "text" name="password"/>
</div>
<div>
<label for="password">Password:</label>
<input id = "pwinput" type = "text" name="password"/>
</div>
</div>

Why does an overlay not work in IE?

I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>

It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.

How do I get my content2 border to come inside of the content1 border radius and how I do put a vertical line between content2 elements?

I am wondering if any one could direct me to some online resources where I can find out how to put a vertical line inside of my content2 border which will then split the element names from the element values? Also, how do I get my content2 border from outside of border-radius content? I want it to come inside of the content border-radius. Right now it looks tacky being outside of the border-radius content. Any suggestions would be much appreciated. HTML code and CSS code.
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#para1 {
padding: 0px 1050px 0px 20px;
position: relative;
}
#para2 {
padding: 0px 1099px 0px 20px;
position: relative;
}
.username-label,
.password-label {
margin: 10px 0px 0px 350px;
position: relative;
top: -70px;
}
.existingUsername,
.existingPassword,
#username_error1,
#password_error2
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 425px;
position: relative;
top: -70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -500px;
position: relative;
top: -10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 330px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 40px;
}
span{
color: red;
margin-left: 300px;
position: relative;
top: -70px;
}
.content2{
display: none;
border-style: solid;
border-width: 1px;
top: -320px;
position: relative;
margin-left: 20px;
}
.accountName{
border: none;
}
.ElementOne{
font-weight: bold;
}
#Content2-Button1,
#Content2-Button2{
background-color: #add8e6;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.accountName,
.accountEmail,
.accountGpa{
margin-left: 200px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text"/>
<br><span id="New_Username_error"></span><br>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password"/>
<br><span id="New_Password_error"></span><br>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email"/>
<br><span id="New_Email_error"></span><br>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email"/>
<span id="Repeat_Email_error"></span>
<button id="button2">Create Account</button>
</div>
</div>
<div class="content2">
<label class="ElementOne" for="accountName">AccountName</label>
<input class="accountName" type= "text"><br><br>
<label class="ElementTwo" for="accountEmail">EmailAddress</label>
<input class="accountEmail" type= "email"/> <button id="Content2-Button1">Update</button><br><br>
<label class="ElementThird" for="accountGpa">CurrentGPA</label>
<input class="accountGpa" type= "number"/> <button id="Content2-Button2">Update</button>
</div>
<br/>
</div>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
<script src="Home.js"></script>
</body>
</html>

To create a vertical line, you just need to create a class and add it in the html.
.vertical-separator {
border-left: 1px solid black;
margin: 0 5px;
}
And then in your html just add a div tag, in the place you want the separator. (For example between the <label> and <input> tag.
<div class="vertical-separator"></div>
Also, to make this work, you should do a better layout, for example, the <input>and <label>tags should be inside another div. And make the elements inside element display: inline-block.
If you don't want to do this, and stick with your layout, just add to .vertical-separator a fixed height and it will work. But I strongly recommend you to practice css layout, flexbox, and some other things to improve your code.

How to make a div into a checkbox

I recently started coding and I want to know the best way to make a box into a checkbox. So I want to make a website where the user can choose colors by checking the colored boxes to pick the ones they want. I have researched and can't find a good answer. All the boxes should be clickable, as the user can choose more than one color.
edit I'm sorry if I didn't make sense! What I'm trying to do is something like this: sv.tinypic.com/r/dcelb6/9. So the boxed are colored, and you can check them.
Here is my html:
<div>
<a href="#" class="color-box black-box" value="0">
<h3>Black</h3>
</a>
</div>
<div>
<a href="#" class="color-box grey-box" value="0">
<h3>Grey</h3>
</a>
</div>
<div>
<a href="#" class="color-box blue-box" value="0">
<h3>Blue</h3>
</a>
</div>
</div>
and here is the CSS:
.color-box {
width: 15.20833%;
min-width: 15.20833%;
height: 0;
padding-bottom: 15.20833%;
background-color: #fff;
margin-top: 0.72917%;
display: block;
float: left;
position: relative;
margin: 7px 0.72917%;
border: 1px solid transparent;
}
.color-box h3 {
color: #fff;
text-decoration: none;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}

where the user can choose colors by checking the colored boxes to pick
the ones they want.
snippet here
colors={'black-box':'black','grey-box':'grey','blue-box':'blue'}
var elements=document.getElementsByClassName('color-box')
function handler(el){
el[i].addEventListener('click',
function(e){
if(e.target.className.split(' ')[1] in colors){
document.getElementById('selector').style.background= colors[e.target.className.split(' ')[1]]
}
for(var i=0;i<elements.length;++i){
if(elements[i]!=e.target){elements[i].innerHTML=''}
}
e.target.innerHTML=='✓'?e.target.innerHTML='':e.target.innerHTML='✓';
},false)
}
for(var i=0;i<elements.length;++i){
handler(elements)
}
//document.getElementsByClassName('color-box').forEach(handler)
.color-box {
color:white;
font-size:20px;
width:30px;
height:30px;
background-color: #fff;
margin-top: 0.72917%;
display: block;
text-align:center;
position: relative;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
#selector{
width:200px;
height:200px;
border:solid;
}
<div class="color-box black-box" >
</div>
<div class="color-box grey-box">
</div>
<div class="color-box blue-box">
</div>
</div>
<div id='selector'>
</div>

This is a basic example of how to implement it without JS https://plnkr.co/edit/tvamZjENZSLWnrtthDHP?p=preview
<style>
.checkbox > input[type="checkbox"] { display: none; }
.checkbox > input[type="checkbox"]:checked + label:before {margin-right: 10px; content: "[X]";}
.checkbox > input[type="checkbox"] + label:before {margin-right: 10px; content: "[ ]";}
</style>
<div class="checkbox">
<input type="checkbox" id="test">
<label for="test">HELLO</label>
</div>
Note that i'm using > to indicate the immediate checkbox element descendant of .checkbox element, and the + selector for getting the next LABEL element sibling of that input

This is a pure CSS one, using "hidden" radioset with their label colored
JS Fiddle
.radios{
display:none;
}
.color-box {
width: 50px;
line-height: 50px;
margin-top: 0.72917%;
display: inline-block;
margin: 7px 0.72917%;
color: #fff;
text-align:center;
text-decoration: none;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
.radios:checked + label{
text-decoration:underline;
}
#rad1:checked ~ #result{
background-color:black;
}
#rad2:checked ~ #result{
background-color:#9E9E9E;
}
#rad3:checked ~ #result{
background-color:#205DB1;
}
#result{
width:200px;
height:200px;
border:2px orange solid;
}
<div>
<input type="radio" id="rad1" name="rad" class="radios">
<label for="rad1" class="color-box black-box">Black</label>
<input type="radio" id="rad2" name="rad" class="radios">
<label for="rad2" class="color-box grey-box">Grey</label>
<input type="radio" id="rad3" name="rad" class="radios">
<label for="rad3" class="color-box blue-box">Blue</label>
<hr>
<div id="result"></div>
</div>

Pressed button css

before I start, I found this topic : Pressed <button> CSS which give half of the answer I'm looking for.
I have a button in a link and I would like it to keep his style after it gets pressed. ALSO, I would like to see it back to his normal style (before it get pressed) when I click somewhere else on the page.
Here is my code :
jQuery('.btnpublish').click(function(){
jQuery(this).toggleClass('active');
});
.btnpublish{
background-color: #7f8c8d;
border: 1px solid #7f8c8d;
font-weight: bold;
}
.btnpublish:hover{
background-color: #3498db;
border: 1px solid #3498db;
}
.btnpublish:active{
background-color: #3498db;
border: 1px solid #3498db;
}
.btnpublish.active{
background-color: #3498db;
border: 1px solid #3498db;
}
<ul class="" role="tablist">
<li class="active listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li>
<li class="listlayer6publish"><a class="btn btn-dark " href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li>
</ul>
For now, when I press on the button "Sports", it keeps the active style before I press again on the button. The only problem is that i want to change it when I press anywhere else on the page.

It's much easier to use hidden radio inputs with labels. I added and modified the jQuery, although you don't need it for the effects. See this POST
$(function() {
$('.btn').on('click', function(event) {
$(this).addClass('active');
$('.btn').not(this).removeClass('active');
});
});
.tablist input[type="radio"] {
display: none;
}
.tablist label {
display: inline-block;
background-color: #ddd;
color: grey;
padding: 3px 6px;
font-family: Arial;
font-size: 16px;
border: 1px inset grey;
border-radius: 6px;
cursor: pointer;
}
.tablist input[type="radio"]:checked + label {
background-color: transparent;
color: blue;
border: 1px inset blue;
}
fieldset {
width: -moz-fit-content;
width: -webkit-fit-content;
width: -fit-content;
border-radius: 6px;
}
.btn {
text-decoration: none;
/* When you integrate this code, change none to auto */
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="tablist">
<input type="radio" id="r1" name="rad" data-toggle="tab" checked>
<label for="r1" class="tag">
Sports
</label>
<input type="radio" id="r2" name="rad" data-toggle="tab">
<label for="r2" class="tag">
Sante
</label>
<input type="radio" id="r3" name="rad">
<label for="r3" class="tag">
Claus
</label>
</fieldset>

Try that:
jQuery(document).click(function () {
jQuery(".listlayer6publish").each(function () {
if (jQuery(this).hasClass("active"))
jQuery(this).removeClass("active");
});

You can use the below css to achieve the required functionality
.btnpublish:focus {
background-color: #3498db;
border: 1px solid #3498db;
}