WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Background stopping short - why? (12 posts)

  1. mandawahoo
    Member
    Posted 5 years ago #

    I have added a second footer to my current wordpress theme
    http://www.gibsondesignmanagement.com/test/

    In my footer file, I have div "#footertop" containing 3 ".footerbox" spans

    </div>

    <div id="footertop">
    <div id="footer-wrap">

    <span class="footerbox" style="margin-right:10px;">test

    test</span>
    <span class="footerbox" style="margin-right:10px;">test

    test</span>
    <span class="footerbox"><?php quotescollection_display_randomquote(); ?></span>

    </div>
    </div>

    The style sheet calls out:

    #footertop {
    text-align: center;
    border-top: none;
    clear: both;
    padding: 15px;
    text-align: center;
    background: url(images/back.jpg);
    color: #FFF;
    }
    .footerbox {
    padding:5px;
    width: 300px;
    background: #A29982;
    float: left;
    color: #4d4236;
    }

    Why is the background stopping so short?
    Any advice will be appreciated. I actually had it working earlier, so I'm not sure why its giving me trouble now.

  2. stvwlf
    Member
    Posted 5 years ago #

    Hi

    I have been playing with your layout. I assume you want the tan color of the sidebar to be the background of the contents area also?

    I suggest you add a wrapper Div around both your content and sidebar div's

    <div id="contentwrap">
    <div id="content">
    .........
    </div>
    <div id = "sidebar">
    ....
    </div>
    </div>

    Apply the background color to the contentwrap div

    You should also float the contentwrap div left.

    Try that - I think it will get you most of the way to where you want to go.

  3. mandawahoo
    Member
    Posted 5 years ago #

    No, sorry, what I want is for the pattern (the block background) to extend down to the second footer.

    Thanks though.

  4. stvwlf
    Member
    Posted 5 years ago #

    Hi

    All you need is to delete clear: both from #footertop (in the CSS)
    and replace it with float: left

    You will need to tweak padding and margin a bit.

  5. mandawahoo
    Member
    Posted 5 years ago #

    That definitely gets the background extending down; however, the problem with playing with the padding and margin values is that it is a centered theme. Even if I set the margin so that it works on my screen, it will not fit perfectly on someone's screen that might be set at a different resolution.

    Any suggestions?

  6. stvwlf
    Member
    Posted 5 years ago #

    Add to #footertop

    margin: 0 auto;
    width: 100%

    see if that gives the effect you want

  7. t31os
    Member
    Posted 5 years ago #

    You'll need to remove the padding on #footertop and set width of #footer-wrap to auto, then apply a margin to the spans to create the padding that was removed...

    Like this... modify what you have to include the below..

    #footertop {padding:0;width:100%;}
    #footertop #footer-wrap  {width:auto;margin:0 10px}

    NOTE: margin:0 auto on a 100% element won't do anything, but i did try it ... ;)

    If you set the footertop element to 100% width with padding you'll end with scrollbars, so just use margin on the footer-wrap instead...

    At least that worked on the page for me.... adjust what you have as needed.

  8. mandawahoo
    Member
    Posted 5 years ago #

    I tried your suggestions and it still looks the same...

    I tried

    #footertop {
    text-align: center;
    background: url(images/back.jpg);
    color: #FFF;
    padding:0;
    width:100%;
    clear: both;
    }
    #footertop footer-wrap {
    width:auto;
    margin:0 10px;
    padding:15px 0 15px 0;
    }

  9. mandawahoo
    Member
    Posted 5 years ago #

    oops, #footer-wrap I mean. still didn't work

  10. t31os
    Member
    Posted 5 years ago #

    You missed the hash #

    #footertop footer-wrap {
    ...should be..
    #footertop #footer-wrap {

  11. mandawahoo
    Member
    Posted 5 years ago #

    See above. I caught that mistake... still isn't working

  12. mandawahoo
    Member
    Posted 5 years ago #

    Okay, I fixed it with display: inline-block, and then used various fixes for earlier browser versions.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags