I have a Canvas and want to add a Div/Button in the bottom right-hand corner relative to Canvas. My current code looks as follows:
#container {
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer {
width: 40%;
background-color: red;
height: 100%;
}
#button {
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas {
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
But so far I couldn't manage to find a proper solution for this. It would be great if someone could help me with this.
Is this what you are looking for?
I recommand you checking out this article: CSS Layout - The position Property
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position:relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
I think Temani was right — this puts the button at the bottom right of the canvas, is this not what you wanted?
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position: relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
Like Temani Afif said.
position:relative
on #viewer worked for me.
Related
I want to make half border of a circle which fades out at the end, like this:
I managed to create a border that fades out to the bottom like this:
#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
However, this circle does not fade out at 50% but on the bottom. Also the border does not become thinner. How can I achieve this?
I managed to make it using positions. I assume this would give a better understanding on how to make these kind of shapes.
#cont {
background: -webkit-linear-gradient(green -50%, #fff);
width: 300px;
height: 300px;
border-radius: 100%;
padding: 10px;
position: relative;
top: 0;
left: 0;
}
#box {
background: #fff;
width: 320px;
height: 320px;
border-radius: 100%;
position: absolute;
top: 2%;
left: 0.1%;
}
<div id="cont">
<div id="box"></div>
<div id="box2"></div>
</div>
You can use :after as below.
/*#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}*/
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
position: relative;
}
#box:after{
content: '';
display: block;
width: 100%;
height: 100%;
background: white;
border-radius: 1000px;
display: block;
top: 5px;
position: absolute;
}
<div id="cont">
<div id="box"></div>
</div>
I've tried the method showed here, but it aint worked out:
StackOverflow: Display div border on top of another div [duplicate] (my own postage)
I have 2 nested divs, and the above method isn't working for both divs.
Here is the code:
html:
<div className="App">
<div class="box mainClass1" id="1">
<div class="helperClass" />
</div>
<div class="box mainClass2" id="2">
<div class="helperClass" />
</div>
</div>
css:
.box {
width: 100px;
height: 100px;
position: absolute;
}
.mainClass1 {
top: 100px;
left: 100px;
background: teal;
}
.mainClass2 {
top: 150px;
left: 150px;
background: red;
}
.helperClass2 .helperClass {
width: 100%;
height: 100%;
border: 3px solid #4286f4;
box-sizing: border-box;
}
note: helperClass2 should be added to the list of classes of parent (outer) div.
.container {
position: relative;
}
.box1 {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
box-sizing: border-box;
background: blue;
}
.box1:after {
content: '';
display: block;
width: 95px;
height: 95px;
position: absolute;
border: 3px solid black;
z-index: 3;
}
.box2 {
width: 100px;
height: 100px;
position: absolute;
top: 150px;
left: 150px;
box-sizing: border-box;
background: red;
border: 3px solid black;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.
I have three elements stacked into each other. Now I want the innermost element to be placed behind its parent but still in front of its grandparent. I tried different variations on z-index settings, but had no succcess.
The code that shoul work as my understanding of z-index is:
<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;">
<div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;">
<div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div>
</div>
</div>
Except that it does not.
Any solution?
If you remove the position relative from the second div it will work
CSS
.div1{
width: 400px;
height: 400px;
background-color: purple;
position: relative;
z-index: 1;
}
.div2{
width: 200px;
height: 200px;
background-color: blue;
z-index: 1;
}
.div3{
width: 100px;
height: 100px;
background-color: green;
position: relative;
z-index: -1;
left:150px;
}
HTML
<div class='div1'>
<div class='div2'>
<div class='div3'></div>
</div>
</div>
example: http://jsfiddle.net/MFULL/90/
If you mean like:
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
Then you can use the following method:
Demo: http://jsfiddle.net/ZmvKX/
#a {
width: 300px; height: 300px; border: 1px solid black; background-color: #000;
z-index: -1; position: absolute;
}
#b {
width: 200px; height: 200px; border: 1px solid black; padding: 10px 10px; top: 100px; left: 100px; background-color: #ff0;
position: relative;
}
#c {
width: 100px; height: 100px; border: 1px solid black; padding: 10px 10px; top: -50px; left: -50px; background-color: #fff;
position: absolute; z-index: -2;
}
The trick is to get the stacking contexts right.
As long as elements are part of the page flow, a parent can't be in front of it's children.
You would have to use absolute positioning to take the elements out of the page flow, to make it possible to stack them that way.