Coder
Inheritance + CSS 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 ..
Senior Member
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>
:. Web Design & Development Web Design Ireland
:. Search Engines Optimization Search Engines Optimization
:. Car Parts & Accessories Car Parts
:. Cars Ireland Cars Ireland
:. I Have 2 Find It Directory SEF Directory
Coder
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
Frontpage User
in the above example "sec" will inherit the width and padding properties.Originally Posted by louie
so if you want to change the width then you will to explicitly state it
in .sec
Wannabe Geek
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.
Coder
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;
}
Last edited by fobby; 20-01-2007 at 01:05 AM.
insert-witty-remark-here
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)
Wannabe Geek
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)
Senior Member
Did you try adding margin-left:5px; to the links class?
can you make a draw of what you want to achieve?
:. Web Design & Development Web Design Ireland
:. Search Engines Optimization Search Engines Optimization
:. Car Parts & Accessories Car Parts
:. Cars Ireland Cars Ireland
:. I Have 2 Find It Directory SEF Directory
Coder
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;
}
Posting Permissions 
LinkBack URL
About LinkBacks
Reply With Quote