Question

I can’t seem to get my CSS to link to a div when I use:

[in stylesheet(style.css)]

#sitecontainer .header {
    background-image:url('/images/header-background');
}


<div id="sitecontainer">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
</div>

However when I place the CSS inline in the page it does work. Any ideas?

Pete

Answer 1

Your CSS is using a class selector on header:

.header

rather than.

#header

This would work if you had HTML mark-up like this:

<div id="sitecontainer">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
</div>

But in your case you could use:

#sitecontainer #header

or even better (unless you’re doing something very specific in your site with this particular header) you should just cut it down to

#header { /* CSS rules here */ }

For more info – A really good article of the various CSS selection methods is here on NetTuts.