PDA

Click to See Complete Forum and Search --> : CCS inheriting

McCauley
04-06-2006, 04:09 PM
I was wondering does anyone know if you can inherit from div to div? or how you could do it if you can? I can't get my image to change. I don't think I'm doing this right.

EX:
#pageHeader
{ background-image: url(home_header.jpg);
background-repeat: no-repeat;
position: absolute;
left: 190px;
height: 200px;
}
#pageHeader #pageHeaderParent
{ background-image: url(Par_Bnnr.jpg);
}

Here is some html essentially I'm wanting to swap out the background image. If you uncomment the #pageHeader and use #pageHeaderParent you should get the same thing but you don't get any of the styles.

<html>
<head>
<style type="text/css">
#pageHeader
{
border:1px solid;
background-image: url(home_header.jpg);
background-repeat: no-repeat;
position: absolute;
left: 190px;
height: 200px;
width: 575px;
top: 0px;
}
#pageHeader #pageHeaderParent
{
background-image: url(Par_Bnnr.jpg);
}
</style>
</head>
<body>
<div id="intro">
<div id="pageHeader">
<div id="loginHeader">
<p class="p1"><span>Registered Users:</span></p>
<p class="p2"><span>
<a href="http:" title="Login to Child Support's Secured Site">Login</a></span></p>
<p class="p3"><span>New Users: </span></p>
<p class="p4"><span><a href="http:" title="Registration for Parents">Parent Registration</a></span></p>
<p class="p4"><span><a href="http:" title="Registration for Employers">Employer Registration</a></span></p>
</div>
</div>

<!-- remove for test the border should still show
<div id="pageHeaderParent"> code..... </div> -->

</body>
</html>

thanks
baseiber
04-06-2006, 04:32 PM
I'm not entirely sure what you mean. It might help if you also showed the HTML that the CSS would affect.
McCauley
04-06-2006, 06:15 PM
I've posted some HTML maybe this will help.
ray326
04-06-2006, 11:20 PM
More semantic markup would make for easier styling I think.

<div id="intro">
<h1>{page heading}</h1>
<h2>{login heading}</h2>
<dl>
<dt>Registered Users:</dt>
<dd><a href="http:" title="Login to Child Support's Secured Site">Login</a></dd>
<dt>New Users: </dt>
<dd><a href="http:" title="Registration for Parents">Parent Registration</a></dd>
<dd><a href="http:" title="Registration for Employers">Employer Registration</a></dd>
</dl>
</div>
felgall
04-07-2006, 04:52 AM
There is no reason to nest id references in CSS. The following are identical references provided that the pageHeaderParent div is nested inside the pageHeader div (if it isn't then the top line does nothing). Ids MUST be unique so they are the simplest CSS to be able to reference.

#pageHeader #pageHeaderParent {...}
#pageHeaderParent {...}

If one div is nested inside another in the HTML then anything not explicitly specified for the inner div that can be inherited will be inherited from the outer div. You don't need to specify the nesting levels in the CSS in order to inherit.
McCauley
04-09-2006, 10:23 PM
I have another question then. It sounds like I'm making it harder than I need to. We use something called struts and tiles. What happens is the #pageHeader is a variable and depending on the tile or the page that is accessed the ID is changed. So I was trying to pass inheritance in the style sheet rather than the earlier div in the html.

That's where I ran into the problem where I was unable to pass the info from #pageHeader to #pageHeaderParent.

I'm new, sorry, I appriciate the help.

I'll play with what you both have helped me with and I appriciate all your input. Thanks