My Easy way to make "Sticky Footers" with CSS. - Page 2 - GoFuckYourself.com

CYF · 10-20-2010, 04:53 PM

Quote:

Originally Posted by fris

here is a good example

http://fris.net/labs/sticky/

very cool

rowan · 10-20-2010, 04:58 PM

Please consider mobile users when using sticky footers!!! My screen res is 800x400something but since it's so small the text generally needs to be zoomed in a bit to be able to read it... and of course this zooms the footer as well. By then a 50px high footer is taking up 20% of the screen.

Remember to include some way to close or "minimise" the footer!

BestXXXPorn · 10-20-2010, 05:38 PM

http://girls.bestxxxporn.com

You may like my Social Bar :P Get's a lot more interesting with an account once you add favorites in; has infinite ajax scrolling, all that fun stuff :P Key binds also work to close modal windows and toggle the bar itself. If you don't feel like signing up for an account just change the drop down to Support and you can view the FAQ to see what the modal windows look like...

I still need to hack in the iPad sticky footer support though... iPhone/Mobile users will get a different subdomain when I get a chance :P

sortie · 10-20-2010, 05:56 PM

Quote:

Originally Posted by rowan

Please consider mobile users when using sticky footers!!! My screen res is 800x400something but since it's so small the text generally needs to be zoomed in a bit to be able to read it... and of course this zooms the footer as well. By then a 50px high footer is taking up 20% of the screen.

Remember to include some way to close or "minimise" the footer!

Maybe you didn't continue in the thread because I eventually add code
to hide the footer. The size of the footer is up to you in the html.
Make the Div tag the size you want.

<div style="width:100px;height:20px">

Why · 10-20-2010, 06:10 PM

nice write up, thanks sortie!

i too agree your way is much better then Jquery, unless youre already heavily using it.

Zorgman · 10-20-2010, 06:30 PM

Sortie, I was just trying to say that this doesn't work on an iphone or touch because it scrolls with the page. Safari doesn't support position:fixed; code.

sortie · 10-20-2010, 06:34 PM

Quote:

Originally Posted by tonyparra

Fresh off bannage with already more rep than me

Einstein's theory of relativity........

The ban hammer is strong!

EDIT!!!!!!!!!!!!

I just googled up Einstein's theory of relativity and found I've been wrong
for all these years!

"For every action there is an opposite and equal reaction"

Is not Einstein's theory of relativity, instead it's Newton's laws of motion!

http://en.wikipedia.org/wiki/Newton%27s_laws_of_motion

Man!!!!

Without your post, maybe I would have continued to think that all my life.
I wish I could "rep" you for that, but I'm not eligible yet.
I will rep you as soon as I can.

So, as for rep is concerned, Newton's laws of motion does apply as
your rep points from me are in motion.

sortie · 10-20-2010, 07:19 PM

Quote:

Originally Posted by Zorgman

Sortie, I was just trying to say that this doesn't work on an iphone or touch because it scrolls with the page. Safari doesn't support position:fixed; code.

I don't have an iphone but I installed Safari on my PC and my code is working
that way.

This was the final page of my example and it works on Safari for me.

http://ooaz.com/gfy/gfytest003.html

Post your code.

Amputate Your Head · 10-20-2010, 07:21 PM

good stuff here, thanks sortie

sortie · 10-20-2010, 07:36 PM

Quote:

Originally Posted by Dirty Dane

div id with position:absolute works too.

In CSS:

body {margin: 0;}
#bottom {position:absolute; width:100%; bottom:0;}

In HTML:

<div id="bottom"> your spam here </div>

The absolute will ignore other elements.

Please don't post code that doesn't work and say it does.

Thanks

Here is the same page on two links except the second link uses position:absolute.

http://ooaz.com/gfy/gfytest003.html

http://ooaz.com/gfy/gfytest004.html Wrong!

"absolute" is relative to the first non-static element on the webpage.
Meaning that it stays at the same position on the page as the page scrolls.

"fixed" is relative to the window which never scrolls so the footer never moves either.

.

sortie · 10-20-2010, 08:39 PM

Quote:

Originally Posted by Amputate Your Head

good stuff here, thanks sortie

Your welcome.

https://youtube.com/watch?v=gPGmrSPpxcU

Zorgman · 10-20-2010, 09:58 PM

Quote:

Originally Posted by sortie

I don't have an iphone but I installed Safari on my PC and my code is working
that way.

This was the final page of my example and it works on Safari for me.

http://ooaz.com/gfy/gfytest003.html

Post your code.

Safari might work on the PC/Mac but not on the iphone/touch device. I think they are limited on the mobile devices to what they can do considering they have scroll left right, pinch to zoom etc.

Anyone try this page above on a android browser. Post your results here.

sortie · 10-20-2010, 10:18 PM

Quote:

Originally Posted by Zorgman

Safari might work on the PC/Mac but not on the iphone/touch device. I think they are limited on the mobile devices to what they can do considering they have scroll left right, pinch to zoom etc.

Anyone try this page above on a android browser. Post your results here.

The mobile page has to have different values set than in my example.

But anyway, since you will not post the code this discussion of what is
wrong is a waste of time.

I can't figure it out by making wild guesses.

sortie · 10-21-2010, 10:19 PM

I think I should work up a really nice footer that's easy to customize.

What features do most people want in a sticky footer?

Thanks

potter · 10-25-2010, 08:45 AM

Unbelievable, cannot believe you ripped on my post saying to use jquery. You are seriously behind the times man. The shit you are posting is like a retro trip back to the early nineties.

Anyway, the reason I posted is because you made the claim your code was "less bloated" than the cleaner method I replied with. When actually the code I stated would be LESS than what you posted. Because webmasters can hotlink the jquery library from jquery.com or from google.com (both provide APIs and library archives). Which means (unlike your post saying it would COST webmasters to use my code), it would "COST" webmasters less to use the jquery method instead because the only code needed in their source would be far less than the bloated stuff you suggested.

Seriously, ripping on jquery? Who are you, and how do you call yourself a webmaster?

Dirty Dane · 10-25-2010, 08:57 AM

Quote:

Originally Posted by sortie

Please don't post code that doesn't work and say it does.

Thanks

Here is the same page on two links except the second link uses position:absolute.

http://ooaz.com/gfy/gfytest003.html

http://ooaz.com/gfy/gfytest004.html Wrong!

"absolute" is relative to the first non-static element on the webpage.
Meaning that it stays at the same position on the page as the page scrolls.

"fixed" is relative to the window which never scrolls so the footer never moves either.

.

No? It works fine for me: http://camelfart.com/sticky.html

sortie · 10-25-2010, 09:59 AM

georgeyw · 10-25-2010, 02:26 PM

Great info here Sortie - thanks

@ Potter - kill yourself dickhead

Zorgman · 10-25-2010, 06:20 PM

Quote:

Originally Posted by sortie

The mobile page has to have different values set than in my example.

But anyway, since you will not post the code this discussion of what is
wrong is a waste of time.

I can't figure it out by making wild guesses.

I didn't post the code because I was using your code. I made no changes.

sortie · 10-25-2010, 08:09 PM

Quote:

Originally Posted by Zorgman

I didn't post the code because I was using your code. I made no changes.

Iphone has a problem with "position:fixed" because it uses a "view port".
The w3 specs say that the position should be fixed to the view port but
safari iphone doesn't actually do that.

http://www.w3.org/TR/CSS21/visuren.html#choose-position

Quote:

fixed:
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example).

Here is a Iphone work around :

http://doctyper.com/archives/200808/...mobile-safari/

Have fun.

rogueteens · 11-12-2010, 10:48 AM

i've just added this to a network

thanks again

10-20-2010, 05:38 PM	#53
BestXXXPorn Confirmed User Join Date: Jun 2009 Location: Asheville, NC Posts: 2,277	http://girls.bestxxxporn.com You may like my Social Bar :P Get's a lot more interesting with an account once you add favorites in; has infinite ajax scrolling, all that fun stuff :P Key binds also work to close modal windows and toggle the bar itself. If you don't feel like signing up for an account just change the drop down to Support and you can view the FAQ to see what the modal windows look like... I still need to hack in the iPad sticky footer support though... iPhone/Mobile users will get a different subdomain when I get a chance :P __________________ ICQ: 258-202-811 \| Email: eric{at}bestxxxporn.com Last edited by BestXXXPorn; 10-20-2010 at 05:44 PM..

10-20-2010, 06:30 PM	#56
Zorgman Confirmed User Join Date: Aug 2002 Location: Sydney, Australia Posts: 6,103	Sortie, I was just trying to say that this doesn't work on an iphone or touch because it scrolls with the page. Safari doesn't support position:fixed; code. __________________ ---

10-20-2010, 07:21 PM	#59
Amputate Your Head There can be only one Industry Role: Join Date: Aug 2001 Location: Somewhere else Posts: 39,075	good stuff here, thanks sortie __________________ SIG TOO BIG

10-21-2010, 10:19 PM	#64
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	I think I should work up a really nice footer that's easy to customize. What features do most people want in a sticky footer? Thanks __________________

10-25-2010, 08:45 AM	#65
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	Unbelievable, cannot believe you ripped on my post saying to use jquery. You are seriously behind the times man. The shit you are posting is like a retro trip back to the early nineties. Anyway, the reason I posted is because you made the claim your code was "less bloated" than the cleaner method I replied with. When actually the code I stated would be LESS than what you posted. Because webmasters can hotlink the jquery library from jquery.com or from google.com (both provide APIs and library archives). Which means (unlike your post saying it would COST webmasters to use my code), it would "COST" webmasters less to use the jquery method instead because the only code needed in their source would be far less than the bloated stuff you suggested. Seriously, ripping on jquery? Who are you, and how do you call yourself a webmaster? __________________

10-20-2010, 04:58 PM	#52
rowan Too lazy to set a custom title Join Date: Mar 2002 Location: Australia Posts: 17,393	Please consider mobile users when using sticky footers!!! My screen res is 800x400something but since it's so small the text generally needs to be zoomed in a bit to be able to read it... and of course this zooms the footer as well. By then a 50px high footer is taking up 20% of the screen. Remember to include some way to close or "minimise" the footer!

10-20-2010, 06:10 PM	#55
Why MFBA Industry Role: Join Date: Mar 2003 Location: PNW Posts: 7,230	nice write up, thanks sortie! i too agree your way is much better then Jquery, unless youre already heavily using it.

10-25-2010, 09:59 AM	#67
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	__________________

10-25-2010, 02:26 PM	#68
georgeyw 58008 53773 Industry Role: Join Date: Jul 2005 Location: Australia Posts: 9,864	Great info here Sortie - thanks @ Potter - kill yourself dickhead

11-12-2010, 10:48 AM	#71
rogueteens So fucking bland Industry Role: Join Date: Jul 2006 Location: England Posts: 8,005	i've just added this to a network thanks again __________________ Free traffic and backlinks from one of the fastest growing adult pinsites on the net - SAUCY PICTURES! Easily my best performing webcam sponsor - CLICK HERE!!