Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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, 05:03 PM
kdawes01's Avatar
kdawes01
 
102 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 09:13 PM.
  #2  
Old Apr 11, 2010, 01: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, 02:01 PM
kdawes01's Avatar
kdawes01
 
102 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, 02: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, 02:27 PM
kdawes01's Avatar
kdawes01
 
102 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, 07: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



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


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


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