I have two elements with the same dimensions one (gray) on top of the other (yellow), but I keep getting some pixels of the bottom element showing
body{
background:#31313a
}
.bottom{
position:relative;
border-radius: 50%;
width: 90px;
height: 90px;
border: solid 8px #ff9800;
}
.top{
position: absolute;
width: 90px;
height: 90px;
border: solid 8px #3e4148;
border-radius: 50%;
top: -8px;
left: -8px;
}
<div class='bottom'>
<div class='top'>
</div>
</div>
Can you help me make the bottom element (yellow) completely under the top element (gray)?
ps: I'm using Firefox for Ubuntu 99.0 (64-bit) and Here Is a screenshot of what I'm getting :
It just needs a bit of adjustment, use 10px for the border and -9px for the positioning.
body {
background: #31313a
}
.bottom {
position: relative;
border-radius: 50%;
width: 90px;
height: 90px;
border: solid 8px #ff9800;
}
.top {
position: absolute;
border: solid 10px #3e4148;
border-radius: 50%;
top: -9px;
bottom: -9px;
left: -9px;
right: -9px;
}
<div class='bottom'>
<div class='top'>
</div>
</div>
Related
Please see my codes below:
.spl-user-chatbox {
position: absolute;
width: 220px;
height: 220px;
background-color: #2196f3;
top: 50%;
overflow: hidden;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 100%;
height: 100%;
z-index: 1;
/* overflow: hidden; */
border-radius: inherit;
box-shadow: 0 2px 12px -4px rgb(0 0 0 / 20%);
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
Hi, guys just asking how can I remove the color blue on the bottom
part. I'm so confused why still the color showing even I've added a
white background in the first place. Can anyone help me with this?
Thanks
You can try with background-color:transparent
I think you can set the width and hight to bigger values
.spl-user-chatbox {
width: 300px;
height: 300px;
position: absolute;
background-color: #2196f3;
top: 50%;
overflow: hidden;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 200%;
z-index: 1;
/* overflow: hidden; */
border-radius: inherit;
box-shadow: 0 2px 12px -4px rgb(0 0 0 / 20%);
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
If you're not going to see the border-radius at the bottom two corners, just remove those two and only add a border-radius to the top two corners.
Add border-radius: 10px 10px 0px 0px; to the .spl-user-chatbox
.spl-user-chatbox {
position: absolute;
width: 220px;
height: 220px;
background-color: #2196f3;
top: 50%;
overflow: hidden;
left: 50%;
border-radius: 10px 10px 0px 0px; /* only add border-radius to the top two corners */
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 100%;
height: 100%;
z-index: 1;
/* overflow: hidden; */
border-radius: inherit;
box-shadow: 0 2px 12px -4px rgb(0 0 0 / 20%);
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
you can do that :
.spl-user-chatbox {
position: absolute;
width: 220px;
height: 220px;
background-color: #2196f3;
top: 50%;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: -1px;
border-radius: 15px;
width: calc(100% + 2px);
min-height: calc(100% + 2px);
z-index: 1;
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
This seems to only occur when the user zooms the page in the browser. I don't think you can avoid this without adding a white 1px border to the white element, it seems to be a browser quirk. As long as there is no zooming going on, nobody will notice.
I have made a little pop up when I hover over a square but I want to go to this popup even with an existing margin.
Here is a snippet with my HTML and CSS code:
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 120%;
margin-left: -5px;
border-radius: 5px;
border: solid black 1px;
color: white;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
Here is an example (if you don't follow the arrow the popup will close):
https://jsfiddle.net/bpez64fr/
I want to ignore the margin and allow the user to go to the popup and make it work as if there was no margin
My strategy would be to put the element to be shown on hover at left:100% so that there's no gap for the cursor to "fall in". You can then use padding on this element to create the visual whitespace between the main element and the hover element, and put the element's content in an inner element .info-inner in my example. Note that .info-inner must be position:relative for the positioning of the .arrow to work.
Let me know if this works for you.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 100%;
padding-left: 10px;
}
.info-inner {
border-radius: 5px;
border: solid black 1px;
color: white;
position: relative;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="info-inner">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
</div>
There are several ways to do this but here is one example.
It simple positions the element next to the previous one without a gap.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: 3px solid lightgrey;
position: relative;
}
.infoWrap {
opacity: 0;
position: absolute;
top: -3px;
left: 100%;
padding: 0 10px;
transition: all ease-in-out 0.2s;
}
.info {
position: relative;
background: #eee;
border: solid #aaa 1px;
border-radius: 5px;
color: #666;
width: 100%;
min-height: 53px;
padding: 10px;
}
.vertical:hover .infoWrap {
opacity: 1;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #aaa transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="infoWrap">
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="arrow"></div>
</div>
</div>
</div>
You can use the css transitions property to delay the invisibility of the element.
Example:
.info{ transition: visibility 2s ease-out;}
Updated jsFiddle
In this latter example, I increased the distance to the pop-up to improve the demo:
UPDATED Updated jsFiddle
CSS transitions allow you to delay the advent/removal of a css modification to the DOM, giving the user time to slide the mouse from the box to the pop-up.
References:
https://css-tricks.com/almanac/properties/t/transition-delay/
https://www.w3schools.com/cssref/css3_pr_transition-delay.asp
This question already has answers here:
Curve bottom side of the div to the inside with CSS
(2 answers)
Closed 4 years ago.
I have added 2 pictures here. You can see that first curve is down curve and second one is up curve.
Now, I have a rectangle box using CSS. I want to make the top and bottom border should be like the picture.
I can use CSS border-radius property to make a border curve. But I don't understand how can I make this type of border curve using CSS3?
Updated:
Here is the full output I desire:
I used before after to achieve this
div{
width: 400px;
height: 200px;
background-color: #333;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
div:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div></div>
Update
after OP's recent comment, here you can add content in content-main div
.content{
background-color: #333;
width: 400px;
}
.content-top, .content-bottom{
width: 400px;
height: 100px;
background-color: #333;
position: relative;
overflow: hidden;
}
.content-top:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.content-bottom:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.content-main{
padding: 10px;
}
<div class="content">
<div class="content-top"></div>
<div class="content-main">
<h1>Cat</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">
</div>
<div class="content-bottom"></div>
</div>
You can achieve this using two Divs one with black background and the children with white background and rounded borders. The wrapper should have a padding to simulate border thickness:
#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}
<div id="wrapper">
<div id="roundCurve"></div>
</div>
Here is an example you can follow:
body {
background: black;
}
.roundCorner {
width: 150px;
height: 100px;
padding: 2em;
border-bottom: 0;
position: relative;
background: white;
border-radius: 1em 1em 0 0;
}
.roundCorner:before {
position: absolute;
left: -1px;
right: -1px;
top: 0;
height: 1.5em;
border: 1px solid black;
border-top: 0;
border-radius: 0 0 3em 3em;
content:'';
background: black;
}
.roundCorner:after {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 1.5em;
border: 1px solid black;
border-bottom: 0;
border-radius: 3em 3em 0 0;
content: '';
background: black;
}
<div class="roundCorner"></div>
You can change background of body, .roundCorner, .roundCorner:before, .roundCorner:after to see how it's working.
I want to achieve something like this:
However im confuse how to create the triangle shaped but in dynamic size as the right side area is a paragraph that could have alot or small content.
I just can't get the structure worked out at the moment
So if you want a triangle shape there, then you can definitely use CSS to make a triangle for that section. Here's a quick demo that float's two div's and uses a CSS triangle.
Triangle CSS:
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 10px solid #fff;
All together:
* {
box-sizing: border-box;
}
body {
background: #ccc;
margin: 0;
padding: 0;
}
p {
margin: 0;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.wrap {
margin: 50px auto;
width: 500px;
}
.inner {
position: relative;
height: 100px;
width: 100%;
}
.left {
float: left;
background: #fff;
height: 100px;
position: relative;
width: 30%;
}
.right {
float: left;
background: #4c4c4c;
height: 100px;
padding: 0 40px;
width: 70%;
}
.border {
border: 1px solid yellow;
border-style: dashed;
position: absolute;
top: 0;
left: 0;
width: 96%;
height: 80px;
top: 50%;
transform: translateY(-50%);
right: 0;
margin: 0 auto;
}
.arrow-left {
width: 0px;
height: 0px;
position: absolute;
top: 0;
right: -10px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 10px solid #fff;
}
<div class='wrap'>
<div class='inner'>
<div class='left'>
<p>Lorem Ipsum <br>Lorem ipsum dolor</p>
<div class='arrow-left'></div>
</div>
<div class='right'><p>Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p></div>
<div class='border'></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/8ogzcLhy/2/
Note: this layout uses floats which can ditched to use flex-box which has all kinds of great features to utilize to make cleaner layouts.
I am trying to let the width of a div to be expanded according to its content horizontally
the content is a floating divs , I want them to appear as one row
I used white-space: nowrap; but it is not working on IE and FF ( It works very fine on google chrome )
here is my HTML code :
<div class="floating_menu_container">
<div class="floating_menu">
<div class="floating_menu_item account">
<div class="sub_floating_menu">
<div class="sub_floating_menu_item"></div>
<div class="sub_floating_menu_item"></div>
</div>
</div>
</div>
</div>
and this is the CSS code :
.floating_menu_container{
position: absolute;
top: 25px;
left: 5px;
height: 50px;
z-index: 5;
}
.floating_menu_container .floating_menu{
height: 0px;
width: 40px;
background: #4D75A6;
z-index: -1;
position: absolute;
top: 35px;
left: 7px;
}
.floating_menu_container .floating_menu .floating_menu_item{
width: 30px;
height: 30px;
background: #94acc9;
border: 1px solid #6991c2;
margin: 7px 0px 4px 4px;
cursor: pointer;
position: relative;
}
.floating_menu_container .floating_menu .floating_menu_item .sub_floating_menu{
height: 30px;
position: absolute;
top: 0px;
background: #4D75A6;
left: 42px;
border: 1px solid #003980;
z-index: 10;
cursor: default;
white-space: nowrap;
}
.floating_menu_container .floating_menu .floating_menu_item .sub_floating_menu .sub_floating_menu_item{
width: 20px;
height: 20px;
background: #94acc9;
margin: 5px;
float: left;
cursor: pointer;
}
and here is the example on jsfiddle
I want to expand the div with class='sub_floating_menu' according to its content
Removing width: 20px; from your .sub_floating_menu_item, height: 30px; from .sub_floating_menu, and replacing float: left; with display: inline-block; should fix the issue, little demo: little link.