I'm trying to draw a piano with CSS and JavaScript. Here is my code :
.container {
border: 3px solid black;
background-color: black;
border-radius: 10px;
margin: 60px auto;
width: 100% !important;
}
.mix {
height: 60px;
background-color: rgb(29, 29, 29);
}
.tile {
z-index: 1;
border: 1px solid black;
background-color: white;
width: 45px;
height: 240px;
}
.tile:active {
background-color: rgba(255, 255, 255, 0.8);
}
.black-key {
z-index: 2;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 25px;
height: 160px;
background-color: black;
transform: translateX(-50%);
}
.black-key:active {
background-color: rgb(39, 39, 39);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Piano App</title>
</head>
<body>
<div class="container">
<div class="mix"></div>
<div class="flex justify-center">
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
</div>
</div>
</body>
</html>
My question is :
When I click on a black key, I want it to change color (see CSS), but the problem is it focuses the with key too. So, the white key change color too.
I want only the black key to change color when I click on it.
Any idea where is my mistake ?
If it's too much work to separate .black-key from .tile (IDK never used Tailwind), you can change the .black-keys into <a> so they actually are focusable and then use :focus-within on .tiles. :focus-within is the only CSS property to affect a parent tag via it's child. Basically, if a child of a tag with :focus-within triggers a "focus" event then it's styles can change. Unfortunately, the only tags that all browsers consider focusable are <input>, <textarea>, <select>, and <a>.
This may look semantically off but it's a piano not a form, or article (I'm talking to the semantics cops out there).
HTML
Change:
<div class='black-key'></div>
To:
<a href='#' class='black-key'></a>
CSS
Add:
.tile:focus-within {
background-color: rgba(255, 255, 255, 1);
}
.black-key {
display: block;
/*...*/
When .black-key gains focus, .tile will just keep it's opacity/alpha (in retrospect opacity: 1 should work as well).
JS
Add to index.js or a <script> tag located before the closing </body> tag (the bottom of <body> not under <body>):
document.querySelectorAll('.black-key').forEach(a => a.onclick = e => e.preventDefault());
That keeps any .black-keys from jumping when clicked -- it shouldn't affect anything else. Here's some corrections to CSS:
Removed z-index since it will only work for non-static tags:
position:
relative;,
absolute;,
fixed;, or
sticky;
Removed !important. Unless you know exactly what you are doing not only in the present but also in the future always avoid using !important. Changed width: 100% !important to min-width: 100%.
document.querySelectorAll('.black-key').forEach(a => a.onclick = e => e.preventDefault());
.container {
border: 3px solid black;
background-color: black;
border-radius: 10px;
margin: 60px auto;
min-width: 100%;
}
.mix {
height: 60px;
background-color: rgb(29, 29, 29);
}
.tile {
border: 1px solid black;
background-color: white;
width: 45px;
height: 240px;
}
.tile:active {
background-color: rgba(255, 255, 255, 0.8);
}
.tile:focus-within {
background-color: rgba(255, 255, 255, 1);
}
.black-key {
display: block;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 25px;
height: 160px;
background-color: black;
transform: translateX(-50%);
}
.black-key:active {
background-color: rgb(39, 39, 39);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Piano App</title>
</head>
<body>
<div class="container">
<div class="mix"></div>
<div class="flex justify-center">
<div class="tile"></div>
<div class="tile">
</div>
<div class="tile"></div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile"></div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile"></div>
<div class="tile">
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./index.js"></script>
</body>
</html>
Related
I am creating a small quiz app. And After answering question in quiz I am showing the progress bar.
But I have styled the progress bar using two div elements, One div parent element and another is child. But when I am applying css on parent div(id = "progressBar") it is working well but child div's (id= "progressBarFull")css is not working.
Please tell me why?
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 90%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235,0.25);
background-color: white;
}
.choice-prefix{
background-color: #56a5eb;
padding: 1.5rem 2.5rem;
color: white;
}
.choice-text{
padding: 1.5rem;
width: 100%;
}
.choice-container:hover{
cursor:pointer;
box-shadow: 0.4rem 0.6rem rgba(86, 185, 235, 0.5);
transform: translate(-0.1rem);
transition: transform 150ms;
}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* HUD DISPLAY */
#hud{
display: flex;
justify-content: space-between;
}
.hud-prefix{
text-align: center;
font-size: 2rem;
}
.hud-main-text{
text-align: center;
}
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
};
#progressBarFull{
height: 2.5rem;
background-color: #56a5eb;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div class="hud-item">
<p id= "progressText"class="hud-prefix">
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div class="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
</h1>
</div>
</div>
<h2 id="question">What is the answer to this question?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
Click here for the output
you need to take the semicolons out after the closing braces:
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
} /* no semicolon here */
#progressBarFull{
height: 2.5rem;
background-color: #56a5eb;
} /* no semicolon here */
For reference check out MDN article on css syntax. Basically, an unnecessary semicolon after the the terminating curly brace will hamper user agent's parsing of css and the css code following that won't be parsed.
You have a badly placed semicolon after progress Bar. And I would recommend setting height as a percentage.
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 90%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235,0.25);
background-color: white;
}
.choice-prefix{
background-color: #56a5eb;
padding: 1.5rem 2.5rem;
color: white;
}
.choice-text{
padding: 1.5rem;
width: 100%;
}
.choice-container:hover{
cursor:pointer;
box-shadow: 0.4rem 0.6rem rgba(86, 185, 235, 0.5);
transform: translate(-0.1rem);
transition: transform 150ms;
}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* HUD DISPLAY */
#hud{
display: flex;
justify-content: space-between;
}
.hud-prefix{
text-align: center;
font-size: 2rem;
}
.hud-main-text{
text-align: center;
}
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
}
#progressBarFull{
height: 100%;
background-color: #56a5eb;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div class="hud-item">
<p id= "progressText"class="hud-prefix">
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div class="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
</h1>
</div>
</div>
<h2 id="question">What is the answer to this question?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
I've divided screen to 2 parts and want to have same height for both the divs.
What I want is left side div should have same height and should occupy the height same as right part.
When I see this screen in mobile format it is not showing proper.
I tried using height 100% but not working. What am I missing over here?
This is what I've tried.
Link to codepen
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
color:white;
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid" style="height:100%; background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>
I found this (I cheat a little by given a fix size to the div: myDiv, who has the background-image because I think that background-image doesn't have size):
.myDiv{
height: 680px; /*manual check to get image height*/
}
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid myDiv" style="background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>
Is it possible to add a red border around a flex box when the cursor hovers over the flex box?
If so, please could you modify the code. Thank you.
If there is a border animation or something that will look good please post your ideas.
.container {
width: 80%;
margin: 0 auto;
font-size: 14;
text-align: center;
}
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: cornflowerblue;
}
.navy {
background-color: navy;
}
.gray {
background-color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Flexbox</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="grid-item navy">
<h2 style="color:white">
Box 1
</h2>
</div>
<div class="grid-item gray">
<h2 style="color:white">
Box 2
</h2>
</div>
<div class="grid-item green">
<h2 style="color:white">
Box 3
</h2>
</div>
<div class="grid-item blue">
<h2 style="color:white">
Box 4
</h2>
</div>
</div>
</body>
yes it is, you can add hover selector to the corresponding div into your css so it looks like:
.container {
width: 80%;
margin: 0 auto;
font-size: 14;
text-align: center;
}
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: cornflowerblue;
}
.navy {
background-color: navy;
}
.gray {
background-color: gray;
}
.grid-item:hover {
border: 5px solid red;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Flexbox</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="grid-item navy">
<h2 style="color:white">
Box 1
</h2>
</div>
<div class="grid-item gray">
<h2 style="color:white">
Box 2
</h2>
</div>
<div class="grid-item green">
<h2 style="color:white">
Box 3
</h2>
</div>
<div class="grid-item blue">
<h2 style="color:white">
Box 4
</h2>
</div>
</div>
</body>
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
border: 5px solid transparent;
transition:1s;
}
.grid-item:hover{border: 5px solid red;
transition:1s;}
Try this
My problem is simple, my Bootstrap cols are not lining up in the middle of the div.
Have a look at my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
</head>
<body>
<div id="boxes">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>
</html>
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
I've put col-lg on 6, which should be 50% of the div per box. But the boxes are clearly not in the center of their cols. Any help with this would be appreciated. Thanks.
If you change your margin in your box2 like this, is it what you're looking for ?
#box2 {
margin: 50px auto 0 auto;
}
if your are working with bootstrap 4 wrap your code with .row fiddle
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="boxes" class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>