Featured Content Slider: slider on top of slideshow

[chechu]

1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: Is it possible to have the slider on top of the slideshow, but a transparant backround ?

I tried the folowing in the css, but it doesn't work, as the slider appears behind the slideshow.


.pagination{
width: 630px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background:url(transparent.png) repeat-x;
margin-top: -50px;
padding: 5px 10px;
border-left: 1px solid #fff;
}

[ddadmin]

Try something like the following to get the pagination DIV to overlay the main slider DIV:


<style type="text/css">

#paginate-slider1{
position:relative;
top: 35px;
opacity:0.6;
-moz-opacity:0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
z-index:100;
}

</style>

Sample HTML for slider:


<div id="paginate-slider1" class="pagination">

</div>

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

[chechu]

There appears a gap above the slideshow, just as high as the pagination bar (look here: safarisinafrika.be (http://www.safarisinafrika.be))

Update: I think I solved it by placing

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px;
width: 660px; /*width of featured content slider*/
height: 300px;
margin-top:-28px;
}

To go a step further: is it possible to place a different text link on top of each image, with a transparant background ?

[chechu]

My idea is to get something like a slideshow, but have text links horizontal with a transparant background and the amount of images below.

This is the coding, thanks to gabfirethemes.com:

Add this to the contentslider.css:

h2.featuredTitle {
font-family: "Trebuchet MS",Arial; clear:both;
display:block;
background:url(../images/transparent.png);
}
h2.featuredTitle a {
font-size:15px;
display:block;
color:#fff;
font-weight: bold;
padding:6px 5px 15px 10px;
text-decoration:none;
}
h2.featuredTitle a:hover {
text-decoration:underline;
}

and changing this in the content, where the image of the slideshow is placed as background

<div class="contentdiv" style="background:url(images/images1.jpg)">
<h2 class="featuredTitle"><a href="index.php">welcome to this site »</a></h2>
</div>