Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Unable to see footer

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #191487
    Everton
    Participant

    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) &lt; $(window).height()) {
                $footer.css({
                    position: "absolute"
                }).animate({
                    top: footerTop
                })
            } else {
                $footer.css({
                    position: "static"
                })
            }
    
        }
    
        $(window)
                .scroll(positionFooter)
                .resize(positionFooter)
    
    });
    
    &lt;/script&gt;
    

    `

    <style>

    #footer {
    height: 100px;
    }

    </style>

    And in the <body> tags, I have this:
    &lt;div&gt;
    Sticky Footer
    &lt;/div&gt;

    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.

    #191490
    Paulie_D
    Member

    Can’t diagnose an image.

    Without ‘non-working’ code, it’s hard to comment. That said, your div does not have an id of footer.

    #191545
    Everton
    Participant

    Hello 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.

    #191554
    Paulie_D
    Member
    <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!.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.