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 4 of 4

Thread: problem with h4

  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    problem with h4

    http://www.countyfairgrounds.net/indiana/indiana.php

    header 4 " Find Christmas" - its below the Fathers Day Ad

    first off I have the lettering marked as white in the css and its showing brown on the page , and I cannot get the thing closer to the red box below and for that matter the only way I got it to move down from section class leftadtop was to ad a height to that section and that does not seem right somehow.
    Anyone want to play with a header ?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    #featured h4 {
        background-color: #008000;
        color: white;
        font-size: 16px;
        font-weight: bold;
        margin-top: 2em;
        padding-left: 20px;
        width: 180px;
    }
    will change the colour to white. Use Firebug to find these sorts of things.

    That element is not moving down as you expect because the contents of section.topleftad are floated, and consequently the element has no height. Your explicitly applied height works around this somewhat, but a better solution is to clear the float at the end of section.topleftad by:

    Code:
    section.topleftad {
        background-color: white;
        /*height: 230px;*/
        margin: 10px;
        overflow: auto;
        height:1%
    }
    The height:1% will clear the float in IE7 and under - leave this out if you're not bothered about supporting these browsers.

    The reason there's a gap between the h4 and section.christmas is because of the default bottom margin on h4 - again Firebug makes this simple to see. Set the margin-bottom to 0 and the gap will disappear.

  • #3
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks for taking the time to reply. I know it takes time. I use the latest versions of Firefox and Chrome and IE9 -
    Actually after I posted I realized what was wrong with the H4 header color

    I am having a hard time understanding the idea of clearing - I have read several things on it online but I just don't get it. Overflow I get.
    But I do not see the difference between your 1% and the 230 height in pixels I input on the top ad. why does the 1% work and what does it represent?

    I do not like Firebug - I use Chrome's code visualization pacage that is similar to Firebug but in my opionion easier to understand.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    When you give an arbitrary height to the element, any subsequent elements will be positioned after that height. However the actual height (as here) may be less than your arbitrary height and so you get a gap.

    Here, section.topleftad has no height because all of the elements it contains are floated. Floated elements are removed from the normal flow of the document, which is why the containing element then has no height.

    Clearing the float at the end of section.topleftad forces it to extend to include the contained elements, and the element then has a height. Clearing is achieved by adding the overflow:auto (or overflow:hidden) property. Have a look at this explanation for some more detail on clearing floats.

    For IE7 and earlier, adding overflow:auto has no effect, but the float on an element can be cleared by setting the proprietary MS hasLayout property - there's a number of ways to do this, but adding height:1% is one of the less obtrusive ways - and has no effect on the layout.


  •  

    Tags for this Thread

    Posting Permissions

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