- This topic is empty.
-
AuthorPosts
-
December 23, 2014 at 7:19 am #191487EvertonParticipant
Hello
I am trying to follow the CSS Tricks tutorial here:
https://css-tricks.com/snippets/jquery/jquery-sticky-footer/
and have the following just as in the tutorial: these in my <head> tags:
<script>
` // Window load event used just in case window height is dependant upon images
$(window).bind(“load”, function () {var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); function positionFooter() { footerHeight = $footer.height(); footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px"; if (($(document.body).height() + footerHeight) < $(window).height()) { $footer.css({ position: "absolute" }).animate({ top: footerTop }) } else { $footer.css({ position: "static" }) } } $(window) .scroll(positionFooter) .resize(positionFooter) }); </script>
`
<style>
#footer {
height: 100px;
}</style>
And in the <body> tags, I have this:
<div>
Sticky Footer
</div>
This is part of a ASP.NET project still to be compiled so it is not online, but I can see nothing on the page. I can make out the words ‘Sticky Footer’, so something is getting to page, but it’s a dark text on a dark background. However, there is definitely no footer there. Here is a screenshot of what I can see:http://www.bayingwolf.com/CSSTricks.jpg
Thanks for any advice.
December 23, 2014 at 7:23 am #191490Paulie_DMemberCan’t diagnose an image.
Without ‘non-working’ code, it’s hard to comment. That said, your div does not have an id of footer.
December 23, 2014 at 8:25 pm #191545EvertonParticipantHello Paulie_D
In my <style> tags, I have
“`#footer {
height: 100px;
}<pre><code>and in the HTML:
</code></pre>
<div>
Sticky Footer
</div>
“`What I have realised with footers is that it’s best to set them out at the very beginning of your Web page project!
Thanks for your reply.
December 24, 2014 at 2:48 am #191554Paulie_DMember<div> Sticky Footer </div>
My point is you’re strying to style an ID (#footer) and your HTML does not contain that ID
<div id="footer"> Sticky Footer </div>
What I have realised with footers is that it’s best to set them out at the very beginning of your Web page project!
Not at all….they should be (ideally) at the end of your HTML. Just imagine as (as does happen) your CSS or JS does not load.
Your footer would be at the top of the page.
Use the proper source order wherever possible and then style it with CSS. This can involve visually moving things around the page with CSS or JS…but the source order is important!.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.