Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Parent div and child div drop shadow inset issue

Posted on 2013-10-22
14
Medium Priority
?
570 Views
Last Modified: 2013-10-24
Hello Experts,

I am working within the joomla CMS. I've downloaded the module Tabs GK5. I have created a custom css file for this module, without any issues.

The issue I am having is on the parent div gkTabsGK5 (that all the tabs are contained in) i've created a box-shadow:inset ---. And each tab (a listed item) is assigned a background color.

The issue is the parent box shadow is overridden by the background color of the tabs - in essence the child is overriding the parent. Z-index is really not an option (I don't think) only because the child inherits the z-index of its parent. I could apply a negative z-index to the child and though this gives me the desired effect, it now makes the tabs un-clickable.

Is there a solution for this - without having to use images?

Going to begin working on another section of this project until a solution is found.

Thanks

Code is below:

*** CSS ***
.gkTabsGK5 {
	width:435px;
	overflow:hidden;
	border-radius:10px;
	box-shadow:inset 0 0 10px #373737;
	color:#ffffff;
	margin:25px 0 0 10px;
	float:left;
}

.gkTabsWrap.vertical {
	
}
.gkTabsWrap.vertical ol,
.gkTabsWrap.horizontal > ol {

}
.gkTabsWrap.vertical ol li,
.gkTabsWrap.horizontal ol li {

}
.gkTabsWrap.vertical ol li.active,
.gkTabsWrap.horizontal ol li.active {

}

Open in new window


***HTML***
<div id="gk-tabs-114" class="gkTabsGK5">
<div class="gkTabsWrap vertical">
<li id="blue" class="gkTabs-1 active" data-animation="opacity">
<li id="orange" class="gkTabs-2" data-animation="opacity"> test 2 </li>
<li id="light-green" class="gkTabs-3" data-animation="default"> test 3 </li>
...

Open in new window

0
Comment
Question by:Morgan
  • 6
  • 5
  • 3
14 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39592376
Please provide a link to your page.  As you can see, when I test this out by putting it jsbin, I just see errors.   http://jsbin.com/eBoRAcA/1/edit?html,css,output

This is a good article on how to recreate a sample for us http://css-tricks.com/reduced-test-cases/
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592483
I've made the site available for review: http://testingtesting1.info/joomla-test/

I've striped the code down already. The issue is indeed a css one, and I know it has to do with both the parent and child relationship.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39592529
Ok, this is what I see

/* ==================  Edit Tabs  ================= */
                   /* tabs homepage */
.gkTabsGK5 {
	width:435px;
	overflow:hidden;
	border-radius:10px;
	color:#ffffff;
	background-color:#ffffff;
	margin:25px 0 0 10px;
	float:left;
	position:relative;
}

Open in new window


No boxshadow.  In chrome console, when I added the line you originally have it worked.

box-shadow:inset 0 0 10px #373737;

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39592539
This is what I get after I added, box-shadow:inset 0 0 10px #373737; on my own.

screen
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592585
Yep. I've done that. But look at the tabs, they are not behind the shadow.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39592623
Add the box shadow to the div below it

screen2
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39592638
Scratch that,  I added it to the class .gkTabsWrap.vertical ol li,
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592667
yeah I tried that to, however it than applies the shadow effect around each tab plus the parent div. I've attached a screen shot of the effect I am wanting. i am wanting the shadow effect to be only on the parent item, with all content behind it. I don't think it can be done.

screen capture
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 2000 total points
ID: 39592695
The stacking order is always going to put the child on top of parent and the inset cannot go anywhere  except under the child.  The inset shadow is intended to extend above the background but not the content; and the child is content. maybe a transparent background on the child does it.

There is a possibility that you might get it to work by making the relationship sibling and then use absolute positioning or a float and margin positioning, but it may be unstable across resolutions.  However any approach you take is going to be somewhat of a hack and have maintenance issues.  

When you try to do something that is specifically counter to the standards specification, you are begging for failure.

Cd&
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592708
A possible work around is using gradients. I could apply a top gradient to the ol and than apply a left and right gradient to the first and last element using a pusdeo class. But I don't know if i can apply multiple gradients to one div element. I would need to apply multiple gradients to the white box area where the content appears (left, right, and bottom).

Do you know if you can apply gradients from multiple sides to just one element?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39592712
You might also consider an image border though support for it is thin and hacky. The other possibility is an image background to get the effect but that will have cross-resolution issues unless you go to a rigid "piece of glass" layout.

Cd&
0
 
LVL 1

Author Comment

by:Morgan
ID: 39592793
Hello COBO,

I find it funny - I was just thinking of sending a request to you. I didn't see you reply before I posted earlier.

To your first comment: I was I was guessing the parent and child relationship  was the issue.

To your second comment: what do you mean "piece of glass"?

I would like to stay away from images, 1) for reasons you stated above, and 2) scale ability.

Would the gradient idea work you think?

Thanks,

Morgan
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 39592868
"piece of glass" refers to very rigid non-responsive design where the layout either does not adjust to changes in screen size/resolution; or has to use heavy scripting to adjust the dimensions and positioning; which will almost always fail for some cases.

Multiple gradients are possible as are gradients and inset shadows combined, though you might be able to work it out with multiple stops. As it happens I have an article on using gradients that might help you; or at least give you some additional ideas.

Cd&
0
 
LVL 1

Author Closing Comment

by:Morgan
ID: 39598951
Though the design committee has changed the direction they want to go, Both your answers where adequate in addressing my concerns. I believe the gradient would have worked as a "work" around.

thanks,
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question