Inheritance + CSS

Status
Not open for further replies.
#1
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 ..
 
#2
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>
 
#3
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
 
#4
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
 
#5
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.
 
#6
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

New Member
#7
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)
 
#8
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)
 
#10
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;
}
 
#12
a drawing of what you want will be better but anyhow try this:
Code:
#container {
position: absolute;
left: 43px;
top: 29px;
width: 689px;
height: 503px;
background-color: #FFFFFF;
padding-left:5px;
}
.links {
position: absolute;
left: -1px;
top: 113px;
height: 168px;
width: 161px;
background-color: #CCCCCC;
font-size: 24px;
color: #FFFFFF;
border-left: 7px solid #00FF00;
margin-left:5px;
}
</style>
 
#13
thanks a lot, you have added "padding-left:5px;" to the container and changed border-left-width: thick; to border-left: 7px solid #00FF00;


I'm more interested in learning here than getting something to work, can you explain why your's worked and mine didn't ?
 
#14
with the CSS in your case you have to think like the container is a box and you are inside it together with another box.

Now if you want to push the inside box 10cm from the left where are you going to apply the force, inside the second box or from the outside. second option makes more sense.

the border for the second box it's easy. we just tell the css how much we want it (7px here) then how we want it to be (solid) and what color (#00ff00) so we came up the following code:

border-left:7px solid #00ff00;

::::::::::::::::::::::::::::::::::::
some think css it's easy but is not. requires a lot of practise and study.
 
Status
Not open for further replies.
Award-winning Mac antivirus and Internet security software
Top