SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 75
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 34 - fix this...

    CSS - Test Your CSS Skills Number 34 : Quiz now ended - solutions in post #45

    The last quiz saw us combating an awkward bug in IE to provide a real life solution and in keeping with that idea this quiz is another real life question that was asked recently on the forums.

    This quiz is more a straight forward coding task although it does have some complications that will catch you out

    Your task is to create a centred "Fixed footer" using position:fixed that works in IE7 and above. (IE6 doesn't understand position:fixed so we won't bother with coding for that although in real life examples you would probably give IE6 alternative code to have just a normal footer (although there are a number of hacks to give it a fixed footer if needed).

    Although a fixed footer is relatively easy to do the task is complicated by the fact that there is a "back to top" link on the right side of this fixed footer that needs to remain in view when the screensize is smaller than the container.

    If you look at the attachment (fixed.png) you will see a screenshot of a fixed footer that works well at large screen sizes. However when the page is resized smaller than the main container we need to use the horizontal scrollbar to view the content that is hidden off screen.

    That works fine for the normal content but the "back to top" link on the fixed footer stays hidden off screen because you can't actually scroll a fixed element. This is one of the major drawbacks of fixed positioning because content that is outside the viewport is unreachable via scrollbars.

    Your task is to make that "back to top link" that is at the right of the fixed footer stay in view as the page is resized smaller and as shown in the screenshot.

    I will provide the html for a basic page with a normal footer but you can change the CSS and html for the footer element only. None of the CSS for the rest of the page should be changed as it doesn't need changing.

    You can change the footer html and css as much as you like or use your own but it must work the same as shown in the screenshot and as already described.

    The normal content above the footer is a 910px pixel width centred layout and must remain as such.

    Here is the basic code for a normal footer so you don't have to make your own:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        height:100&#37;;
        margin:0;
        padding:0;
    }
    #outer {
        width:910px;
        min-height:100%;
        border-left:5px solid #006f48;
        border-right:5px solid #006f48;
        background:#00ab6f;
        padding:0 10px;
        margin:auto;
        color:#fff;
    }
    h1, p {
        margin:0 0 2em;
        line-height:1.3;
    }
    * html #outer {
        height:100%
    }
    #fixedfoot {
        width:930px;
        height:45px;
        padding:5px 10px 0;
        background:#20805e;
        margin:0 auto;
        border:5px solid #000;
        font-size:93%;
        color:#fff;
    }
    a.back {
        float:right;
        background:#006f48;
        padding:5px;
        height:60px;
        border:2px solid silver;
        margin:-25px 20px 0 0;
    }
    #fixedfoot a {
        color:#fff
    }
    p.last {
        margin:0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <h1>Fixed footer</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
        <p class="last">end</p>
    </div>
    <div id="fixedfoot">
            <p><a class="back" href="#">Back to top </a> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
    </div>
    </body>
    </html>
    So you have basically two tasks here:

    1) Make a fixed footer that sits at the bottom of the viewport and matches the centred page above.

    2) Ensure that the right placed "back to top" link is visible as the page is resized smaller than the container.

    If anything is unclear then just shout and I'll try to clarify. (I may need to plug loopholes if I have forgotton anything so I apologise in advance.)

    Remember this is just for fun and there are no prizes.

    Use Valid CSS and html and must work in IE7 and above using the same code (no need for hacks at all).


    Don't post your answers in this thread but PM with the details instead so that all can have a go.

    Have fun.


    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Is this just IE7 or modern browsers as well? You don't specify.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I did not expect for a new quiz so soon! I thought a day or 2...xD


    IE7 and above includes IE8
    IE8 = more or less the same as modern browsers.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Solution sent
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Is this just IE7 or modern browsers as well? You don't specify.
    It's for IE7 and all other modern browsers - basically not IE6.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Solution sent
    Yes that was quick - well done you're the first correct entry

  7. #7
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    damn, can't work on it right now... got this brand new graphics card to install and a broken client's pc to fix.
    I will give it a try later today or tomorrow max.

  8. #8
    SitePoint Zealot cools_sonu's Avatar
    Join Date
    Jan 2010
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also facing the similar problem in my website.

    So, I'm also trying the same. Hence I'm eagerly waiting for the solution of this problem..

    cheers now hoping I'l get some solution to fix footer problem

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yes - finally - got it! Jeese - that was a brain buster. Submitted answer.

  10. #10
    SitePoint Enthusiast Mr.Alexander's Avatar
    Join Date
    Apr 2010
    Location
    Toronto, Canada
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the challenge, hopefully I got it right

    Mr. Alexander

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Thanks Eric that was basically the right answer - well done.

    Mr Alexander that is also basically the right answer but just needs a little tweak for IE7

    Well done to both of you - good work

  12. #12
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha..this is weird, the "back to top" link doesnt disappear from IE8 in my com. I'd sized it down a lot.
    I tried IE7 using IETester, same...

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Definitely going to try this.

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by resting View Post
    haha..this is weird, the "back to top" link doesnt disappear from IE8 in my com. I'd sized it down a lot.
    I tried IE7 using IETester, same...
    Same as this guy

  15. #15
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Submitted my answer between meetings. I hope I got it right. ;-)

    -Joe

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I submitted an answer but it seems too simple. I must have missed something..

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mark,

    That works in IE7 - well done

    It does need a little tweak in Firefox though to be perfect.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Joe (etherworld) - you have the fixed foooter working fine but the back to top link is no moving into position - yet Good try but keep trying

    I have a correct entry form Kravvitz that is working as expected and using slightly different (although more complicated) methods than others. Good work

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    You can change the footer html and css as much as you like
    Does the back to top HTML have to stay inside the fixedfoot div?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rainmakr View Post
    Does the back to top HTML have to stay inside the fixedfoot div?
    You can change the footer html as much as you like and in any format you want. It can be separate elements if that works for you.

    Just don't bother changing any of the html above the footer as you don't need to bother.

    There are a couple of ways to do this and some may even involve not changing the html at all perhaps - or perhaps I'm lying

  21. #21
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It does need a little tweak in Firefox though to be perfect.
    I've made it work in other browsers now, Opera doesn't re-position the footer when you drag the window though - a refresh moves the back to top link to where it should be?

    Is there a way to force a repaint on resize in Opera?

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    There is Javascript to force repaint, although (I haven't looked at the code) could one of the sticky footer fixes that we used fix it? (Sorry if that doesn't make sense)

    The fix I used <snip> and was quite easy to impliment. No refresh problems ocured (not that I tested in Opera extensively)
    Last edited by RyanReese; Apr 9, 2010 at 17:53. Reason: Just better to edit that part out ;)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    wasn't the opera refresh fix something like

    #element:after {
    content:"";
    float:left;
    width:0;
    height:100&#37;;
    overflow:hidden;
    }

    although im thinking that this would be better:
    #element:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    visibility:hidden;
    }
    but haven't tested that.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've had a few more entries but they need a bit more work so keep trying

    Quote Originally Posted by markbrown4
    I've made it work in other browsers now,
    Thanks Mark that works fine now - Well done.

    Quote Originally Posted by markbrown4 View Post
    I've made it work in other browsers now, Opera doesn't re-position the footer when you drag the window though - a refresh moves the back to top link to where it should be?

    Is there a way to force a repaint on resize in Opera?
    I didn't notice anything strange in opera?

    Which version and what do you have to do to get it to do wrong.

    Opera always has had a problem with the 100&#37; height aspect but I didn't notice anything with the fixed footer in opera 10.5.

  25. #25
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I came across the same type of bug in IE8 messing with this. IE won't keep the box at the bottom of the browser window (when dragged up/down) if it's in a position relative container.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    
    <div style="position:relative">
    <div style="position:fixed; bottom:0; height:200px; width:200px; background:red;"></div>
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •