• Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
Demiscient

Pushing The Footer To The Bottom Of The Page

26 posts in this topic

I've tried multiple tutorials on the net. At least 8 of them (and that's quite a lot of different ways to accomplish something that shouldn't be this damned hard in the first place!) and they don't work for my web app. I don't know whether to post this in the jquery section, the css section, the html section, or all three, because I don't know where the problem is. http://endemicdesigns.com/ As you can see, the footer is still floating somewhere midway up the page (for me anyways, it depends how big your monitor is I guess). I am assuming none of the above fixes work because there is either something clashing in the jquery mobile css I have been given... or because the pages are all in one single html file (so that on mobile phones, when you click to go to the next page, it slides across to the next one instead of reloading). Either way, I don't know what the problem is and I don't know how to fix it. If anyone has developed a web app and successfully shoved the footer to the bottom of the page, I'd love to know how you did it because it's driving me batty! Demi

Share this post


Link to post
Share on other sites

Well from the looks of it, it could be because the content is not taking up the available height of the browser/screen. Try giving your content area(s) a fixed height and see if your footer is pushed down. If its pushed too down, you'll most likely get the vertical scroll bars on the side. Fixed height really isn't a good idea anyway because your content maybe bigger or may expand to get bigger than the specified height. But for testing purposes you can give it a try. However, if you know your height is going to be the same for all pages, meaning it won't expand to get bigger, than yeah you can make it a fixed height. Other than that, I don't know what it could be... :)

Edited by Don E

Share this post


Link to post
Share on other sites

Thanks Don, but unfortunately I can't have it a specific, fixed height because different phones will have larger resolutions etc =\

Share this post


Link to post
Share on other sites

There's a technique called "sticky footer." The idea is to have a wrapper around all your content, and have the footer outside of the wrapper. The wrapper is given 100% height (the <html> and <body> elements too) and the footer is given a negative top margin equal to its height. Inside the wrapper, right at the bottom, is an empty element that's equally as tall as the footer. HTML:

<div id="wrapper">  Content goes here.  <div class="padding"></div></div><div id="footer">Footer</div>

CSS:

html,body {  margin: 0;  padding: 0;  height: 100%;}#wrapper {  min-height: 100%;}#footer {  height: 80px;  margin-top: -80px;}.padding  {  height: 80px;}

Edited by Ingolme
changed height to min-height

Share this post


Link to post
Share on other sites

What? it does, I just tried something very similar with padding applied to wrapper container using FF firebug, and that worked fine.

Share this post


Link to post
Share on other sites

It may work on normal websites, but for some reason when I applied it to mine, it didn't? I'll re-upload the new code to the server. Maybe I'm doing something wrong :(

Share this post


Link to post
Share on other sites

I don't see any case where it wouldn't work, can you show an example of your implementation?

Share this post


Link to post
Share on other sites

Okay, I've re-uploaded it with the code added (but only applied it to the first page). I changed "footer" to "footing" in both the css and the html because I was worried there would be something conflicting in the other css file. edit: You can see it in action at the original address.

Edited by Demiscient

Share this post


Link to post
Share on other sites

the<div id="Persnickety"> is you wrapper element the <div id="footing"> must be outside the wrapper element closing div tag <div id="Persnickety">rest of elements</div><div id="footing"></div>

Share this post


Link to post
Share on other sites

I can't change the persnickety wrapper element to end before the footer because the site breaks and the footer vanishes--but somehow leaves a shadow in the place where it used to be that extends from midway up the page (roughly) to the very bottom of the page. edit: I reuploaded to show you what I mean.

Edited by Demiscient

Share this post


Link to post
Share on other sites

The problem is that you have "position: absolute" on your wrapper.

Share this post


Link to post
Share on other sites

Sorry but... I removed the positioning from the code, and the footer still isn't going down. Reuploaded. It's impossible, just say it and put me out of my misery :(

Share this post


Link to post
Share on other sites

When I removed the absolute positioning from your code, the footer was working just fine. The problem is that you've put the footer inside the "Persnickety" element again. Keep it outside.

Share this post


Link to post
Share on other sites

Okay. Okay. I've edited and reuploaded again. I feel like I'm unintentionally trolling you when I say this but I can't get it to work. I've closed off the Persnickety div before the footer. I've removed the absolute positioning. I've given the footer the id of "footing". And the CSS has remained the same (asides from removing the aboslute positioning).

Share this post


Link to post
Share on other sites

Your "Persnickety" element has a min-height in the style attribute that shouldn't be there. And, I also made a mistake in my earlier code. The #Persnickety element shouldn't have a height property, but a min-height property of 100% Adding overflow: hidden; to the footing will prevent the margins of the <h4> element from pushing the fotting further down than it should be.

Share this post


Link to post
Share on other sites

Reuploaded.. You should know I'm borderline between laughing my head off and bursting into tears here. Changing the property to min-height instead of height doesn't do anything different from what I can visibly percieve, regardless of whether I additionally use Firebug to disable the style.element's min-height of some random number. I can't get rid of it in the code because it's not actually written anywhere in the code.. edit: And the footer still isn't displaying.

Edited by Demiscient

Share this post


Link to post
Share on other sites

The footer text seems to be at the bottom now. All you need to do is add some background color and style to the #footing element.

Share this post


Link to post
Share on other sites

Oh jeez. The footer was perfectly styled before I started messing with code to push it down, is there not a way to just push it to the bottom without having to style it AGAIN? Not only that but there's still an everpresent shadow looming (literally, looming) that starts at the bottom of the content and stretches to the bottom of the page. Thanks for your help and I don't want to seem ungrateful that you've stayed here to guide me through your method, but I've already spent hours trying to interpret your instructions and I'm not going to on top of that spend hours trying to redo the footer styling from various different sections of the code in the three different CSS files that are styling the site, figure out why the gradient in the background is suddenly sitting on top of the bottom half of the screen, and try and get rid of the 10px high block of white nothingness that is now sitting at the bottom of my page.

Share this post


Link to post
Share on other sites

All you have to do is replace the temp "footing" element with original you had so the styling for that will return. you can force the overwriting of the min-height styling by using !important, and comment out the border, but the background image does not seem to tile correctly

#Persnickety {min-height: 100% !important;}.ui-body-b {background-image: url("bg.png"), -moz-linear-gradient(center top , #B7ADC4, #DFD7ED);/*border: 1px solid #C6C6C6;*/color: #333333;font-weight: normal;text-shadow: 0 1px 0 #FFFFFF;}

Share this post


Link to post
Share on other sites

It's okay, I'm done, seriously done, with trying to do it that way, I mean obviously it doesn't work, it just doesn't. In the past when I've pushed my footers down, it's never broken that badly and I'm sick of trying to fix all the errors that stop the footer from being pushed down. I'm trying to look for a way to do it with Javascript now, but all I see is sticky footers (i.e. the footers that stick to the bottom of the viewpanel like an everpresent toolbar or something), so I'm not having much luck. edit: If I continue to do it that way my stress levels will skyrocket so high that my hair will automatically jump out of their follicles on my head. I am already pretty close to reaching that level already. :sorry:

Edited by Demiscient

Share this post


Link to post
Share on other sites

the original #footer just requires margin-top:-46px #footer {margin-top:-46px}

Share this post


Link to post
Share on other sites

I believe I'd rather jump in a lake ( Filled with bears. And bees. And bears shooting bees out of their mouth as they chase after you. ) than have any more involvement with trying to fix what is a not-very-well-suited method to my circumstances (or rather my code's circumstances). Lol I'm very sorry but I'm not going to go near the last method with a ten foot barge pole. I don't know enough CSS to be able to fix the million bugs that pop up from that method. I'm probably just going to have to put up with it, unfortunately.

Share this post


Link to post
Share on other sites
It's okay, I'm done, seriously done, with trying to do it that way, I mean obviously it doesn't work, it just doesn't. In the past when I've pushed my footers down, it's never broken that badly and I'm sick of trying to fix all the errors that stop the footer from being pushed down. I'm trying to look for a way to do it with Javascript now, but all I see is sticky footers (i.e. the footers that stick to the bottom of the viewpanel like an everpresent toolbar or something), so I'm not having much luck. edit: If I continue to do it that way my stress levels will skyrocket so high that my hair will automatically jump out of their follicles on my head. I am already pretty close to reaching that level already. :sorry:
But! as i far as i know Javascript does not work for mobiles, unless that changed recently?

Share this post


Link to post
Share on other sites

edit: Omg blargh I just said something idiotic. No I have many lines of Javascript in the head of my html and it works fine on mobiles.

Edited by Demiscient

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now