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"> </div>
<div style="background:#666;width:250px;height:30px"> </div>
<div id="fadeshow1"></div>
</body>
</html>
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.
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.
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.