Div postions

[madhavaram123]

Hi All,

I need to place 3 divs in a position.

Div 1: bluetabs

Div 2: menudropdown

and the flash object

I wnat the blueTabe to appear on top of the above and next menudropdown div and atlast the flash object.

Below is my css for the blue tabs and menudrop down



.bluetabs{

}

.bluetabs ul{
z-index: 100;
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.bluetabs li{
z-index: 100;
display: inline;
margin: 0;
}

.bluetabs li a{
z-index: 100;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #000;
color: #2d2b2b;
background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{
z-index: 100;
color: #2d2b2b;
}

.bluetabs li a:hover{
z-index: 100;
text-decoration: underline;
color: #2d2b2b;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
padding-bottom: 9px;
border-bottom-color: #fff;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.menudropdown {
z-index: -1;
BORDER-TOP: #000 1px solid; float: left;
BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 8px; PADDING-LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 8px;
BORDER-LEFT: #000 1px solid; WIDTH: 300px; PADDING-TOP: 8px;
BORDER-BOTTOM: #000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #fff;
}

* html .menudropdown a{ /*IE only hack*/
width: 100%;
}

.menudropdown a:hover{ /*THEME CHANGE HERE*/
background-color: #fff;
}


This is my flash object code



<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=5,0,0,0" salign="c" id="ShockwaveFlash1" viewastext="" height="349" width="910">
<param name="movie" value="default.asp_files/topbanner.swf">
<param name="loop" value="true">
<param name="play" value="true">
<param name="menu" value="true">
<param name="wmode" value="transparent">
<param name="z-index" value="-1">
<param name="devicefont" value="false">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="default.asp_files/topbanner.swf" bgcolor="#FFFFFF" wmode="opaque" devicefont="false" menu="true" swliveconnect="FALSE" quality="high" loop="true" play="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" align="center" height="349" width="910" wmode="transparent">
</object>



below is my divs in the html code


<div id="bluemenu" class="bluetabs">
<ul>
<li class=""><a href="" rel="dropmenu1_b">Home</a></li>
<li class=""><a href="" rel="dropmenu2_b">Products</a></li>
<li class=""><a href="" rel="dropmenu3_b">Gallery</a></li>
<li class=""><a href="" rel="dropmenu4_b">Services</a></li>
<li class=""><a href="" rel="dropmenu5_b">Contact us</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1_b" class="menudropdown">
<a style="border-top-width: 0pt;" href="javascript:void(0)">Sub Home for Menu</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2_b" class="menudropdown">
<table width="100%">
<tbody>
<tr>
<td><a style="border-top-width: 0pt;" href="javascript:void(0)">About us</a></td>
<td><a href="javascript:void(0)">Mission</a></td>
<td><a href="javascript:void(0)">History</a></td>
</tr>
<tr>
<td><a href="javascript:void(0)">Careers</a></td>
<td><a href="javascript:void(0)">Team</a></td>
<td><a href="javascript:void(0)">Join us</a></td>
</tr>
</tbody>
</table>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3_b" class="menudropdown">
<table width="100%">
<tbody><tr>
<td><a style="border-top-width: 0pt;" href="javascript:void(0)">Sub Gallery for Menu</a></td>
</tr>
</tbody></table>
</div>

<!--4th drop down menu -->
<div id="dropmenu4_b" class="menudropdown">
<a style="border-top-width: 0pt;" href="javascript:void(0)">Sub Services for Menu</a>
</div>

<!--4th drop down menu -->
<div id="dropmenu5_b" class="menudropdown">
<a style="border-top-width: 0pt;" href="javascript:void(0)">Sub Contacts for Menu</a>
</div>



I am going mad abt this. Try to throw some light into it.

thanks in advance.

Preview of the site is this

http://www.frankebearings.com/default.asp

[Snookerman]

Give the element containing your menu the following style:

position: relative;
z-index: 1000;

Good luck!

[madhavaram123]

Thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!:)

[Snookerman]

You're welcome, glad to help!!!:)
You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!