Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Post-Kicker, -Byline & -Footer (http://forum.bytesforall.com/forumdisplay.php?f=17)
-   -   Full browser width footer (http://forum.bytesforall.com/showthread.php?t=6517)

kdawes01 Mar 29, 2010 05:03 PM

Full browser width footer
 
I have seen some posts where someone wanted to have their footer extend to the edges of their browser, even if the body width is smaller.

I wanted to share a pretty quick and easy way to accomplish this.

Make a single pixel gif that is the same color of your footer and upload it to your site.

Go to the AT Options "HTML Inserts: Body Bottom" and add the following...

Code:

<div style="width:100%;height:60px; background-image:url(http://your-website-path.com/pixel.gif);margin-top:-60px;position:relative;z-index:-10;"></div>
This will place a filled in div below the footer that is the height of your footer.

The negative margin-top will pull it up even with the top of your footer. You may need to play with the height and margin a little to avoid running into the bottom of a sidebar.

The position and z-index will assure that the div block shows *under* your footer.

Hope that this can help someone!

Ken
The Web Mechanic

JFG Apr 11, 2010 01:51 PM

This is a great tip, thanks for sharing - but I can't get it to align well in Internet Explorer while it does in other browsers.

And while I'm typing something, I would just like to take this opportunity to declare my utter hatred for Internet Explorer. It always makes web design a pain in the you know what.

kdawes01 Apr 11, 2010 02:01 PM

Yeah... it can be a bit snarky... You may well need to change the height or the positioning 1px at a time to get it right..

JFG Apr 11, 2010 02:07 PM

Well, it aligns perfectly in Firefox, Chrome and Safari. If I change the height to get it right for Internet Explorer, it's going to mess things up in the other browers. You got it to align well in all these browsers?

kdawes01 Apr 11, 2010 02:27 PM

It's looked ok to me! Here's the url I used this on.

www.jutehome.com

Let me know!

Ken

JFG Apr 11, 2010 07:51 PM

I got it to work! I had the Stacounter plugin turned on which puts some invisible code in the footer but it was causing Internet Explorer to create an extra vertical space in there and that's why the code you supplied didn't seem to align properly in IE.

Thank you again for this tip it works very well!

And btw, that's a nice site you made there.

JFG


All times are GMT -6. The time now is 08:23 AM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.