I was wondering if it would be possible, using CSS alone, to create a carousel by switching the z-index of divs at specified intervals (let's say 5 seconds). The divs would be layered on top of each other, and then, as their z-index changed they'd move forward or backward as appropriate, using their div IDs, leaving only one viewable at a time. This process would then loop. Is this possible, and if so, how would I go about doing it? Thanks!
CSSWizardy created a nice css-only-carousel with changing the left-value.
http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
Not changing the z-index, but should do the magic for you.
Also I just found the solution for you!
Check out this website http://css3.bradshawenterprises.com/cfimg/
Demo 3!
Related
I need to show different Ionic lists in a tabbed menu. The problem was include those tabs with the slide option. So i found this: tabbedSlideBox.
Made it work, edited it's styling to go with my app. But I can't get the tabs menú to stay fixed and don't move.
I made a pen to show you my problem: http://codepen.io/anon/pen/qdjxrB
Line 21 you can see the style inline with the fixed property that doesn't work. It keeps moving with the content, which is the opposite of what I need, I need to be able to move the list up and down and the tab menu should remain in it's place, but it should be able to move to right and left.
I believe it has something to do with the translate3d, but I can't figure out how to solve it without breaking the whole thing.
Tried to modify it's directive but I ended up breaking it..
Hope someone can help me.
Thank you.
EDIT
I've been reading about fixed positioning and absolute3d transitions, and they don't get along, the fixed element behaves as it was absolute positioned because it takes it's container as reference for the positioning: http://codepen.io/markdebeer/pen/qrBDm, but if anyone comes with a solution to this i'll be grateful.
I'm having trouble figuring this one out, it's a menu I am changing a bit to make it more usable on touch devices. Thus I need the first part of the CSS to stay as it is for normal screens, and then have to overwrite it with the touch styles. But I am trying to position the sub menu of services below services when services is selected. See the sketch. I have created a fiddle to show my problem.
My main problem, and what would solve it, is that I can't seem to get the ul.level_2 to position itself under the selected li, neither with absolute position or floating and clearing. Any ideas?
JS fiddle of problem
I sipmlyfied your example a bit to show you what is the minimal required css to achieve this. http://jsfiddle.net/3EKAq/10/
The positioning of the submenu should be fairly easy, it goes almost automaticly, no positioning required as you can see.
I think the key lies in the clearing of the menu element you want to appear on the left, the 4th one in this case. You could also consider working with the :n-th child css3 selector, but i would not do that for cross browser compatibility.
Hope this puts you in the right direction. Feel free to let us know if you need any more help!
I am experimenting with customizing a WordPress template and I have things close to the way I want them. One of the last issues is that I have a header that has position:fixed so it floats at the top the whole time. It works but when it floats past an image, it goes behind the image. How do I get it to stay in the foreground the whole time while scrolling? Here's a link:
http://miller-media.com/glossandglamblog/
Thanks!
You need to give it a z-index higher than the images' (eg, 1).
I'm trying to get familiar with CSS but some of things that are happening seem rather arbitrary.
For example:
http://jsfiddle.net/stapiagutierrez/48yGU/24/
Why is only the first and second divs displayed (playerinformation and centerad), but not the third one? I thought divs were stacked vertically unless told otherwise via floats or what have you.
Any suggestions?.
I just want three div, organized horizontally within the middle vertical div called middle.
My guess is #rightad is being removed by Adblock, or an equivalent. That's what's happening for me. If you disable your adblocked, I bet it will show up.
All worked for me (in Firefox), then installed AdBlock and the #rightad disappeared. Disabled adblock for the page and it reappeared again.
Alternative quick test would be to try your jsfiddle in a different browser and see if its all there.
I feel like the problem is extremely apparent. I'm working on an issue with a client's site, which actually happens on several of my clients' sites but this one is the most apparent. IE7 Is refusing to obey z-index rules. I've played around with differing values, particularly on the divs #mapWrapper and #map. Take a look here: http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php
I've done dozens of web searches and I can't find anything that resolves this issue. I also ready through Aleksandar Vacić's article on IE6/7 z-index discrepancies, but still nothing. Any assistance would be much appreciated, I'm tearing my hair out on this one.
In my experience, z-index in wonky in IE. Setting it to 0 is especially a problem, so make sure 0 isn't one of your z-index values.
Sometimes the simplest solution is to change the source-order of the html: whatever shows up later in the source will be on top. Is that a possibility in your case?
If I remember correctly, you can't have two elements with the same z-index or things get funky. I notice a lot of your paths have z-index of 1000. Some ideas to try:
Reset the z-indexes to be incremental within faux layers. That is, if you want all the boundary strokes to be on the same "layer", allocate the numbers between, say, 1001 and 2000 for that layer. The next layer above would use the numbers between 2001 and 3000, etc.
Let the document flow set the z-indexes within a few containers, and set the containers themselves to wide-apart z-indexes.
Note that historically with IE, elements like combo-box dropdowns and ActiveX controls, etc. get displayed on a layer above the actual page, and so always appear above any HTML, no matter how high you try to set the z-index. Not saying this is the problem, but perhaps using the map api triggers that problem. Read more here.
Okay, I figured it out. So the main navigation is in div #header with position: relative and no z-index defined. Once I placed a z-index on the header the menu popped right out in front of the map.
I guess the lesson here is look for every element with a defined position, be it absolute or relative, and how it is interacting with the elements in question.