...

View Full Version : Multiple heading styles?



AlyDesigns
08-04-2011, 04:19 PM
I am having some trouble and can't seem to find the answer...

I have 2 different div IDs: #top and #bottom.

#top has a white background, and I want the text to be red. #bottom has a red background and I want the text to be white. But the headings are coming out white in the top and I can't seem to figure out why...

Here is my css:



h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 0.75em; }


#top {
background:url(../img/top-bg.jpg) bottom repeat-x #FFF;
float:left;
min-height:530px;
width:100%;
}

#top h2,
h3,
h4,
h5,
h6 {
color: #f43038;
font-family: Verdana, Geneva, sans-serif;
margin-bottom: 5px;
}

#bottom {
background:url(../img/section.jpg) bottom no-repeat #f43038;
float:left;
min-height:410px;
width:100%;
}
#bottom p,
h2,
h3,
h4,
h5,
h6 {
color: #FFF;
margin-bottom: 12px;
}



And here is my HTML:

<div class="content" align="center">
<div id="top">
<div class="container" align="center">
<div>
<h3>Top Heading</h3>
<p> Top content </p>
</div>

<!--#include file="nav.shtml"-->
</div>
</div>
<div id="bottom">
<div class="container">
<div class="bottomtext">
<h3>Bottom Heading</h3>
<p>Bottom Content</p>
</div>

</div>
</div>
</div>




Any ideas? TIA!

tracknut
08-04-2011, 05:38 PM
This:

#bottom p,
h2,
h3,
h4,
h5,
h6 {
color: #FFF;
margin-bottom: 12px;
}

will set your <p> in the #bottom div to white, and then *all* h2, h3, etc text to white. What you wanted was:

#bottom p,
#bottom h2,
#bottom h3,
#bottom h4,
#bottom h5,
#bottom h6 {color: #FFF;margin-bottom: 12px}


And similarly with the css for #top.

Dave

resdog
08-05-2011, 07:59 PM
to things a step further, and give you cleaner code, why not just assign a color to the outer div, since all child elements of each div will inherit that color:



#top {
color: #f00;
}
#bottom {
color: #000;
}


This will work because you didn't assign a color to the headings and paragraphs previously. It results in fewer lines of code to interpret, less load time.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum