asked on

How to position a flash drop down menu using css

I have created a flash drop down menu and I am trying to put it at the top of my website. I want the drop down menus to drop down over my website content. I have tried position: absolute and it works but it cuts off the top of my content. You can view it at www.brightideaswebdesign.com/Talladega_Cycle/index.php

#header{
width: 100%; 
height: 173px; 
background: url(images/header_logo.jpg) center;  
background-repeat: no-repeat; 
margin: auto;
}
 
#menu{
width: 895px;
position: absolute;
}

Open in new window

brightsusan

ASKER

Ok... I have figured out that if I do the position: fixed; and give enough space for the menu, it now shows my complete header but now it shifts everthing way over to the side.... what other code do I need to make it all stay in the middle. The <div> tags are inside a container. Also my main area's size is based on the content. When I positioned the header it moved my footer up to the top, how can I make it stay at the bottom? So confused!!!

CSS Style Sheet
 
#wrapper {
	/* Set Layout Width */
	width: 895px;
	/* Center the layout */
	margin: auto;
	background-color: #000000;
	}	
 
#header{
width: 895px; 
height: 173px; 
background: url(images/header_logo.jpg) center;  
background-repeat: no-repeat; 
position: fixed;
top:115px;
left: auto;
right: auto;
}
 
#menu{
width: 895px;
}
 
#middle{
margin-left: 92px;
margin-right: 92px;
background: #FFFFFF;  
}
 
#left{
float:left;
width: 92px;
margin-left: 5px;
background: url(images/left.jpg); 
background-repeat: repeat-y; 
}
 
#right{
float: right;
width: 92px;
margin-right: 5px;
background: url(images/right.jpg); 
background-repeat: repeat-y; 
}
 
#footer{
width: 895px; 
height: 41px; 
background: url(images/footer.jpg) center; 
margin: auto;
background-repeat: no-repeat; 
position: static;
}
 
Page Code:
 
<div id="wrapper">
<div id="menu" style="position:absolute; z-index: 999;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="895" height="200">
    <param name="movie" value="images/menuheader.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="images/menuheader.swf" width="895" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
</div>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="middle">This is the middle section</div>
<div id="footer">
</div>
</div>

Open in new window

SOLUTION

glumlun

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

brightsusan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial