March 18th, 2013, 04:07 PM
Z-index not working
I am have a main image that I want to appear fixed above other images in an image slider.
It is a Joomla site using favslider as the slider module. They have told me about using z-index and told me that the div containing my image (#slide) must have a smaller z-index than the div containing the slider id=slider class = .favslider). I thought it should be the opposite but no matter what I try, I cannot get it to work.
The site is in development at dev2.cssn.on.ca and I have a few test slides loaded but can't get the main image to come to the top. It looks like I have to use the template.css and favslider.css.
I would appreciate any help or direction. I am doing this for the non-profit that I work for and the site must go live by next Monday and I simply cannot figure this out.
March 18th, 2013, 04:44 PM
You can't just plop in a "position:relative;z-index:10;" just anywhere.
If you are using it inline [which is what I saw on your page], you need to use the style="" attribute for your CSS styling.
EXAMPLE from your site
<div id="slide" class="clearfix" position: relative; z-index: 10;><!--slide starts here-->
<div id="slide" class="clearfix" style="position: relative; z-index: 10;"><!--slide starts here-->
March 18th, 2013, 04:53 PM
I didn't make the change inline - I was directed (by the template & slider programmers to add the code to the template.css file for #slide - which I did. And then in favslider.css to change the z-index of the slider.
I'm not a programmer. Know enough to get around and figure things out on my own usually but this is not something I've ever done so don't quite understand it.
March 18th, 2013, 10:18 PM
so, did making the change(s) I recommended, fix things for you or are you still having issues?
March 19th, 2013, 09:18 AM
Good morning Don,
No, I am still having issues. The response I got from support from the favslider is:
"This property applies to divs. In your case, the div that contains the image (#slide) has to have a smaller z-index than the div containing the slider ( class .favslider and id #slider )."
I haven't been able to find the #slider in the files and changes I have made to the class .favslider haven't made a difference. I"m still plugging away but there is so much content to put on and layout that this is my priority right now.