It’s seems tough but believe me it’s quiet an easy process if you do understand positioning in CSS.

Here I want to place a simple html list in front of flash animation.

At first, I am writing my html code.

<div id=”main-content”>
<div>

<object classid=”" width=”" height=”" title=”banner”>

<param value=”transparent” />

<param value=”" />

<embed src=”" wmode=”transparent” width=”" height=”"></embed>

</object>

</div>

<ul>

<li><a href=”#”>link01</li>

<li><a href=”#”>link02</li>

<li><a href=”#”>link03</li>

<li><a href=”#”>link04</li>

</ul>

</div>

Then write the following styling:

#main-content{
width:500px;

height:400px;

position:relative;}

#flash-banner{

position:absolute;

z-index:0;}

#nav-bar{

position:absolute;

z-index:100;

right:50px;

top:100px;}

* Width and height depends upon your total area of covering the flash animation including html element.

* The z-index value depends upon the element, whom you want on the top most level will have the higher value.

*  The top and right value is for the positioning of the html element in the particular space.

Latest posts by Sraddha Agrawal

  • Share/Bookmark