CODEWITHSUNDEEP
htmlcss
Jimmeny
Jimmeny

Reputation: 21

Css is not cascading?

I am trying to put a drop down menu at the bottom of my header. For whatever reason, the menu isn't seen as part of the header.

Html Code:

<div id="header">
<div id="navbarList">
{% if userroles %}
{% if 'root' in userroles %}
{% include "rootMenu.html" %}
{% elif 'admin' in userroles %}
{% include "adminMenu.html" %}
{% elif 'worker' in userroles %}
{% include "workerMenu.html" %}
{% else %}
{% include "NoMenu.html" %}
{% endif %}
{% else %}
{% if login is defined and login is not none %}
{% include "Home.html" %}
{% endif %}
{% endif %}
</div>
</div>

css Code: 

#header{
min-height:95px;
width:100%;
margin:0;
background-color:black;
}
#navbarList{
list-style:none;
width:65%;
position:absolute;
bottom:0;
right:0;
}

When I look at the site using firebug I see that the navbar doesn't inherit the css of the header. What am I missing?

Upvotes: 2

Views: 82

Answers (1)

jayelm
jayelm

Reputation: 7657

Not all css properties are inherited. min-height and most height/margin properties are not, for example, because it is assumed that child divs or other objects will have dimension properties distinct from their parents insofar as they are hierarchically "inside" other elements. Otherwise, specifying the width of a parent element would automatically make all of its child elements as big as the parent element!

For a specific list of properties that are/are not inherited, look here: http://www.w3.org/TR/CSS21/propidx.html

If you're asking about positioning, however, the issue is in position: absolute specified in your navbar. This removes the div from the normal flow of the document and positions it absolutely in the bottom right corner of the html. If you want the navbar to be positioned absolutely relative to the header, put position: relative on the header, which enables relative absolute child positioning. For more, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Here's a JSFiddle of your setup currently:

http://jsfiddle.net/maQa6/

Here it is after position: relative has been specified in the header: (font changed to white for clarity)

http://jsfiddle.net/V5Dpn/

Upvotes: 2

Related Questions