Position elements over <div>

Hi,

I really like this slideshow here: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm and want to try overlaying some CSS elements onto it.
So the 2 elements would be in the image area, on top of it, as it fades in and out.

I’m trying to position the tall rectangle to the left and the long rectangle at the bottom of the background image.

Here’s my code:


<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", ""],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
</head>

<body>

<div style="background:#000;width:80px;height:150px">&nbsp;</div>
<div style="background:#666;width:250px;height:30px">&nbsp;</div>
<div id="fadeshow1"></div>

</body>

</html>

What is the best way to achieve this?

Many thanks for any pointers.

I’m trying to position the tall rectangle to the left and the long rectangle at the bottom of the background image.
Hi,
I would think that you should be able to nest those two divs in your slideshow div.

Like this maybe -


[COLOR=Blue]<div id="fadeshow1"[/COLOR] style="background:#CDF;width:250px;height:180px">
    <div style="background:#000;width:80px;height:150px">&nbsp;</div>
    <div style="background:#666;width:250px;height:30px">&nbsp;</div>
[COLOR=Blue]</div>[/COLOR]

So the 2 elements would be in the image area, on top of it, as it fades in and out.

If nesting them as in-flow blocks causes problems you might be able to absolute position them in there to remove them from the flow. Then you can also set a stacking order on them with z-index.

Many thanks for the reply Rayzur.

Just to confirm, the blocks won’t be part of the slideshow, but just navigation and breadcrumb trail that will not change as the slideshow plays on in the background.

Thanks for the reply, I’m going to try this out in a mo.

Just to confirm, the blocks won’t be part of the slideshow,
Right, I knew they were not.

If it causes problems nesting them directly in the slide show you can wrap them all in a div and set position:relative on that wrapping div. Then lay the left and bottom div on top of your slideshow via absolute positioning.

This is what I had in mind -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<style type="text/css">

body {
    background: #fff;
    font-size:100%;
}
#slidewrap {
    width:250px;
    height:180px;
    background:lime;
    position:relative;
}
#fadeshow1 {
    width:250px;
    height:180px;
}
#left {
    position:absolute;
    z-index:1;/*if needed*/
    left:0; top:0;
    width:80px;
    height:150px;
    background:#000;
}
#bottom {
    position:absolute;
    z-index:1;/*if needed*/
    left:0; bottom:0;
    width:250px;
    height:30px;
    background:#666;
}
</style>
</head>
<body>

<div id="slidewrap">
    <div id="fadeshow1"></div>
    <div id="left"></div>
    <div id="bottom"></div>
</div>

</body>
</html>

Thanks for the quick reply again Rayzur.

The above code works great.
But unfortunatey when I test it with my slideshow, the slideshow seems to go over my left & bottom elements.

Could you possibly take a look using the slideshow code above and see if you get the same issue?

Really appreciate all the help so far, it means a lot.

Hi,
That script has a z-index:999; on line 154.
You either need to reduce it or set your AP divs higher as shown in the working code below. :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", ""],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", ""] //<--no trailing comma after very last image element!

],

displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "ondemand",

togglerid: ""

})

</script>

<style type="text/css">
body {
    background: #fff;
    font-size:100&#37;;
}
#slidewrap {
    width:250px;
    height:180px;
    background:lime;
    position:relative;
}
#fadeshow1 {
    width:250px;
    height:180px;
}
#left {
    position:absolute;
    z-index:1000;/*if needed*/
    left:0; top:0;
    width:80px;
    height:150px;
    background:#000;
}
#bottom {
    position:absolute;
    z-index:1000;/*if needed*/
    left:0; bottom:0;
    width:250px;
    height:30px;
    background:#666;
}
</style>

</head>
<body>

<div id="slidewrap">
    <div id="fadeshow1"></div>
    <div id="left"></div>
    <div id="bottom"></div>
</div>

</body>
</html> 

Haha, 999??? That’s high enough to land on my keyboard(!)

That now works perfectly.

Once again Rayzur, many thanks for your help and patience. Have a great weekend! :slight_smile: