SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky footer vs Supersized

    Hi all,

    I'm trying to create a site based on the amazing sticky footer post by Paul O'B elsewhere on the forums. It works great, I must say.

    However, in this case the client would like a rotating loop of background images that span the full width and height of the screen. In order to do that, I've googled around and found a jQuery based script called Supersized. This works great as well, and removing the controls and captions was easy.

    Combining these two however, leaves me puzzled. It either shows 50% screen width with the sticky-footer code and 50% of the width as a slideshow, or just shows the background images ABOVE the other content in stead of underneath. In IE, it even breaks to the point where the browser offers me a horizontal scroll bar to reveal the sticky footer content.

    I've tried changing all kinds of CSS and HTML in order to fix this, no results however. I just need the Supersized script to rotate and fade the images in the background, with the sticky footer content laying on top of it all.

    The (combined) CSS:
    Code CSS:
    * {
        margin:0;
        padding:0
    }
     
    html, body {
        height:100%;
        text-align:center;
        /* overflow:hidden;  Needed to eliminate scrollbars*/
        background:#000000;
    }
     
    #outer {
        width:100%;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
        text-align:left;
    }
     
    * html #outer {
        height:100%
    }
     
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
     
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
     
    #content{
        height:100px;
        width:100%;
        z-index: 3;
        position:absolute;
    }
     
    /* background plugin */
    #contentframe{
                overflow: hidden;
                border-top:solid 1px #4F4F4F;
                border-bottom:1px solid #000;
                height: 100%;
                text-align:left;
                z-index: 3;
            }
            #slidecounter{
                float:left;
                color:#4F4F4F;
                font:50px "Helvetica Neue", Arial, sans-serif;
                font-weight:bold;
                margin:18px 20px;    
            }
            #slidecaption{
                overflow: hidden;
                float:left;
                color:#FFF;
                font:26px "Helvetica Neue", Arial, sans-serif;
                font-weight:bold;
                margin:33px 0;
            }
            /*Supersized Stamp*/
            .stamp{
                float: right;
                margin: 25px 20px 0 0;
            }
            /*Supersize Plugin Styles*/
            #navigation{
                background: url('images/navbg.gif') no-repeat;
                float: right;
                margin:22px 20px 0 0;
            }
            #loading {
                position: absolute;
                top: 49.5%; 
                left: 49.5%;
                z-index: 3;
                width: 24px; 
                height: 24px;
                text-indent: -999em;
                background-image: url(images/progress.gif);
            }
            #supersize{
                position:fixed;
            }
            #supersize img, #supersize a{
                height:100%;
                width:100%;
                position:absolute;
                z-index: 0;
            }
            #supersize .prevslide, #supersize .prevslide img{
                z-index: 1;
            }
            #supersize .activeslide, #supersize .activeslide img{
                z-index: 2;
            }
     
    /* top of page */
    #header {
        background:red;
        border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
     
    /* content part of page */
    img{
        border:none;
    }
     
    h1, h2, p {
        padding:0 10px;
    }
     
    /* bottom of page */
    #footer {
        background:red;
        width:100%;
        margin:auto;
        height:40px;/* must match negative margin of #outer */
        clear:both;
    }

    The (combined) HTML:

    Code HTML4Strict:
    <!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=iso-8859-1" />
    <title>Mathieu Bassez</title>
    <link rel="stylesheet" type="text/css" href="bassez.css" />
     
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
        <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
        <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
        <script type="text/javascript" src="http://fileserv.twizted.be/mathieubassez/supersized.2.0.js"></script>
        <script type="text/javascript">  
            $(function(){
                $.fn.supersized.options = {  
                    startwidth: 640,  
                    startheight: 480,
                    vertical_center: 1,
                    slideshow: 1,
                    navigation: 0,
                    transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                    pause_hover: 0,
                    slide_counter: 0,
                    slide_captions: 0,
                    slide_interval: 6000  
                };
                $('#supersize').supersized(); 
            });
        </script>
     
    </head>
     
    <body>
    <div id="loading">&nbsp;</div>
     
    <div id="content">
     
     
    <div id="outer">
     
    <!-- background plugin -->
    <div id="supersize">
        <a href="#"><img src="images/bird.jpg"/></a>
        <a href="#"><img src="images/paradise.jpg"/></a>
        <a href="#"><img src="images/snake.jpg"/></a>
    </div>
     
     
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
     
        <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
        <p>test</p>
        <p>test</p>
        <p>test</p>
     
    </div>
     
    <div id="footer">
        <p>Footer</p>
    </div>
     
    </div>
    </body>
    </html>

    Does anyone know what causes this? Could this have anything to do with the positioning in CSS? Why does the z-index seem to have no effect?

    Thanks in advance for your help,
    Stef
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

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

    I assume want that image behind all your content and to have a normal sticky footer page in front.

    I'll have a look for you in a minute but it might be awkward if that script is changing things. I'll get back to you

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I assume want that image behind all your content and to have a normal sticky footer page in front.
    Exactly, just the background. The rest is fine like you coded it.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This seems to work.

    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=iso-8859-1" />
    <title>Mathieu Bassez</title>
    <link rel="stylesheet" type="text/css" href="bassez.css" />
    <style>
    /* Mathieu Bassez CSS */
    /* version v 1.0 */
    /* september 2010 */
    /* created by Stef Verbeeck - Twizted Imagebuilding */
    
    * {
        margin:0;
        padding:0
    }
    html, body {
        height:100&#37;;
        /* overflow:hidden;  Needed to eliminate scrollbars*/
        background: #000000;
        color: #ffffff;
    }
    #outer {
        width:100%;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
        text-align:left;
        position:relative;
        z-index:4;
    }
    * html #outer {
        height:100%
    }
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    /* background plugin */
    #contentframe {
        overflow: hidden;
        border-top:solid 1px #4F4F4F;
        border-bottom:1px solid #000;
        height: 100%;
        text-align:left;
        z-index: 3;
    }
    #slidecounter {
        float:left;
        color:#4F4F4F;
        font:50px "Helvetica Neue", Arial, sans-serif;
        font-weight:bold;
        margin:18px 20px;
    }
    #slidecaption {
        overflow: hidden;
        float:left;
        color:#FFF;
        font:26px "Helvetica Neue", Arial, sans-serif;
        font-weight:bold;
        margin:33px 0;
    }
    /*Supersized Stamp*/
            .stamp {
        float: right;
        margin: 25px 20px 0 0;
    }
    /*Supersize Plugin Styles*/
    #navigation {
        background: url('http://fileserv.twizted.be/mathieubassez/images/navbg.gif') no-repeat;
        float: right;
        margin:22px 20px 0 0;
    }
    #loading {
        position: absolute;
        top: 49.5%;
        left: 49.5%;
        z-index: 3;
        width: 24px;
        height: 24px;
        text-indent: -999em;
        background-image: url(http://fileserv.twizted.be/mathieubassez/images/progress.gif);
    }
    #supersize {
        position:fixed;
        width:100%;
        height:100%;
        left:0;
        top:0;
    }
    #supersize img, #supersize a {
        height:100%;
        width:100%;
        position:absolute;
        z-index: 0;
    }
    #supersize .prevslide, #supersize .prevslide img {
        z-index: 1;
    }
    #supersize .activeslide, #supersize .activeslide img {
        z-index: 2;
    }
    /* top of page */
    #header {
        height: 72px;
        background-image: url(gui/menu_background.jpg);
        background-repeat: repeat-x;
        border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #logo {
        width: 250px;
        float: left;
    }
    #nav {
        float: right;
        padding-right: 20px;
        padding-top: 40px;
        text-align: right;
    }
    /* content part of page */
    #cnt {
        width: 570px;
        margin-left: 280px;
        margin-top: 100px;
    }
    img {
        border:none;
    }
    h1, h2, p {
        padding:0 10px;
    }
    /* bottom of page */
    #footer {
        background:red;
        width:100%;
        margin:auto;
        height:40px;/* must match negative margin of #outer */
        clear:both;
        position:relative;
        z-index:4;
    }
    /* menu */
     .lavaLampNoImage {
        position: relative;
        height: 29px;
        width: 421px;
        background-color: white;
        padding: 15px;
        margin: 10px 0;
        overflow: hidden;
        border: 1px solid gray;
    }
    .lavaLampNoImage li {
        float: left;
        list-style: none;
    }
    .lavaLampNoImage li.back {
        border: 1px solid #000;
        background-color: #e6e8ea;
        width: 9px;
        height: 30px;
        z-index: 8;
        position: absolute;
    }
    .lavaLampNoImage li a {
        font: bold 14px arial;
        text-decoration: none;
        color: #000;
        outline: none;
        text-align: center;
        top: 7px;
        text-transform: uppercase;
        letter-spacing: 0;
        z-index: 10;
        display: block;
        float: left;
        height: 30px;
        position: relative;
        overflow: hidden;
        margin: auto 10px;
    }
    .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
        border: none;
    }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
    <script type="text/javascript" src="http://fileserv.twizted.be/mathieubassez/supersized.2.0.js"></script>
    <script type="text/javascript">  
            $(function(){
                $.fn.supersized.options = {  
                    startwidth: 640,  
                    startheight: 480,
                    vertical_center: 1,
                    slideshow: 1,
                    navigation: 0,
                    transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                    pause_hover: 0,
                    slide_counter: 0,
                    slide_captions: 0,
                    slide_interval: 6000  
                };
                $('#supersize').supersized(); 
            });
        </script>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
    
        <!-- background plugin-->
        <div id="supersize"> <a href="#"><img src="http://fileserv.twizted.be/mathieubassez/images/bird.jpg"/></a> <a href="#"><img src="http://fileserv.twizted.be/mathieubassez/images/paradise.jpg"/></a> <a href="#"><img src="http://fileserv.twizted.be/mathieubassez/images/snake.jpg"/></a> </div>
        <div id="loading">&nbsp;</div>
    
    </body>
    </html>

  5. #5
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm,

    Still seems to break up here. Looks like we're getting closer though...

    FF: Shows half of the image (right part of the screen).
    IE: Still shows a horizontal scroll bar.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You didnt remove the text-align:center from the body as in my code

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It won't work in IE6 because the supersize used fixed positioning which IE6 doesn't understand.

  8. #8
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Works like a charm!

    Thanks a lot for your help.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  9. #9
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It won't work in IE6 because the supersize used fixed positioning which IE6 doesn't understand.
    I just noticed IE7 still breaks (horizontal scroll bar). It also displays a js-error in the bottom of the page stating "error on page"
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That's not happening with my code in post #4. I'll have to look through your new version and see what you changed

  11. #11
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My bad, it had somethiing to do with the js-menu I implemented. I changed it to a plain CSS menu, horizontal scroll is gone now.

    Still a JS error in IE though, but I guess that is a whole different story (and forum).
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The horizontal scrollbar is because you havent set a left co-ordinate for the absolutely placed menu.

    Code:
    .menu ul {
        list-style:none;
        z-index:10;
        position:absolute;
        z-index:100;
        left:0;
    }
    The js error seems to be something in your menu.js that IE doesn't like.


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
  •