SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry secondary bg image in worpress?

    I am almost finished with my wordpress installation for a blog on my website, but i am having one problem.

    The "body2" and footer sections of the rest of my website extend across the entire screen, like a background image or bg color.
    my problem is figuring out how to do this in wordpress.
    I have a header bg image, that was easy enough, but how can i make the footer extend across as well?
    being as pages will vary in length, i cant use a fixed height image with whitespace between the header and "body2" sections, because the body content may extend beyond that fixed height.

    Is there a way to set a secondary background image, aligning it to the bottom of the page while i have the existing one aligned to the top?
    i dont want to go outside of the wordpress 940px width because i want the site to work on mobile devices.

    has anyone figured out a way to do this? ive spent several hours on google trying to figure this out. and havent found anyone with a solution thus far.

    if you need a point of reference, the website is http://liveoutloudproductions.com/ and the worpress installation is http://liveoutloudproductions.com/blog/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You'll need to take those divs out of the wrapper div and wrap them in their own 100%wide wrapper divs, then set them to width 940px and center them.

    On your other pages, you have these divs inside <font> tags, which is not good at all.

  3. #3
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You'll need to take those divs out of the wrapper div and wrap them in their own 100%wide wrapper divs, then set them to width 940px and center them.

    On your other pages, you have these divs inside <font> tags, which is not good at all.
    I will look into the <font> tags.
    I didnt build the rest of the site but when i have the extra time ive been slowly trying to clean up the code. its a slow and annoying process.
    Thanks

  4. #4
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK that halfway worked.

    but now both body 2 and footer divs are moved left, aligning them center is doing nothing and the background for the new wrapper4 class isnt working or isnt extending the width as it should.

    Code:
    #footer { 
    margin-left: 0;
    padding-top:0px;
     padding-bottom:20px;
      color:#fff;
       text-transform:uppercase;
        font-size:10px;
    	background-color:#252525;
    	height:8px;
    	width:940px;
    		}
    
    #wrapper4 {
    	margin: 0 auto;
    	width: 100%;
    }
    #wrapper4 {
    	background: #323232;
    	margin-top: 0px;
    	padding: 0 0px;
    }
    
    #wrapper3 {
    	margin: 0 auto;
    	width: 100%;
    }
    #wrapper3 {
    	background: #ebebeb;
    	margin-top: 20px;
    	padding: 0 20px;
    }
    
    .wrapper2 {background: #ebebeb;
    	width:100%;
    	text-align:left; /* === We still hate IE === */
    	z-index:100;
    	overflow:hidden;
    }
    
    .body2{ width: 940px; }
    And this funkyness is happening which i dont understand at all:
    screenshot.png

    i did list the site earlier its liveoutloudproductions.com/blog
    Last edited by Mittineague; Jul 16, 2012 at 10:40.

  5. #5
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    update: ive gotten things partially fixed. current screenshot is here: screenshot.png

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Start off by removing the code in red and adding the code in blue:

    Code:
    #wrapper4 {
    background: #323232;
    margin-top: 0px;
    padding: 0 0px;
    overflow: hidden;
    }
    
    
    #footer {
    margin-left: 0;  
    padding-top: 0px;
    padding-bottom: 20px;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    background-color: #252525;
    height: 8px;  
    width: 940px; 
    }
    
    
    #colophon {
    background: #353535; 
    border-top: 4px solid #353535;
    margin-top: -4px;
    overflow: hidden;
    padding: 0;
    }
    
    
    .footp {
    margin-left: 300px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px !important;
    text-align: center;
    }

  7. #7
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it worked. eggsalad!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Glad to hear it. (Eggs make me a bit ill, though, so keep the salad. )

  9. #9
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Glad to hear it. (Eggs make me a bit ill, though, so keep the salad. )
    Apologies - its my super nerd way of saying excellent

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tim@getdim View Post
    Apologies - its my super nerd way of saying excellent
    Heh heh, I figured that. (If I wrote in these forums like I speak at home—with all my quirky phrases—I'd be unintelligible ... )

  11. #11
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    understood. glad my N3RD-isms are not lost on others

  12. #12
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to re-hash an old issue, but for various reasons i am having to redo this site.
    The difference being i needed to recreate the entire site in wordpress, while maintaining the blog in its existing location.
    I started with an exact copy of the wp installation moved to a different folder.
    i copied the database and everything.

    but as im working on this i see that the problem i had with the body2 and footer sections is happening again.
    i went through and checked the stylesheet and the footer.php and everything is exactly the same as the original, so why are my div's not spanning the width of the screen as they should?

    ive gone over this thread and made sure everything in the stylesheet and the footer.php matched the instructions here and i still dont have my full width footer.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Can you provide a link to the page that's not working?

  14. #14
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It's the same issue as before, where the wrapper for the footer is stuck inside the main wrapper. Perhaps this is due to a validation error, so make sure to check that all the divs are in the right order and closed off appropriately.

  16. #16
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe im blind, but im not seeing it.
    from footer.php:

    Code:
     * @package WordPress
     * @subpackage Twenty_Ten
     * @since Twenty Ten 1.0
     */
    ?>
    
    
    
    
    
    	
    </div><!-- #main -->
    	
    </div><!-- #wrapper -->
    
    <div class="wrapper2">
    as you can see the main wrapper div ends before the custom wrappers i created start

    Also it doesnt make sense that anything would be changed. I copied the site EXACTLY. literally i drag-and-dropped all files from one folder to the other.

    can you point out where the wrapper is in the wrong place?

    ive sifted through this for hours and im not seeing whats out of place.

    as a last ditch effort i opened the original footer.php, copied everything, and pasted it into this file. still having the problem, which tells me it cant be in the footer.php file, because the original installation (same domain/blog) is fine.
    so i looked through the stylesheets, im not seeing any differences there either.

    where could the problem be?

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    At the moment, your footer is inside #wrapper4, which is inside the #wrapper, which in not full width. The validator reports that the wrapper div is not closed, so that's probably the problem. You'll be depressed to find that the validator reports 53+ errors on the page, but it's a good learning experience to check the validator.


Tags for this Thread

Bookmarks

Posting Permissions

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