Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple heading styles?

    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!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,137
    Thanks
    7
    Thanked 257 Times in 256 Posts
    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

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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:

    Code:
    #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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •