...

View Full Version : Making a child element not part of parent



Sammy12
11-18-2011, 02:17 AM
Hi, let's say I have a button which I want box-shadow: inset; when :active. However, when the user clicks the <span>text</span> part of the button, I don't want it to have the box-shadow.

Is there a way to do this in css?

Excavator
11-18-2011, 02:58 AM
Hello Sammy12,
Pretty sure CSS cannot make your span affect your button. Sounds like a js thing to me.
Have you tried anything yet? I'd be interested in looking at your attempts.

alykins
11-18-2011, 03:14 AM
what about removing the shadow effect using :active?

Sammy12
11-18-2011, 04:07 AM
Hello Sammy12,
Pretty sure CSS cannot make your span affect your button. Sounds like a js thing to me.
Have you tried anything yet? I'd be interested in looking at your attempts.
I have absolutely no clue :) Does someone have a js solution?


what about removing the shadow effect using :active?
so the button looks like this: (hypothetical situation)



button {
padding: 5px;
}
button:active {
box-shadow: inset 0 0 10px 0 #000;
}
button span {
padding: 5px;
}

<button>
<span>abcd</span>
</button>

Excavator
11-18-2011, 06:39 AM
I guess I'm not sure what you're trying to do. Have you tried just styling an anchor?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 50px 0 300px 50px;
background: #999;
}
button {padding: 5px;}
button, button a:visited {box-shadow: inset 0 0 10px 0 #0f0;}
button a:hover {box-shadow: inset 0 0 10px 0 #000;}
button a:active {box-shadow: none;}

</style>
</head>
<body>
<div id="container">
<button><a href="">abcd</a></button>
<!--end container--></div>
</body>
</html>

alykins
11-18-2011, 03:40 PM
I guess I am a little lost too- and now that I think about it :active might not work.... are you trying to have the shadow go away as long as the user holds down the button? in that case actually I think :active would not work, but :focus should.... but might need to play with both

but looking at your code I am getting confused as to what you want to have the shadow-- you essentially want the shadow to appear around the button only and also only when it is pressed correct?

again in that case I think the toying with the :active and :focus pseudo's might work... the button span {} may need to have further styling to ensure it never gets an inherited border but that would be the same as the code that makes it work, but in reverse for something like button span:active or :focus

moon-safari
11-20-2011, 05:28 PM
maybe this will help:


<div id="button">
<div></div>
<span>blabla</span>
</div>



#button {position:absolute;padding:10px;display:inline-block;text-align:center}
#button div {z-index:1;position:absolute;background-color:red;width:100%;height:100%}
#button span{background-color:blue;position:relative;z-index:2;left:10px;top:10px;}
#button div:active {box-shadow: inset 0 0 10px 0 #000;}

The span element is now not a child of div element, that has the box shadow, but a sibling. So you won't get a shadow when clicking on span.
It's the only solution i could think of right now but maybe there are better approaches out there...

Sammy12
11-20-2011, 08:02 PM
well done

this actually fits perfectly since I have an opacity underlay, extra div to get that browser support over rgba



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum