WordPress.org

Ready to get started?Download WordPress

Forums

trying to get rid of the footer white rectangle at the bottom of page (10 posts)

  1. veenublue
    Member
    Posted 5 years ago #

    at http://www.gluesky.com/

    here is the footer code:

    /* ----------- Footer ----------- */
    
    #footer{
    	height:420px;
    	width:100%;
    	background-color:#FFFFFF;
    	background-image:url('img/footer.png');
    	background-repeat:repeat-x;
    	clear:both;
    	margin-bottom:0;
    	color:#4D5E7C;
    	}
    
    #footerimg{
    	width:1000px;
    	height:390px;
    	background-image:url('img/footer.png');
    	background-color:#FFFFFF;
    
    	}

    and in the footer file:

    <div id="footer">
    	<div id="footerimg">
    	</div>
        		<p><?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress <?php bloginfo('version'); ?></a> | <a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> | <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a> </a></p>
    </div>

    and where do I give credit to the theme I used as a starting point? The images are all mine, just the base theme I began with. Thanks!

  2. drewactual
    Member
    Posted 5 years ago #

    make:

    /* ----------- Footer ----------- */
    
    #footer{
    	height:420px;
    	width:100%;
    	background-color:#FFFFFF;
    	background-image:url('img/footer.png');
    	background-repeat:repeat-x;
    	clear:both;
    	margin-bottom:0;
    	color:#4D5E7C;
    	}
    
    #footerimg{
    	width:1000px;
    	height:390px;
    	background-image:url('img/footer.png');
    	background-color:#FFFFFF;
    
    	}

    this:

    /* ----------- Footer ----------- */
    
    #footer{
    	height:420px;
    	width:100%;
    	background-color:transparent;
    	background-image:url('img/footer.png');
    	background-repeat:repeat-x;
    	clear:both;
    	margin-bottom:0;
    	color:#4D5E7C;
            display:none;
    	}
    
    #footerimg{
    	width:1000px;
    	height:390px;
    	background-image:url('img/footer.png');
    	background-color:transparent;
    
    	}

    If you want to allow the credits, which is good of you to do so, remove the display:none; tag from #footer

  3. veenublue
    Member
    Posted 5 years ago #

    Yay! Thank you!

  4. veenublue
    Member
    Posted 5 years ago #

    Hmm, it made the entire bottom disappear. I would love to keep the watercolor and just get rid of the white bar. I would like the text to stay though, just over the watercolor. Any ideas?

  5. bekabug
    Member
    Posted 5 years ago #

    #footerimg{
    	height:5px;
    	}

    Take everything out of footerimg but height, as shown above.

    Does that look better?

  6. drewactual
    Member
    Posted 5 years ago #

    the trick is the transparent declaration for background-color...

    go back and delete the line display:none; and you will be golden... or kinda blue as it is... :-)

  7. bekabug
    Member
    Posted 5 years ago #

    If you look at the current live version of the site, it appears that this person has already removed display: none

    From what I am reading is that they don't want it all the way underneath the watercolor at the very bottom.

    Changing the height declaration brings it up above the repeating footer image.

    Also, why declare the footer.png as a background image twice?

  8. veenublue
    Member
    Posted 5 years ago #

    Ok I tried both, getting rid of the display:none didn't seem to do anything (the version up right now has it removed) and the block of what is now blue is still there. I tried changing it to just the height (as bekabug suggested) and the text moved up to the watercolor, but the block of blue is still at the bottom.

    The background image twice is left over from the theme I started with "strange-little-town" and since I am new to making a blog, I have no idea which to get rid of! :)

    Thank you for brainstorming, any other ideas? Should I look for some other code somewhere?

  9. bekabug
    Member
    Posted 5 years ago #

    I see what you're saying.

    Study this and see if you can make it work

    http://ryanfait.com/sticky-footer/

  10. bekabug
    Member
    Posted 5 years ago #

    You're going to want to delete the footerimg div from the theme itself. It is empty and it's only purpose is to push the text to the bottom of the page. Once you do that the footer text will place itself directly beneath your content and above the bottom watercolor.

    The wrapper class that this theme is using looks pretty useless so you might want to create your own "wrapper" and declare it it as an ID ...something like "full-wrapper"

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.