Help with "sticky footer"

[ktbubster]

Ok, I apologize for the perhaps really fundamental question. I looked over stickyfooter stuff etc already, but I am really new to the actual coding here so i'm confused on how to implement it. I have a page set up, but I need to get the footer to stick to the bottom of the browser. As it stands I have a page or two in my website where the footer floats up because on larger monitors there isn't enough to keep it down.

I realize I could just add some space to force the footer down up to a certain size of monitor, but i'd prefer not to obviously, since that's quite clumsy. One would think i could just add a <div> between my last paragraph and footer that's 100% height so that it adjusts appropriately... or i would have hoped, but that's not how it works i guess. haha.

Anyway. Below is a link to a page with the code for my page.

I am at a loss on how to implement the correct code to make the footer stick. Can SOMEONE please help me and tell me what i need to do and where?

And PLEASE don't flame if you are going to tell me that people pay you for a reason, I am a designer myself and I understand no spec and all that, but I really could use some advice and i think this is a really easy fix/implementation for someone who knows.

Code located here: http://www.detailedeventsmanagement.com/code.html

and no, it's not for that website, i just uploaded it to another website that I was just finishing temporarily.

Thanks so much in advance!

<div class="thrColHyb2"> is the section (footer section) that I need to stick. The css is at the head of the document.

 

[ktbubster]

I'm still trying to figure this out. Can anyone help me?

 

[angelwatt]

I'm still trying to figure this out. Can anyone help me?

I think you'll find this thread relevant.

Having the page live would be much more helpful than just a page showing the code. A number of us use browser add-ons that lets us editing live pages and see how changes will effect the page. We can't do this with a page of code. We'd have to create a new document and copy and paste it in and that's more hassle than most will be up for, myself included.

Using a table for layout will also increase the difficulty here. They're just too messy.

 

[webmunki]

I think this might be what you are looking for:

http://limpid.nl/lab/css/fixed/footer

There were more recent ones - at http://www.cssplay.co.uk/ but for some reason the site is either down or not their any longer.

 

[eponym]

You're using position: absolute.

You need to use position: fixed.

 

[ktbubster]

@ webmunki - thanks for the link, however i'm not looking for the footer to always be visible like the solutions you gave me, I am looking for it to be visible when you scroll down and then stay at the bottom of the page (ie: scrolling stops when it gets to the footer) ... as it stands now, it floats up with space below it when i get to the bottom of the page. I want that space gone, however thanks for that link as I might need that solution at another time.

@ epony - I tried that but it doesn't seem to change anything! I wish it were that simple!

@ all - there is a "live" version of the site at http://www.detailedeventsmanagement.com/justabite/contact this page is easier to see since it's a shorter page.

it's the home page, and the images aren't active pngs (the links don't work, i just put in the png images instead of the fireworks html for the time being to lay it out) ... note how the footer floats up if the window is big enough? it's much easier to see if your monitor is larger. I want the footer to always be the furthest to the bottom, with no extra space below it. (in this version the footer is that whole bottom chunk, however in the new version that isn't up yet the footer is just the purple bar at the bottom - but the idea should be the same whatever the image) - i'll put the newest version up when I get home today.

 

[eponym]

Oh, sorry, I should've looked at the markup. I just did a scan and saw that there was no position: fixed.

You can't do a fixed footer with the way your page is laid out. You're using a table for layout, which restricts what you can do (and is a no-no in general, but that's another topic).

Your "footer" is just a row in the table. It's part of a larger whole. If you want to separate your footer and fix it to the bottom (position: fixed; bottom: 0px, you need to actually separate it. It needs to be another table altogether (or better yet, content in a div).

Edit: ignore that ^

I see now you're just concerned about the space that appears below the footer because the viewport is taller than the content of the page. That's a tricky issue. You would need to write a javascript that checked the viewport's height, compared it to the content's, and then manually increased a container in there like the content cell (or, if the footer wasn't in the same table, boosted the bottom margin to separate them) when the content was shorter.

 

[ktbubster]

I don't understand what you mean by my footer is a row in the table. It isn't. I only have tables in front of my background for the sets of text. My footer is still a separate DIV with a table on top for the text?

I revised the layout though and separated some things, so here's the new one.

But yes, I don't want just a fixed footer that I can always see, like I said I want to see at the end and always be the lowest point.

http://www.detailedeventsmanagement.com/justabite/contact.html

- What is a better way to put the text on top of a background image without tables? I asked this question in another thread that someone had started... but I am definitely curious. I'm using Dreamweaver. I'm much more visual than I am a coder by far.

 

[angelwatt]

What is a better way to put the text on top of a background image without tables? I asked this question in another thread that someone had started... but I am definitely curious. I'm using Dreamweaver. I'm much more visual than I am a coder by far.

You just put HTML in your footer. You already have a table there, using non-table HTML for layout there is just as easy.

As far as the sticky footer, you'll likely need to use JavaScript to handle its positioning for cases when the page is shorter than the browser window. I don't recall ever seeing this done purely with CSS.

 

[ktbubster]

@angelwatt

but how would I lay this out, say, visually in dreamweaver, instead of inserting a table, I instert... ? what to lay this out? As far as making sure the text stays in paragraphs in certain areas etc? Like I want 3 boxes for instance across the image with text?

And could you show me a place that may have this implemented with javascript so I could give it a look?

 

[angelwatt]

@angelwatt

but how would I lay this out, say, visually in dreamweaver

I don't use DreamWeaver, I hand code everything. Your footer just has a list of links for the most part. Here's a number of examples of making a <UL> list horizontal using CSS. You could make the separate link off to the right have a separate class on its li tag and style it differently to push it off to the right, or you could make a second list for it and use CSS to position it.

I don't have the time to hunt a specific JavaScript example or to provide the code, but it would similar to Apple's product page when customizing a Mac purchase. The sidebar has the current options and price in a floating piece that follows you down the page, but also only scrolls so far up the page.

 

[webmunki]

@angelwatt

but how would I lay this out, say, visually in dreamweaver, instead of inserting a table, I insert... ?

I dont have a specific solution for you but more a suggestion.

You would be better not using tables at all - tables aren't really for layout for the exact reasons you are experiencing. You would want to use div's which you can float: (left or right) or place very specifically and can tell to have very specific sizes. Additionally when you come to make changes to the layout or design you could do so with your style sheet, which should not be in the document but separate.

I also write my code by hand, in BBEdit - much easier. I have not used dreamweaver for many years but it was frustrations caused by dreamweaver that made me make that move.

I would really recommend though that you pick up a copy of Head First HTML (With XHTML and CSS) from O'Reilly, its a really good book that can teach you quickly and interestingly how to control both XHTML and CSS - its not difficult but it covers a lot of ground.

(edit: Additionally have you ever looked at the CSS Zen Garden: http://www.csszengarden.com/ it might inspire you!)

 

[ktbubster]

thanks webmunki.

I tried to use divs but I was lost on how to get them to move with the background images correctly (ie, when the window was resized they would stay where i put them instead of moving with the divs/backgrounds behind them.

I feel like there should be an easier way to get them to "stick" to position.

I know this is a silly question but what does "float left" or right mean? what about sites with centered layouts?

boy do I wish there were better tools to do this sorta stuff all visually now, it seems like, with all the tech there is today, they would have had better solutions for this by now. I suppose one can learn coding and then dream of a day when they finally get a program that can create usable code.

 

[angelwatt]

I know this is a silly question but what does "float left" or right mean?

It's CSS in the literal sense.

div {
 float: left; /* or float: right;*/
}

I've never seen any program does a good job of automatically coding your HTML and CSS from a visual interface. The problem is that there are just too many ways to accomplish the same thing with CSS and it's hard to convey directly some of the effects you may want to do.

 

[ktbubster]

It's CSS in the literal sense.

div {
 float: left; /* or float: right;*/
}

.

I knew that. I'm sorry, I meant, what does it actually do to what you float?

 

[angelwatt]

I knew that. I'm sorry, I meant, what does it actually do to what you float?

Ah, gotcha. W3 Schools does a good job describing floating, so I'll start you with them and if you have any follow ups let us know.