Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages » Post-Kicker, -Byline & -Footer »

Full browser width footer


  #1  
Old Mar 29, 2010, 06:03 PM
kdawes01's Avatar
kdawes01
 
96 posts · May 2009
Missoula, MT
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

Last edited by kdawes01; Mar 29, 2010 at 10:13 PM.
  #2  
Old Apr 11, 2010, 02:51 PM
JFG
 
44 posts · Jul 2009
Canada
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.
  #3  
Old Apr 11, 2010, 03:01 PM
kdawes01's Avatar
kdawes01
 
96 posts · May 2009
Missoula, MT
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..
  #4  
Old Apr 11, 2010, 03:07 PM
JFG
 
44 posts · Jul 2009
Canada
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?
  #5  
Old Apr 11, 2010, 03:27 PM
kdawes01's Avatar
kdawes01
 
96 posts · May 2009
Missoula, MT
It's looked ok to me! Here's the url I used this on.

www.jutehome.com

Let me know!

Ken
  #6  
Old Apr 11, 2010, 08:51 PM
JFG
 
44 posts · Jul 2009
Canada
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

Bookmarks

Tags
footer width

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] footer as width as possible catastrophy Post-Kicker, -Byline & -Footer 2 Mar 9, 2010 03:00 AM
Search box disappeared when I added full width header JakeThePeg Header configuration & styling 5 Jan 26, 2010 04:10 AM
[SOLVED] Page menu bar gif image full width rcarbaugh Page & Category Menu Bars 4 Jan 13, 2010 01:43 PM
Want centred navigation to be full width Babs Page & Category Menu Bars 3 Jul 17, 2009 03:00 AM


All times are GMT -6. The time now is 05:35 AM.


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