WordPress.org

1. mandawahoo
   Member
   Posted 3 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 3 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 3 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 3 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 3 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 3 years ago #

   Add to #footertop

   margin: 0 auto;
   width: 100%

   see if that gives the effect you want

7. t31os
   Member
   Posted 3 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 3 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 3 years ago #

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

10. t31os
    Member
    Posted 3 years ago #

    You missed the hash #

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

11. mandawahoo
    Member
    Posted 3 years ago #

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

12. mandawahoo
    Member
    Posted 3 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.