#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    3
    Rep Power
    0

    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.

    Thanks,
    A
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    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
    Code:
     <div id="slide" class="clearfix" position: relative; z-index: 10;><!--slide starts here-->
    should be
    Code:
     <div id="slide" class="clearfix" style="position: relative; z-index: 10;"><!--slide starts here-->
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    3
    Rep Power
    0
    Thanks, Don.

    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.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    so, did making the change(s) I recommended, fix things for you or are you still having issues?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    3
    Rep Power
    0
    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.

IMN logo majestic logo threadwatch logo seochat tools logo