Here’s what I’ve done so far:
3 problems here:
– Why header isn’t on top of everything?
– Why isn’t overflow-x not working?
– Why does the text slider appearing on top of the images slider?
PS: I need to have 2 independent sliders because I’m gonna have content between them.
Thanks in advance for the help.
This reply has been reported for inappropriate content.
The header isn’t on top of everything because you haven’t put any content inside of it. I see that you have set the maximum:
max-height: 40px; but this doesn’t increase the size of the header. Try adding some text to the header.
For the overflow-x, the
#img-wrapper img is set to
position: absolute. I tried playing around with your code, and the overflow-x worked for me when I removed the
The text slider (I think you mean the
#text-wrapper right?) comes up on top of the image slider (
#img-wrapper) because you’re setting both to z-index: 1. Since the
#text-wrapper is the last element whose z-index changes, it appears on top. (When two elements have the same z-indices, the last z-index element goes on top.)
Ok, the header was a problem of my example, I have now a defined size.
The z-index was only to have the content bellow the header (z-index: 2). I want to have #text-wrapper bellow the #img-wrapper.
I can’t remove position: absolute (http://jsfiddle.net/9wPDy/4/) because I want to make a slider from this (that’s why my mix up with the names) and I need to be able to set the x position of each image inside their wrapper and each text inside theirs. I think this is my biggest problem. How to position them inside the container?
Here’s what I want: http://imgur.com/3PFIKAM
>I need to be able to set the x position of each image inside their wrapper and each text inside theirs. I think this is my biggest problem
I’m not sure it is.
Why not just put a single working slider in place first (**which one are you using BTW?**), build around it and debug from there?
I’m trying to build one for myself @paulie_d.
Ok, so I’m following your advise and just begin to build the slider. I want a slider with 100% width, the images with 90% width and I want to slide them horizontally.
My CSS problem continues, I can’t make the images float inside him: http://jsfiddle.net/jAyHa/1/
If the images are 90% width then I don’t think floating is the answer (I could be wrong).
Why not look at an existing slider ( I hear the [Anything Slider](https://github.com/CSS-Tricks/AnythingSlider “Anything Slider”) is pretty awesome) and see how they did it?
You must be logged in to reply to this topic.