This next animation issue comes up all the time, so here's an example of how to make it work.
How to Stack Two Animations on Top of Each Other
Looking at the code, you'll see 'slideshow1' and 'slideshow2,' as you might expect from our discussion on the previous page. The rest of the tags also match up with the information on the previous page. Generally, you're working with the same basic structure regardless of whether the animations need to stack or not.
BUT! These next pieces of information are—you guessed it—really important.
- Both animations need to have the 'float: left;' property in their inline CSS. You can also use 'float: right;' depending on your page layout needs, but floating left tends to make your life easier when you're positioning the animations where you want them.
- The height of the first animation needs to be set to 0. If you have more than two animations, all except the final animation should have a height of 0 as well.
- The height of the last animation needs to be set to whatever height you want the animated region to be (so, at least as tall as the slides, maybe a bit taller).
- After the final animation, add a div with class 'clear' to clear the 'float: left;' property. Otherwise, the rest of your page content will try to wrap to the right of the animation. If you want your content to wrap around the animated area, then by all means, don't clear the float.
How to Ensure Your Buttons Will Align with Text, No Matter What
Sometimes, you'll need the play/pause buttons to top-align with a specific paragraph or header. One way to make sure this works cross-browser is to put your text inside the animation div. In these cases, you won't set a height for the slideshow div; you'll set size and position information for the unordered list instead. Take a look at the code to see what I mean.
“Crazy talk,” you say? Well, maybe. But if you preview this page in Firefox, Chrome, Safari, and IE9 at a variety of zooms, you'll see that the play/pause buttons stay right next to the h2 text, no matter what zoom level you set.
“But we should be able to fix cross-browser positiong issues with CSS,” you say. And most of the time, you're right. Unfortunately, a lot of our button position problems happen because of the way browsers scale page elements at different zoom levels. We can't control that with CSS. So we have to use our HTML containers to keep some elements where we want them.
This won't work for every alignnment situation—I'm looking at you, ordered lists—but it's handy to know all the same.