I have sample page here: https://jsfiddle.net/solaris_9/17dwfmap/16/
.area-toc a {
position: absolute; /* Position them relative to the browser window */
left: -120px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
/*padding: 2px; *//* 15px padding */
width: 140px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 15px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 2px 2px 0; /* Rounded corners on the top right and bottom right side */
text-align: center;
background-color: #76a000;
z-index: 99;
}
.area-toc a:hover{
left: 0;
z-index: 99;
}
.table-main{
border-style:solid;
border-color:#aad69e;
border-width:1px 1px 1px;
z-index:9;
position:relative;
}
Generally speaking, when the mouse hovers at the side nav, I want the link could be rendered in front of the table. I set the z-index of it to 99, while the table is 9, but it doesn't work.
Do you have any idea? Does it link to the flex display of the table?
This is a problem I often face too when working with z-index's. The way I workaround this is to just set the z-index of the element I want to be lower, to a negative number.
https://jsfiddle.net/17dwfmap/27/
On line 113, I changed
z-index:9;
to
z-index:-10;
Related
unfortunately I have a little problem with a CSS class I implemented on my website. The menu on the page is displayed by the CSS code. Unfortunately I can't manage to disable scrolling while the menu is open. I already tried using "position: fixed !important;" and "overflow". Somehow, it did not work.
Here is the CSS code:
<style>
/*****************************************/
/*********| FULLSCREEN MENU CSS |*********/
/*****************************************/
/* Move the hamburger to the right of the header */
.de-burger-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}
/* Hide the desktop menu */
.de-burger-menu .et_pb_menu__wrap .et_pb_menu__menu {
display: none !important;
}
/* Force the mobile version of the menu */
.de-burger-menu .et_pb_menu__wrap .et_mobile_nav_menu {
display: block !important;
align-items: center !important;
}
/* Fullscreen Menu Style when Opened*/
.de-burger-menu .opened #mobile_menu1 {
width: 100vw !important; /* Make it span the full width of the viewport */
position: fixed !important;
top: 0em !important;
left: 0vw !important;
height: 100vh !important; /* Make it span the full height of the viewport */
display: flex !important;
justify-content: center !important;
flex-direction: column !important;
transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Animate the menu to fade in */
padding: 0 !important;
background-color: #ffffff!important; /* Fullscreen menu background color */
}
/* Show fullscreen menu */
.de-burger-menu .opened #mobile_menu1 {
opacity: 1 !important; /* Make it visible by setting opacity to 1 */
visibility: visible !important; /* Show the menu */
}
/* Hide and fade out the Menu when closed */
.de-burger-menu .closed #mobile_menu1 {
opacity: 0 !important; /* Make it invisible by setting opacity to 0 */
visibility: hidden !important; /* Hide the menu */
transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out !important; /* Animate the menu to fade out */
}
/* Remove Bullets next to LI Elements */
.de-burger-menu #mobile_menu1 li {
list-style: none !important;
text-align: center !important;
width: 100%
}
/* Make sure that the menu is above other elements */
.de-burger-menu .et_pb_menu__wrap span.mobile_menu_bar {
z-index: 999999 !important;
}
/* Set the close icon for when the menu is open */
.de-burger-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
color: #562f2f !important; /* Icon color */
content: "\4d" !important; /* Divi font icon to use for the close icon */
left: -40px; /* Close icon position. You might need to play with this to make it look right */
}
/* Keep hamburger icon in fixed position on mobile */
.de-burger-menu .opened .mobile_menu_bar {
position: fixed !important;
}
/* Remove mobile menu border */
.de-burger-menu .et_mobile_menu {
border-top: none;
}
/* Make sure the menu items do not show a background */
.de-burger-menu .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/* Remove the hover background from the menu items and add hover animation */
.et_mobile_menu li a:hover {
background-color: transparent;
opacity: 1;
transition: transform 0.3s ease-in-out !important; /* Animated the menu item when hovered */
transform: scale(1.15); /* Enlarge the hovered menu item by 15% when hovered */
}
/* Remove menu item bottom borders */
.de-burger-menu .et_mobile_menu li a {
border-bottom: none;
}
</style>
The website is: https://aureus-frankfurt.de/
I hope someone knows a solution.
Kind regards
Hi Welcome to the community:
You can target the mobile opened class with :has and make the body overflow:hidden
body:has(.mobile_nav.opened) {
overflow: hidden
}
I applied a drop shadow filter to a image and now the image is offset by about 10 pixels.
Is there a way to keep the filter from adjusting the position of the image?
#Image_3 {
opacity: 1;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 1));
position: absolute;
width: 36px;
height: 36px;
left: 20px;
top: 20px;
overflow: visible;
outline: 1px dashed #000000;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<img src="data:image/png;charset=utf-8;base64,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") 0 0 no-repeat" id="Image_3">
Update:
It was an issue on my end. The image already had a drop shadow. The filter did not adjust the position of the image. I changed the title of the question slightly.
it's unlikely that your filter is moving your image, just taking up additional space with the drop shadow. you can either add additional padding/margin on the right and bottom sides of your image to account for the drop shadow, or offset the image top/left position to counterbalance the shadow
try
#Image_1 {
/* other styles */
margin-right:10px;
margin-bottom:10px;
}
or
#Image_1 {
/* other styles */
transform: translate(-5px, -5px);
}
I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.
It's like it moves back, then forwards then back again?
This appears to only happen in Firefox.
JSFiddle
Found the problem. Your span is inline, and giving it position: relative caused the issue.
Simply change to inline-block and you're good to go:
.genericBtn span {
display: inline-block;
position: relative;
}
How about using a more subtle approach by using CSS pseudo elements:
.genericBtn {
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 30px;
width: 300px;
position: relative;}
.genericBtn::after {
content: ">";
position: absolute;
right: 37%;
transition: all .3s ease-in;
}
.genericBtn:hover::after {
transform: translate(10px,0); }
Here is a Fiddle
I want to style the "ending" of the current progress of the HTML5 progress bar by adding small black dot to it, see the screen. So this dot must move as progress moves
But the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the codepen
Maybe someone knows what happened or how to achieve my goal?
Thanks a lot!
P.S. Here is the HTML/CSS I use
HTML:
<progress value="1400" max="4261"></progress>
CSS
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress[value]::-webkit-progress-value {
position: relative;
background: #00d38d;
}
progress[value]::-webkit-progress-value::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 15px;
border-radius: 50px;
background: black;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #00D38D;
}
progress::-moz-progress-bar {
background-color: #00D38D;
}
You don't need a pseudo element to get this effect. Here it is using a gradient on the main style. (Tested only in Chrome)
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress::-webkit-progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
progress::progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
<progress value="1400" max="4261"></progress>
I read here that the pseudo css appears not to work with the progress element:
I wish that I could have used :after (or ::after) rules instead, but
these pseudo-elements don’t work with the progress tags in any browser
that doesn’t use the polyfill. And no, :before doesn’t work either. I
have no idea why it doesn’t work, but it’s a shame — using them would
be perfect to get rid of the extra markup.
Found here: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
I'm not sure why it was working before, I haven't been able to find a non JS way to emulate the effect of using the ::after css.
Here's a codepen from that article you referenced where it's not working as well.
They appear to be using the same method as you and it has no function:
progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo
elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;
background-color: white;
border-radius: 100%;
}
You may have to implement some sort of javascript or use a different method other than the HTML5 progress element to implement this.
Numbars has some similar stuff to what you're trying to do, but you may need to modify it a decent amount to get it functioning the way you want.
Sorry this isn't exactly a solution, but hopefully you can find a workaround that's not too tough to create.
I'm getting incorrect look in internet explorer 7,6, etc. It started when I added float: right; to #social-share div tag. I tried setting display: inline-block; to it and clear: both; but nothing worked for me.
You can see the issue live. Here is my code:
HTML
<header>
<div id="inner-border">
<div id="header-wrapper">
<div id="social-share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</header>
CSS
header {
width: 100%;
height: 115px;
background: #120c09;
margin: 50px 0 0 0;
border-top: 1px solid #100b07;
border-bottom: 1px solid #100b07;
}
#inner-border {
width: 100%;
height: 103px;
margin: 5px 0 0 0;
border-top: 1px dashed #291a10;
border-bottom: 1px dashed #291a10;
}
#header-wrapper {
width: 900px;
height: 103px;
margin: 0 auto;
}
#logo {
height: 230px;
width: 205px;
position: absolute;
z-index: 99;
margin: -57px 0 0 0;
background: url("../images/logo.png") no-repeat;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#logo:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#logo:active {
margin: -55px 0 0 0;
}
#social-share {
width: 280px;
float: right;
margin: -47px 0 0 0;
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#social-share:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
This is correct look:
This is inncorrect look (ie7, 6)
Ignore css3 related stuff, the problem is that in ie 7,6 everything is squeezed to the top and search bar appears in the middle instead of on the right.
Your top nav is breaking up in IE7 because it is not properly defined what goes where and how. First, your logo is sort of "floating" inside of your document, since it is positioned absolutely with no point of reference in its container, so lets start by fixing that;
Add position:relative to your #header-wrapper CSS rule so we can properly contain your logo within its boundaries:
#header-wrapper {
position:relative;
}
Next, we have to rearrange your logo to properly sit in the middle of your #header-wrapper div. Previously you were using margin: -57px auto 0 auto; to align your logo but since you are already absolutely positioning it you don't really need margin at all (a miracle it was even working at all), so let's do some mathematics to absolutely position your logo in the middle of your header wrapper div:
First, we eliminate that margin declaration and replace it with the following:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
Now, what did we do here? First we pushed your logo 50% from the left and then pushed it back with a negative margin by -102.5 pixels. Why did we do this? Because the left declaration pushes your element with width added to the calculation, so the push actually means "50% to the left + width of your element", so, we use the negative margin to compensate for the width, 50% - width/2. Here is a better explanation of the process.
After the two changes I listed are complete, you will find that the logo sits behind your slideshow area, this is due to the ie7 z-index bug and the fix is actually very simple:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
We fix it by defining your header section as position:relative and give it a higher z-index than your slideshow area, this way your logo will be over your slideshow.
Now to fix your search bar from positioning itself to the left instead of the right we have to define your #social-share section as position:absolute and then push it to the right by using right:0, why? Because IE7 is positioning your search bar right next to the #social-share who is being pushed to the top by using a negative margin, and thus is not being removed from the stream as expected (was surprised it actually worked in modern browsers). So, define your #social-share section as absolute and the problem is solved:
#social-share {
position:absolute;
right:0;
}
And the final fix is a conditional class that we're going to use to target your #_atssh <div> tag to position it relatively to your document. IE7 is not taking it into account because it is absolutely positioned and so that long space is removed.
We can take advantage of your conditional classes added to your <html> tag by the boilerplate and target IE7 alone with a fix:
.ie7 #_atssh {
position:relative;
}
Note: There is probably a billion typos and grammar errors, I wrote it during lunch so I'll comeback to this in the future and fix them.
looks like you need a clearfix:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
add this to the element that contains your floated element
Based off what I can see (sorry, no IE6 or 7 available), you might be able to fix this by using position and top instead of using the negative margins like this:
Remove the margin: -57px 0 0 0; from #logo to be top: 0px;. Since you're already using position: absolute;, this should place the logo at the top edge of the screen for you.
Remove the margin: -47px 0 0 0; from #social-share and instead add position: relative; top: -47px;
Including the proper clear or "clearfix" mentioned by JKirchartz may also be required.
Add the CSS property zoom: 1 to <div id="social-share">, header-wrapper, or inner-border.
I like how quirks mode explains the issue of hasLayout which is an IE6 & IE7 specific problem: http://www.satzansatz.de/cssd/onhavinglayout.html.