This is my website: https://zarmdev.github.io/To-doz/index.html
When I hover over the +, it doesn't overlap the panes (the squares with text).
I gave it and it's parent a z-index of 10 and the panes a z-index of 0.
CSS for the pane
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: 0; /* Z-index set here */
}
CSS for the dropdown
#dropdown {
position: relative;
display: inline-block;
z-index: 10;
}
#dropdown-content {
display: none;
position: absolute;
background-color: rgba(128, 128, 128, 0.534);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 8px 12px;
z-index: 10;
}
To see for yourself, first hover over the + button and press the other + button a few times.
When changing background color.
ALSO: When I try to hover on the other buttons, it disappears because it overlaps and thinks im hovering the pane.
Your #dropdown is partly transparent, that's why the stuff behind is visible: You defined background-color: rgba(128, 128, 128, 0.534); for it - the "0.534" value in there is the transparency value.
Change that value to avoid that.
Try change z-index property of your .pane class to value -1.
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: -1; /* Z-index set here */
}
Check here a tuto with dinamic and online examples:
z-index tutorial and examples
as a complementary solution, in the screenshot it is seen that applying z-index -1 works
the solution with z-index: -1 worked for me
Related
What is the right way to place the content inside the box div with rounded corners so it wouldn't overlap?
Blue box is the content div which is inside the white box parent div. I want the header to be within that parent box so that it has rounded corners at the top as well.
When I tried "overflow: hidden;" on parent box, content (blue box) just went down:
.WhiteBox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.BlueBox {
background-color: rgb(50, 116, 186);
height: 35px;
}
Specific CSS Properties
If you want border-radius for less than 4 corners, then you need to use specific properties:
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
Demo
body {
background: #000;
}
.wbox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.bbox {
background-color: rgb(50, 116, 186);
height: 35px;
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
}
<section class='wbox'>
<div class='bbox'></div>
</section>
I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.Good luck, and I hope this helps.
html, body {
perspective: 100px;
height: 100%;
width: 100%;
margin: 0;
}
div {
margin: 20px;
border-style: solid;
border-width: 4px 1px 1px 1px;
border-color: rgb(54, 81, 143);
border-top-color: blue;
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
width: 100px;
height: 100px;
}
<div></div>
The below code works well on all browsers except Internet Explorer.
In IE the wording seems to be compressed to 1px height or covered by the hr gradient.
What's causing this problem?
.hr-how {
text-align: center;
border: 0;
height: 1px;
margin-bottom: 40px;
margin-top: 40px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.hr-how:after {
content: "HOW TO USE IT";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 0.9em;
padding: 0 0.6em;
background: white;
}
<hr class="hr-how" id="hr-how">
http://jsfiddle.net/y8nx51rf/
This is happening because the default setting for overflow on hr tags is visible in Chrome and Firefox but hidden in IE. This causes any content outside the height of the hr to be cut off in IE.
To make this work in IE add overflow: visible; to .hr-how so the text can extend outside the boundaries of the hr.
.hr-how {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
border: 0;
height: 1px;
margin-bottom: 40px;
margin-top: 40px;
overflow: visible;
text-align: center;
}
.hr-how:after {
background: white;
content: "HOW TO USE IT";
display: inline-block;
font: "BodoniXT" !important;
font-size: 0.9em;
padding: 0 0.6em;
position: relative;
top: -0.7em;
}
<hr class="hr-how" id="hr-how" />
Hello awesome programmers,
I have been struggling greatly with CSS for some time now. I have an issue when resizing a window, some of my divs begin to collapse down the page. (As shown)
Before:
before http://411metrics.com/pics/before.PNG
After:
before http://411metrics.com/pics/after.PNG
I have tried setting the min-width to 100% on various divs and also tried setting the overflow to hidden.
Does anyone have any suggestions as to how to fix this?
My HTML:
<div id="navigation">
<div id="branding-logo"><img src="/Portal/images/sharktek-logo.png" width="35" height="35"></div>
<div id="branding">Sharktek Tracking</div>
<div id="link-wrap">
<div id="active-nav">Dashboard</div>
Reports
Call Logs
Manage Campaigns';
</div>
<div id="nav-user">
Welcome<br>
Account Settings
Logout
</div>
</div>
<div id="nav-accent"></div>
My CSS:
#navigation {
z-index:3;
position: fixed;
top: 0;
width: 100%;
min-width:100%;
color: #ffffff;
height: 60px;
text-align: center;
/* Adds the transparent background */
background-color: rgba(22, 29, 37,1);
color: rgba(1, 172, 237, 1);
}
#navigation a {
float:left;
font-size: 14px;
padding: 25px 25px 0 25px;
color: white;
text-decoration: none;
}
#link-wrap {
float: left;
overflow: hidden;
margin-left: 15%;
}
#active-nav{
z-index: 2;
float:left;
color:white;
height: 60px;
background: -webkit-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* Standard syntax */
}
#active-nav a:hover {
color:white;
}
#navigation a:hover {
color: grey;
}
#branding-logo {
margin-top: 15px;
margin-left: 10px;
float: left;
}
#branding{
margin-top: 20px;
margin-left: 10px;
font-size:1.4em;
color: white;
float: left;
padding: 0px;
}
#nav-accent {
z-index:2;
position: fixed;
top: 60px;
width: 100%;
color: #ffffff;
height: 2px;
padding-top: 1px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 172, 237, 0.95);
color: rgba(1, 172, 237, 1);
}
#nav-user {
color: white;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 15px 30px 0 0;
font-size: .8em;
float:right;
}
#nav-user a{
margin: 0;
padding: 0 0 0 10px;
font-size:.8em;
}
I have had similar problems until I started to understand and apply absolute positioning. i.e. positioning relative the div you are in.
For absolute positioning the parent div must be set to relative positioning and after that you fix your inner elements to whatever side you like without having the browser take over the flow control.
e.g. in your case, with ...
#link-wrap {
position: absolute;
width: 500px;
/* ... the rest */
}
... your nav links will stop jumping all over the page. I made a few more tweaks in this fiddle http://jsfiddle.net/xb9cdu34/2/ .
I have the text "+ Add" in a button. When I squish the button's width, I would like 'Add' to disappear but the '+' to remain. Normally I would say overflow: hidden; but from what I can tell because I have position: absolute; that won't work. Ultimately I will probably have to change it to position: relative; and mess with the layout, but can anyone tell my why this is?
.add_button{
display: inline-block;
font-family: 'EntypoRegular';
color:white;
font-size: 34px;
line-height: 1px;
overflow:hidden;
padding: 0px;
position: absolute;
box-shadow: rgb(1, 97, 253) 0px 0px 0px 1px inset, rgb(153, 191, 254) 0px 1px 1px 1px inset;
cursor: pointer;
overflow: hidden;
text-decoration: none solid rgb(255, 255, 255);
background: rgb(77, 144, 254) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 2px 2px 2px 2px;
outline: rgb(255, 255, 255) none 0px;
margin: 7px 0px;
width: 15%;
left: 39%;
}