Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Z-Index issue...I think

    Hi there,
    I'm playing around with a recently-purchased Magento theme (the developer is not very good at responding to support requests, so I'm trying to figure things out on my own).

    The theme has an image slider, which is lovely. But I wanted my images to cover the full width of the area instead of only on one side, with text next to it. I want the header and description to appear on TOP of the image. The text is supposedly THERE somewhere, but no matter how I try and play with the z-index settings using "Inspect element" (is this Firebug? I seem to have that as well), the text heading and content just doesn't appear on top.

    Help?

    Here's the development page: http://dev.yourbusybee.com/RMS/magento/

    Thanks in advance.

    ~Laura

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The headings (h2 and h3) are contained in a div which is nested in an li within the slider-container. I suppose this is by design.. Giving the container-div position: absolute causes it to sit above the slider. You can then explore top, left, bottom and right settings to position it correctly over the slider images.

    Increasing the width of slider-container causes the ebay-thing to drop below it - both are floated objects. But you'll need to change other measurements for the slider (the widths, etc., of the other objects it contains) to make it look good. Presumably this is achieved with object settings in JavaScript/jQuery.
    Attached Thumbnails Attached Thumbnails Z-Index issue...I think-image-9.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    operapixie (08-08-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Many thanks Andrew. I will play with that shortly. It looks like getting that container positioned correctly will be the trick.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You could remove the float property, increase the width, and (if you want) set margin: 0 auto to centre it. CSS:

    Code:
    .slider-container {
        width: 700px;
        height: 300px;
        position: relative;
        background-color: white;
        /* float: left; */
        border-radius: 10px;
    }
    I assume if you just use wider images it will adjust automatically.

    If you want to, as you indicated, place some text next to the slider then add a div after the slider, set this and the slider-container to display: inline-block. Or you could use floats, etc., etc.
    Attached Thumbnails Attached Thumbnails Z-Index issue...I think-image-10.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts
    My description may have been off. My apologies. I will try again:

    I want to leave the layout generally the way it is with the callouts/images to the right of the slider. The slider should remain the size it is. The problem is that I can't get the text to appear on TOP of the slider images. I know the text is there in h2 & h3 tags, but try as I might, I'm not succeeding in getting them to show up.

    I tried the position:absolute in my Inspect Element window (did not upload any changed CSS), but it didn't seem to make any difference.

    Frustrating.

    ~Laura

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You mean "E36", and "Stage 1 SuperCharger Kit"? They are displayed in my first screenshot.

    Apply position:absolute to the div that contains these headings.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Ahhhhh....

    OK. I see what you're saying. The only problem here is that that particular div doesn't seem to have a style/class assigned to it. I will have to locate it in the core code and then assign a style to it, which is fine.

    Thanks again.

    ~Laura

  • #8
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ok. This is much closer, but there's still some funkiness to it.

    I've got the text on top, but if you take a look at the page, you'll see that when the first slider image and text are active, the text for the 2nd image is hanging off to the right of the page. And when you click on the button to advance to the 2nd image, the text for the 1st image appears hanging off to the left of the page.

    Hrrmmmm....I'll keep looking through the styles for the images and see if I can figure out what I need to change, but in the meantime, if you know what's doing this and can tell me before I figure it out, I would again be ever-so-grateful!

    ~Laura

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I believe, essentially, you need to move those divs into their slider-img divs, so that they move, and hide, with their images. Absolute positioning will keep the headings above the images.

    But it might take a bit of effort to get it working properly
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •