View Full Version : Z-Index issue...I think

08-08-2012, 01:01 AM
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.


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

Thanks in advance.


08-08-2012, 01:44 AM
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.

08-08-2012, 01:48 AM
Many thanks Andrew. I will play with that shortly. It looks like getting that container positioned correctly will be the trick.

08-08-2012, 02:09 AM
You could remove the float property, increase the width, and (if you want) set margin: 0 auto to centre it. CSS:

.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.

08-08-2012, 10:01 AM
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.



08-08-2012, 12:51 PM
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.

08-09-2012, 08:05 PM
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.


08-09-2012, 08:36 PM
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!


08-09-2012, 09:59 PM
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 :thumbsup: