Inheritance + CSS

Status
Not open for further replies.
F

fobby

New Member
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 ..
 
L

louie

New 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>
 
F

fobby

New Member
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
 
U

uncleseanie

New Member
louie said:
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>
Click to expand...
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

daviddoran

New Member
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.
 
F

fobby

New Member
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

gary.b

New Member
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

daviddoran

New Member
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)
 
L

louie

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

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

fobby

New Member
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;
}
 
L

louie

New Member
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>
 
F

fobby

New Member
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 ?
 
L

louie

New Member
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.
Top