Inheritance + CSS

fobby · #1 (**permalink**) 19-01-2007, 12:08 AM

I'm learning about Inheritance in CSS and have found out that the all tags take the properties (well not all) of the tag they are inside.

I realized my problem when I tried to add a border to a div tag that was nested in another div tag. It was pointless because it just took the value of the outside div tag ? So how do I change the values of a nested div tag independently of the outer tag ?

thanks ..

louie · #2 (**permalink**) 19-01-2007, 10:24 AM

did you try giving the nested div a class?

Code:

<style type="text/css">
.main{border:1px solid #cccccc; width:500px; padding:5px;}
.sec{border:1px dashed #000000;}
</style>
 
<div class="main"> main div
 <div class="sec">
 nested div
 </div>
</div>

fobby · #3 (**permalink**) 19-01-2007, 12:21 PM

Yes, thats how I tried it, then linked to an external style sheet. Maybe I should post some code to see clearer, will post tonight, thanks

uncleseanie · #4 (**permalink**) 19-01-2007, 02:23 PM

Quote:

Originally Posted by louie

did you try giving the nested div a class?

Code:

<style type="text/css">
.main{border:1px solid #cccccc; width:500px; padding:5px;}
.sec{border:1px dashed #000000;}
</style>
 
<div class="main"> main div
 <div class="sec">
 nested div
 </div>
</div>

in the above example "sec" will inherit the width and padding properties.
so if you want to change the width then you will to explicitly state it
in .sec

daviddoran · #5 (**permalink**) 19-01-2007, 04:28 PM

I'm not sure what you mean by inherit in this situation.
When displayed, the "sec" box will have a black dashed border and will not have any padding or set width (it stretched to be the size of the parent minus padding). So it has not inherited any of the properties of the parent box.

fobby · #6 (**permalink**) 19-01-2007, 11:50 PM

take a particular example,

I want to put a left margin in the div class "links". I think the code in the .links css is pointless because the links div tag is inside the container div id and therfore will take the css values of the parent tag ? Is this the case, seems to be what is happening.

So then how do I apply values to the nested <div> (class links in this case) ?

edit > ... having more issues with this, using dreamweaver (find it handy for learning the tags before you give out to me

), if I change any font in the div container, every font inside the container changes too ! missing something fundamental here !

<div id="container">

<div class="links">
<p>About</p>
<p>Services</p>
<p>Portfolio</p>
</div>
</div>

#container {
position: absolute;
left: 43px;
top: 29px;
width: 689px;
height: 503px;
background-color: #FFFFFF;

}

.links {
position: absolute;
left: -1px;
top: 113px;
height: 168px;
width: 161px;
background-color: #CCCCCC;
font-size: 24px;
color: #FFFFFF;
border-left-color: #00FF00;
border-left-width: thick;
}

gary.b · #7 (**permalink**) 20-01-2007, 01:10 AM

Eh? err.. sorry - CSS at 1am doesn't go down well.

I'm not exactly sure what you want.

Just post a gif image of what you want the thing to look like - i'll try to give you the CSS (or at least explain it :P)

daviddoran · #8 (**permalink**) 20-01-2007, 01:18 AM

This will only happen with text because when you set the text color of the parent tag you are setting the style of the text, not the container per-se. (Yes guys, let's ignore whether this is technically correct)

louie · #9 (**permalink**) 20-01-2007, 10:16 AM

Did you try adding margin-left:5px; to the links class?

can you make a draw of what you want to achieve?

fobby · #10 (**permalink**) 20-01-2007, 01:10 PM

Here is a screen shot of what I want to do. I want to put a margin and or border on the left of the inside box (div links). My code is below. From the screen shot it looks like the border is there, but the colour (bright green just to see better) is not.

See the warning message on the left in Dreamweaver also.

"border-left-color does not apply to your selection because it is not inherited . It is applied to an enclosed tag."

I also get a similar message relating to the background of the enclosed tag.

background-colour does not apply to your selection because it is not inherited. It is applied to an enclosing tag. However, page elements are transparent by default, so this colour may show through."

<body>
<div id="container">
<div class="links">
<p>About</p>
<p>Services</p>
<p>Portfolio</p>
</div>
</div>
</body>
</html>

/* CSS Document */

#container {
position: absolute;
left: 43px;
top: 29px;
width: 689px;
height: 503px;
background-color: #FFFFFF;
font-style: normal;
font-family: "Times New Roman", Times, serif;

}

.links {
position: absolute;
left: -1px;
top: 113px;
height: 168px;
width: 161px;
background-color: #CCCCCC;
font-size: 24px;
color: #FFFFFF;
border-left-color: #00FF00;
border-left-width: thick;
margin-left:5px;
}

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Issue for Wordpress Menu..	Cormac	Coding Help	4	03-12-2006 02:12 PM
some simple store with css based layout	kuba77	Site Reviews / Announcements	1	30-11-2006 02:07 PM
How to make a H1 tag in CSS into a link	shanediffily	Coding Help	4	10-10-2006 04:54 PM
dynamic css	7aken	Coding Help	6	10-10-2006 08:13 AM

Inheritance + CSS

Inheritance + CSS

Similar Threads