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:
* {
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:
<!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"> </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