Using Flash for background animation

April 29th, 2007 at 8:47 pm (CSS)

I was working on a website recently that needed to display Flash animation beneath normal HTML content as part of its visual treatment. In the course of developing this, I found out that embedded Flash objects inserted into a HTML document will be displayed above all other content.

The easiest way to get around this is to enclose the Flash object in a another element, for example a <div> . This enclosing element will then have a value for z-index that is lower than the content that should be displayed above the Flash object.

PLAIN TEXT
HTML:
  1. <p id="animation" style="z-index: -1">
  2.     Flash object markup
  3. </p>
  4. <p id="content" style="z-index: 1">
  5.     Actual Page Content
  6. </p>

The next step is to position the content and Flash object, there are 2 ways to "layer" the 2 elements on top of each other. The first method is to use absolute positioning, the second is to take advantage of negative margins. In my case, I went with the latter.I will pull div#content up towards the Flash object by declaring a negative top margin for #content.

PLAIN TEXT
HTML:
  1. <p id="animation" style="z-index: -1">
  2.     Flash object markup
  3. </p>
  4. <p id="content" style="z-index: 1; margin-top: -400px">
  5.     Actual Page Content
  6. </p>

In the course of testing, the page is rendered as intended in Internet Explorer 6/7 and Firefox. However, the Flash object will be displayed above content in Safari when any text is selected or the page is scrolled by the user. To get around this issue, enable transparency for the Flash object. Just take care to position content away from the non-transparent parts of the Flash animation or it will be hidden from view in Safari.

Comments

Stupidly simple way to clear floats with CSS

January 22nd, 2007 at 4:37 pm (CSS, Standards)

I discovered this method of clearing floated elements (this may be old news to some of you) in a layout using CSS while searching the web for alternatives to inserting extra markup just so the layout will look right (I'm looking at you, <div style="clear:both"></div>). This is just brilliant, a single style declaration, "overflow: auto;" to the element containing the floats and that's it. It seems to work with all major browsers, which includes Firefox, Mozilla, Internet Explorer 6 & 7, Opera and Safari.

There is an extra step to make this work in Internet Explorer 6 though. A dimension needs to be applied to the element that the overflow:auto; declaration is being applied on in order to trigger the hasLayout property in the element.

3 Comments