What I want to do is to cover circle element with square. But I can still see circle border.
When I inspect the element, the child element size doesn't include the parent's border (118px x 118px) so I tried to remove box-sizing: border-box;. Even though child element size is 120px x 120px, the same thing still happens.
How can I cover the circle properly?
.circle {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid red;
box-sizing: border-box;
background-color: white;
}
.square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
}
/* added by editor for betetr visualization purpose */
body {
background: gray;
}
<div class="circle">
<div class="square"></div>
</div>
The content itself starts within the border, not at the end of the border. As such you have to position the element out of the content area. Instead of using top, right, bottom, left you could simply use inset:
.circle {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid red;
box-sizing: border-box;
background-color: white;
}
.square {
position: absolute;
inset: -1px;
background-color: white;
}
/* added by editor for betetr visualization purpose */
body {
background: gray;
}
<div class="circle">
<div class="square"></div>
</div>
You can cover the circle properly by adding a border also to the square. and moving it a bit.
.circle {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid red;
box-sizing: border-box;
background-color: white;
}
.square {
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid white;
}
/* added by editor for betetr visualization purpose */
body {
background: gray;
}
<div class="circle">
<div class="square"></div>
</div>
Related
I would like to have a 5px margin around each of my divs but when I add it in CSS, there is a 5px margin on every side except for in between the divs and on the bottom. The two divs also overflow off the page on the bottom. I understand this is because of the 5px margin on top pushing the divs off screen. I am unsure how to make it just add the margin all around and shrink the divs accordingly.
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: 10%;
height: 100%;
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: 90%;
height: 100%;
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
Resulting Page
Divs pushed off screen on bottom and no margin in-between divs. 5px margin on top, left, and right is present.
I am new to HTML and CSS so any helps greatly appreciated.
Use CSS Flex
/*QuickReset*/ * { box-sizing: border-box; margin: 0; }
html {
height: 100%;
}
body {
background: black;
height: 100%;
position: relative;
display: flex; /* Use flex! */
padding: 5px; /* Instead of children margin */
/* gap: 5px; /* Uncomment to add a gap between your child elements! */
}
.one,
.two {
border: 3px solid green;
border-radius: 5px;
}
.one { width: 10%; background: red; }
.two { width: 90%; background: blue; }
<div class="one">
</div>
<div class="two">
</div>
box-sizing: border-box does not include handling/including of margins in the overall width or height of the elements, only padding and borders. Therefore you have to subtract the margin values from the width or height values.
In your case you should use calc values on all height and width settings where there's a margin. I.e. if you have 5px margin (= on all sides), use for example calc(100% - 10px) where you want 100% width or height. Similar with other percentage values - see your adapted code below:
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: calc(10% - 10px);
height: calc(100% - 10px);
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: calc(90% - 10px);
height: calc(10% - 10px);
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
using the css calc function on the width of .two to subtract 10px (2x5px margins) from the 90% width, appears to give a reasonable margin.
width: calc(90% - 10px);
I am not sure why there is not a visible 10px (2x5px) margin between .one and .two though.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: 10%;
height: 100%;
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: calc(90% - 10px);
height: 100%;
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
I need to use inset Box-Shadow to simulate border, because I need to control how horizontal/vertical borders overlap if they have different colors.
Here I have a Top border only. However, Scale() and certain offsets causes a right/left borders to appear.
This happens on Chrome, but not IE or Edge.
Screenshot
I understand this is related to sub-pixels. Is there a mitigation?
Again, CSS border is not an option for me.
.element {
position: absolute;
left: 22px;
top: 20px;
width: 100px;
height: 100px;
background: yellow;
box-shadow: inset 0 1px 0 0 red;
padding: 5px;
box-sizing: border-box;
}
.container {
background: white;
transform: scale(1.2);
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="element">ABCD</div>
</div>
</body>
</html>
Thanks!
If you can't use a border on your .element, then why not create a pseudo-element to apply the border to? A transform: scale() would not change anything about how it looks.
*,
*::before {
box-sizing: border-box;
}
.container {
background: white;
transform: scale(1.2);
width: 200px;
height: 200px;
}
.element {
position: absolute;
left: 22px;
top: 20px;
width: 100px;
height: 100px;
background: yellow;
padding: 5px;
}
.element::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid red;
}
<div class="container">
<div class="element">ABCD</div>
</div>
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
div {
margin: 50px;
position: relative;
background-color: red;
width: 200px;
height: 50px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
background-color: green;
width: 100px;
height: 100px;
border-radius: 100%;
top: -25px;
left:50px;
border: 2px solid black;
}
div.overflow-hidden {
overflow: hidden;
}
<div>1st</div>
<div class="overflow-hidden">2nd</div>
1st case: as expected.
2nd case[overflow-hidden]: Middle part of top and bottom border should be green. Looks like circle is not above its parent div's border. Is there any way to make it above it? Whats happening here? Will the z-index work?
Why is this happening?
This is because overflow: hidden; clips the content to the content box.
hidden
Content is clipped if necessary to fit the content box. No scrollbars
are provided.
MDN Web docs - https://developer.mozilla.org/en/docs/Web/CSS/overflow
This can be seen in the first example below as I have changed the border to be transparent.
What can you do?
One way to get around this would be to apply the border using an absolutely positioned pseudo element instead of to the containing div.
div {
background-color: red;
height: 50px;
margin: 50px;
overflow: hidden;
position: relative;
width: 200px;
}
div::after {
background-color: green;
border: 2px solid black;
border-radius: 100%;
content: '';
height: 100px;
left: 50px;
position: absolute;
top: -25px;
width: 100px;
}
div.overflow-with-border {
border: 2px solid transparent;
}
div.overflow-with-pseudo {
padding: 2px;
}
div.overflow-with-pseudo::before {
border: 2px solid black;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>
I have this code:
<div style="position:absolute;left:0px;top:0px;width:17px;height:395px;background-color:white;border:1px solid black;">
<div style="position:inherit;;width:inherit;height:inherit;overflow:scroll;"></div>
<button style="position:absolute;left:0px;top:139px;width:17px;height:73px;background-color:white;border:1px solid black;"></button>
</div>
If you look at the generated HTML, you will see that there is a white square that is not filled by the scrollbar on the bottom. How does this happen? When I inspect the element, the overflow:scroll div does not have 395px, but 378px. When I correct it to 395px the scrollbar will fill the parent div visually, but there will be an overflow.
What is happening here?
This is simply the space for the horizontal scrollbar. You can make it visible by increasing your elements width:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
You can avoid that space by using overflow-y instead of the more general overflow:
.bar {
position: absolute;
left: 0px;
top: 0px;
width: 17px;
height: 395px;
background-color: white;
border: 1px solid black;
}
.inner {
position: inherit;
width: inherit;
height: inherit;
overflow-y: scroll;
}
button {
position: absolute;
left: 0px;
top: 139px;
width: 17px;
height: 73px;
background-color: white;
border: 1px solid black;
}
<div class="bar">
<div class="inner"></div>
<button></button>
</div>
In general it's a good idea to seperate styles from markup. It's easier to avoid problems if not using inline styles.