Solved

Parent div and child div drop shadow inset issue

Posted on 2013-10-22
14
548 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 52

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 52

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
 
LVL 52

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 52

Expert Comment

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

screen2
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39592638
Scratch that,  I added it to the class .gkTabsWrap.vertical ol li,
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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 500 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 500 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now