I am trying to implement the solution listed here:
Creating a CSS3 box-shadow on all sides but one
I created this jsfiddle using that guys code, adding overflow:hidden to #nav. You can see it here:
http://jsfiddle.net/eeTUJ/
The thing that is still missing is the shadow of the content on the light blue background. Does anyone know how to get it for the main content shadow to appear...?
Thanks
Add a z-index to the tab's active and hover state that is higher than #content_over_shadow. I added:
z-index: 20;
http://jsfiddle.net/eeTUJ/2/
Related
I am trying to design the first Book Now button of this page (https://www.bridgecitychrysler.com/book-service/) to overlap onto the white section below the hero image. Even though I have set the z-index incredibly high, it is not showing up in front of the section below.
If someone is able to figure this out just in the inspect tool, that would be great!
Thanks,
Looks like your .hero-widget css has overflow: hidden; set, disabling that seems to have made it visible!
Try removing position:relative from your button class.
This makes the button reappear, and then remove transform: translateX(-50%) from the a tag in the cta-container for proper alignment.
Use pointer-events:none for these type of situation, when click events is not working for overlapped content, use pointer-events:none
The logo element on the website:
puerteaspecialists.co.uk
was originally at the front. I didnt even update anything and one day i check the site and now the top 3rd is hidden behind the nav bar.
Ive tried z - index and have kinda worked out why this isnt working, but also havnt actually found the solution.
Is there a way to bring this to the front or anyway to show the full image via css?
Thanks!
A simple solution is to remove the solid background of the uppermost navigation bar...
.top_nav_out {
background-color: transparent;
border: none;
}
The problem is that class name .top_nav_out in your top navigation block applies a high z-index which causes the top-most nav block to overlap the lower navigation block (.top_nav) which hides your logo partially.
remove property:
z-index
from class:
.top_nav_out
and your logo will be displayed in full.
From what I have seen, the z-index property is redundant anyway in that class (layout stayed in good shape after removing it)
Hope it helps a bit!
I'm trying to round the corners of the video container on this page: http://tstand.com/homepage-test/
For some reason there are white pointy edges on the bottom left and right. I've inspected source a bunch of times and can't see where this white background is coming from.
If someone could tell me which class I should be adding the border-radius to that would be great. Also, this is a minor detail, but I feel like the edges aren't that smooth, is there a way to fix that?
As I see the following code should help in your case:
.page-id-965 .et_pb_video_box {
overflow: hidden;
}
It seems that the video element goes outside the container - that's why the overflow hidden helps as applying border-radius to the video element not work.
Recently I am working on a new website and I am creating it with bootstrap. Here is the bootply link that have my website.
http://www.bootply.com/9pUX4JwEYb
According to that HTML in this Link, I have a trouble that i cant fix yet. When I am scrolling up, the text "Main Bodysssss..." is going over the navigation bar. I have tried to position it but no help. Just tell me how to fix this. Many Thanks.
A higher z-index for .navbar should fix this (working example):
.navbar {
z-index: 10;
}
From the documentation,
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
I am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.
Please check out the nav here:
http://cafemeetup.com/testArea/nav/
If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it.
This is not true as I have made the z-index of the rollover box lower in the stacking order.
What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.
It is done here at Shopify:
http://www.shopify.com/ (rollover 'resources')
Anyway, hope someone can shed light on this.
I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.
Anyway, thank you for at least reading all this. I appreciate your time,
James
I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.
http://jsfiddle.net/sTsrb/
You are applying your z-index:999 to the <li class="menu_right"> and then applying z-index:1 to the <div class="dropdown_1column align_right"> child element. If you want it to appear underneath the <li>, make it a sibling, not a child.