Stick Footer Variation

[TreeTopStudio]

I’ve noticed a nice variation on the “stick” footer at the iStock photo website.

I like how the content scrolls behind the footer. It’s a nice touch.

Also see https://css-tricks.com/sticky-footer/ and https://css-tricks.com/snippets/css/sticky-footer/

Is there anyone with an analysis/opinion of the implementation? It looks like all CSS to me, but I’m not an expert.

[sliver37]

If you’re talking about the black toolbar that is fixed to the screen, that’s not actually the footer.

As for implimentation, it’s just a div placed last in the body element with a fixed position (scrolls with the browser) and has 25px left and right values to make it span across the screen regardless of resolution (and makes it appear centered).

HTML:

Login

Register

CSS:

#toolbar {

position: fixed; /* makes it stay with the browser while scrolling. */

z-index: 1000; /* keeps it above all other content. */

bottom: 0; /* obviously makes sure it sticks to the bottom */

left: 25px; /* same left and right values which causes it to stay "centered" */

right: 25px;

background: black;

height: 30px;

}

[TreeTopStudio]

Is it possible to specify a width and keep centered without left and right value? Like using margin: 0 auto; or does the fixed position and bottom: 0 disallow that?

[sliver37]

Off the top of my head, using positions (fixed / absolute) prevents your margin: 0 auto;

You may be able to do left: auto; right: auto; or left: 0; right: 0; I will have another look when I get back home.

EIther way someone will correct it.

It’s been a long time since I have needed to center in this way.

[Author]

Posts