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.
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 position: absolute.
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?
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.
Oh, that can be an idea, I can use inline-block instead of float. Let me try..
I like to use Anything Slider but it doesn't work as I want, it has an expand option but the images simply don't adjust their height. Still, I'll look into their code.
Here's what I've done so far: http://jsfiddle.net/9wPDy/2/
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.
@XaviJr
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 imgis set toposition: absolute. I tried playing around with your code, and the overflow-x worked for me when I removed theposition: absolute.The text slider (I think you mean the
#text-wrapperright?) comes up on top of the image slider (#img-wrapper) because you're setting both to z-index: 1. Since the#text-wrapperis 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
Here's what happens if I don't use the position: absolute
http://jsfiddle.net/9wPDy/9/
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 is pretty awesome) and see how they did it?
Oh, that can be an idea, I can use inline-block instead of float. Let me try..
I like to use Anything Slider but it doesn't work as I want, it has an expand option but the images simply don't adjust their height. Still, I'll look into their code.
It's curious that Anything Slider uses float too. I tried to copy them but couldn't do it. display: inline-block have the same results.
I guess It's better to search some plugin already made.