Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Footers that Stay Visible at the Bottom of Your Page

Footers that Stay Visible at the Bottom of Your Page

Suppose you have a footer that you want to always be visible at the bottom of the browser window no matter what the user does on that page. Whether they scroll, or resize the browser - you want this footer to stay visible all the time. An example would be the bar across the bottom of most Facebook pages.

This is very similar to the _fixed Layer Naming Convention. However with _fixed, if your user resizes the browser, your _fixed layers will stay 'fixed' relative to the top and left sides of the browser - not the bottom. _footer makes layers that stay 'fixed' relative to the bottom of the browser.

Put things there that you want to be always immediately available to your users, but not attracting their immediate attention. Good things to put in an 'always visible' footer might be a search bar, copyright info, links to Terms of Service or Privacy Statements, maybe a set of links that serve as a site map, or maybe just your logo as a watermark.

It's very easy to do with psd2css Online. Just make a layer in your Photoshop file and name it with the _footer layer naming convention. That's it. That layer will now always stay exactly the same distance from the bottom of the browser as you designed it in the Photoshop file. As with any other psd2css Online layer, you can put other layers inside your _footer layer and they will stay with the footer exactly as you designed it.

One caveat however: Centering. Quite often (more often than not), you'll want your whole page to center in the browser. As you may know, you can get that to happen by making one big background layer (it can even be named with _empty) to serve as a 'container' for your page and name it with the _center Layer Naming Convention. One _center layer with everything else inside it will make a web page that centers in the browser ..... _except_ the _footer layers. This is the one exception. Don't worry, you can get the _footer layer to center too, but you have to give it it's own _center in it's layer name. This is the only situation where you need to use _center more than once for the entire page. The example below includes this rogue _center requirement so you can see what I mean.

This particular example has a number of new features in it besides _footer, so take a look at the other videos for those features too.

The page created in the video is available here:
The PSD file used to make the tutorial is here:

Tile/repeat footer image?

can we use "_footer-rx" the same way we use "_bodybg-rx" to have a footer image slice, repeat/tile across the bottom of the page/browser?

same behavior for image?

Is it possible to make an image accompany the footer when the page dimensions are changed? I have an image (separate of the footer - on right margin) and want it to move according to the footer. Just "relative" pos, or can I name that layer similarly?



I found it!

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content