I'm trying to make a JavaScript piano, with the keys being at the bottom of the screen, but setting bottom: 0px; doesn't work
html {
height: 100%;
width: 100%;
position: relative;
}
/*keyboard div*/
#keyboard {
position: relative;
display: table;
width: 1366px;
height: 90px;
bottom: 0px;
}
/*keys, if those are important*/
#wk,
#bk {
display: table-cell;
border-color: #000000;
border-width: 1px;
border-style: solid;
}
#wk {
position: relative;
height: 90px;
width: 1.92%;
background-color: #ffffff;
}
#bk {
z-index: 1;
position: absolute;
height: 52px;
width: 58.05%;
right: -9.04px;
background-color: #000000;
}
<html>
<div id="keyboard">
<div id='wk'>
<div id='bk'></div>
</div>
<div id='wk' class=''>
</div>
</div>
Replace your styles as given below:
#keyboard {
height: 90px;
position: fixed;
bottom: 0;
width: 100%;
background-color:#0000FF;
}
/*keys, if those are important*/
#wk, #bk {
border-color:#000000;
border-width: 1px;
border-style: solid;
}
#wk {
height:90px;
width: 1.92%;
background-color: #ffffff;
}
#bk {
height:52px;
width: 58.05%;
right: -9.04px;
background-color: #000000;
}
Dont set bottom since that will move it from down to up rather set:
top: 50%;
but since your width and height are odd use 41% to place it nicely
also its a nice practice to use em/rem or simply % and not px
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I wanted to experiment with ::after, so I made three figures (square, circle and triangle) then put their respective after, and works fine with the circle and square however with the triangle makes a gap and I don't understand why, I tried changing the positions and displays attributes but it didn't work
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 28.5%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
You can remove the gap by setting the height to 0px
note: I also set left: 48% just to make the triangulo word in the center
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
height: 0px; /* << here */
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 48%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
The div should grow up left, however, it does the opposite as of now.
The margin-left and top is necessary by the way.
Quick gif showcasing the issue: https://gyazo.com/ce51c504698395c26cffefb9b74e7e3e
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
}
#img-wrapper {
margin-left: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
Try this:-
#a {
width: 70%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 40%;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid red;
}
If you want your image going from right to left by increasing width property, you should give it float property:
#img-wrapper {
float: right;
margin-top: 0; // if you want it to start from top right edge
}
added margin-right: 10%; float: right;
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
float: right;
}
html,
body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 52%;
position: absolute;
border: 1px solid red;
right: 0;
bottom: 50%;
transform: translateY(50%);
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
Sounds like the problem isn't about getting the image to "grow up left" but is about positioning the #img-wrapper.
You can solve this by positioning the #img-wrapper absolutely and specifying its bottom and right position. I've added a :hover style so you can see it 'grow' on hover.
A word of warning though. Positioning something of unknown/variable size using percentages is going to give you very mixed results at different viewport sizes. Perhaps what you want isn't quite as described but I think you should be looking at a more flexible solution such as using flexbox.
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position:relative;
}
#img-wrapper {
right: 30%;
bottom: 30%;
width: 50%;
position: absolute;
border: 1px solid red;
}
#img-wrapper:hover {
width: 70%;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 50%;
border: 1px solid red;
margin: 20% 0 0 20%;
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
}
img {
width: 100%;
}
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
I made a link/button named Friends and when I re-size my window it goes out of the box I made for it. I have tried adding margins and padding but that didn't help me. Every thing I do still makes it go out of the box.
body {
background-color: black;
}
.Forum-Block {
position: absolute;
border-radius: 5%;
left: 10%;
top: 0%;
width: 70%;
height: 140%;
margin: 5%;
background-color: #888888;
border-style: solid;
border-width: medium;
border-color: orange;
}
.Top-Bar {
position: absolute;
top: 8%;
left: 5%;
width: 90%;
height: 6%;
background-color: black;
}
.welcome-msg {
position: absolute;
top: 30%;
left: 2%;
}
.friends-box {
position: relative;
top: 0%;
left: 90%;
width: 10%;
height: 100%;
color: white;
background-color: black;
}
.friends-box:hover {
position: absolute;
top: 0%;
left: 90%;
width: 10%;
height: 100%;
background-color: #262626;
}
try this
.friends-box {
position: relative;
top: 0%;
right:2%;
width: 15%;
height: 100%;
color: white;
font-size:100%;
background-color: black;
}
.friends-box:hover {
background-color: #262626;
}
You should work to a grid as well - make the .welcome-msg{width:75%;left:0;} and the .friend-box{width:25%;right:0}
Wrap the text with tags, Welcome in H1, h2, or h4, and the friends in a p tag maybe and add padding to that instead.
Hope this helps.
I just added floats and removed the position:absolute and position:relative... I also set the height of the Top-Bar to auto so that it takes the height of the content inside. I changed the background colors so you can see what is happening. Hope this helps!
<style type="text/css">
body {
background-color: black;
}
.Forum-Block {
position: absolute;
border-radius: 5%;
left: 10%;
top: 0%;
width: 70%;
height: 140%;
margin: 5%;
background-color: #888888;
border-style: solid;
border-width: medium;
border-color: orange;
}
.Top-Bar {
position: absolute;
top: 8%;
left: 5%;
width: 90%;
height:auto;
background-color: black;
}
.welcome-msg {
float:left;
color: #FFFFFF;
padding:10px;
background: red;
}
.friends-box {
float:right;
color: white;
background-color: green;
padding:10px;
}
.friends-box:hover {
background-color: #262626;
}
</style>
<div class="Forum-Block">
<div class="Top-Bar">
<div class="welcome-msg">Hello, Admin</div>
<div class="friends-box">Friends</div>
</div>
</div>
Basically I need to make a circle look like it's hanging from a string. I used the basic CSS of:
#string {
position: relative;
}
#circle {
position: absolute;
bottom: 0;
}
And it's putting the circle at the bottom, but not below the "string" It's sitting on the right side of it, but at the bottom. Am I stupid? What am I doing wrong?
EDIT: Full code
<div class="anchor" id="one">
<div class="circle" id="one">
</div>
</div>
html, body { height: 100%; width: 100%; }
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #DDD;
margin: 0;
padding: 0;
color: #000;
}
.anchor {
background-color: #000;
position: relative;
width: 10px;
}
.anchor#one {
margin-left: 10%;
height: 500px;
}
.circle {
position: absolute;
bottom: 0;
border-radius: 50%;
background-color: #000;
}
.circle#one {
width: 200px;
height: 200px;
}
bottom sets the distance of the element's bottom border to its offset parent.
To do what you want, you need to use top:
#circle {
position: absolute;
top: 100%;
}
<div class="anchor" >
<div class="circle" >
</div>
</div>
css
.anchor {
background-color: #000;
position: relative;
width: 10px;
margin-left: 10%;
height: 500px;
}
.circle {
position: absolute;
bottom: -200px;
border-radius: 50%;
background-color: #000;
width: 200px;
height: 200px;
left: -100px;
}