DMXzone Nivo Slider Support Product Page
Answered
Using Nivo Slider as a background - possible?
Asked 04 Mar 2014 11:40:27
1
has this question
04 Mar 2014 11:40:27 Nathon Jones posted:
Is it possible to overlay another div region on my Nivo Slider?We have installed, and styled, a slider here:
www.tradmusic.com/indexSLIDER.asp
I'd like to overlay, at the top, a transparent title box.
Is that possible?
Thank you
NJ
Replies
Replied 04 Mar 2014 11:48:00
04 Mar 2014 11:48:00 Teodor Kuduschiev replied:
You can achieve this as with any other container of your page. You can have an element that uses position:absolute; and style it the way you need.
Replied 04 Mar 2014 12:58:15
04 Mar 2014 12:58:15 Nathon Jones replied:
I've added this to my CSS:
#title {
position:absolute;
margin:0 0 0 50px;
padding:20px;
width:560px;
background-color:#000;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
opacity:80;}
...and inserted it thus on the slider page:
<div id="title">
<h1>Newton Stewart Traditional<br>
& Acoustic Music Festival 2014</h1>
</div>
<div class="dmxNivoSlider slider-wrapper theme-basic" style="width:100%;">
<div id="TradFestSliderMain" class="nivoSlider"><a href="www.rossandtom.com" target="_self"><img id="RT1" src="tradmusic-slides/rossandtom1620x480.jpg" alt="" title="#RT1_caption" /></a>
<a href="www.siobhanmiller.com" target="_self"><img id="SM2" src="tradmusic-slides/siobhanmiller1620x480.jpg" alt="" title="#SM2_caption" /></a>
</div> <div id="RT1_caption" class="nivo-html-caption">
<h4>Ross Couper & Tom Oakes</h4>
<p>Saturday 5th July 2014 - 7:30pm - The Belted Galloway, Newton Stewart</p>
</div>
<div id="SM2_caption" class="nivo-html-caption">
<h4>Siobhan Miller</h4>
<p>Saturday 5th July 2014 - 7:30pm - The Belted Galloway, Newton Stewart</p>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#TradFestSliderMain".nivoSlider(
{"pauseTime": 5000}
);
}
);
// ]]>
</script>
...but whilst it shows in Design view, it doesn't show in Live view or on the web server. Am I missing something in my CSS?
Also, the transparency doesn't seem to be working either.
Thanks for the guidance.
Regards
NJ
#title {
position:absolute;
margin:0 0 0 50px;
padding:20px;
width:560px;
background-color:#000;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
opacity:80;}
...and inserted it thus on the slider page:
<div id="title">
<h1>Newton Stewart Traditional<br>
& Acoustic Music Festival 2014</h1>
</div>
<div class="dmxNivoSlider slider-wrapper theme-basic" style="width:100%;">
<div id="TradFestSliderMain" class="nivoSlider"><a href="www.rossandtom.com" target="_self"><img id="RT1" src="tradmusic-slides/rossandtom1620x480.jpg" alt="" title="#RT1_caption" /></a>
<a href="www.siobhanmiller.com" target="_self"><img id="SM2" src="tradmusic-slides/siobhanmiller1620x480.jpg" alt="" title="#SM2_caption" /></a>
</div> <div id="RT1_caption" class="nivo-html-caption">
<h4>Ross Couper & Tom Oakes</h4>
<p>Saturday 5th July 2014 - 7:30pm - The Belted Galloway, Newton Stewart</p>
</div>
<div id="SM2_caption" class="nivo-html-caption">
<h4>Siobhan Miller</h4>
<p>Saturday 5th July 2014 - 7:30pm - The Belted Galloway, Newton Stewart</p>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#TradFestSliderMain".nivoSlider(
{"pauseTime": 5000}
);
}
);
// ]]>
</script>
...but whilst it shows in Design view, it doesn't show in Live view or on the web server. Am I missing something in my CSS?
Also, the transparency doesn't seem to be working either.
Thanks for the guidance.
Regards
NJ
Replied 04 Mar 2014 13:16:15
04 Mar 2014 13:16:15 Nathon Jones replied:
Oops, should be opacity:0.8 not opacity:80.
Also added z-index:6; (same as the slider) and that's resolved the display.
What is z-index?
Also added z-index:6; (same as the slider) and that's resolved the display.
What is z-index?
Replied 04 Mar 2014 13:19:52
04 Mar 2014 13:19:52 Teodor Kuduschiev replied:
Well this is something really basic... Unfortunately we are not a web design school, but you can always learn more on this website: www.w3schools.com/cssref/pr_pos_z-index.asp
Replied 04 Mar 2014 13:26:39
04 Mar 2014 13:26:39 Nathon Jones replied:
Thanks for the link Teodor.