Sticky footer vs Supersized

**ThaVincy** · Sep 6, 2010 06:44

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

**Paul O'B** · Sep 6, 2010 07:50

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

**ThaVincy** · Sep 6, 2010 07:59

Originally Posted by Paul O'B

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.

**Paul O'B** · Sep 6, 2010 08:04

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>

**ThaVincy** · Sep 6, 2010 08:28

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.

**Paul O'B** · Sep 6, 2010 08:44

You didnt remove the text-align:center from the body as in my code

**Paul O'B** · Sep 6, 2010 08:45

It won't work in IE6 because the supersize used fixed positioning which IE6 doesn't understand.

**ThaVincy** · Sep 7, 2010 01:07

Awesome! Works like a charm!

Thanks a lot for your help.

**ThaVincy** · Sep 7, 2010 01:43

Originally Posted by Paul O'B

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"

**Paul O'B** · Sep 7, 2010 02:23

That's not happening with my code in post #4. I'll have to look through your new version and see what you changed

**ThaVincy** · Sep 7, 2010 02:43

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

**Paul O'B** · Sep 7, 2010 02:49

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.

User Tag List

Thread: Sticky footer vs Supersized

Thread Tools

Display

Sticky footer vs Supersized

Bookmarks

Bookmarks

Posting Permissions