|
CSS - Flash Blocking Dropdown Div
Hello,
I'm having difficulty with a new dropdown menu. It is appearing below a flash movie. I've added a z-index to the div elements on the page, yet is still not helping in the case of the SWF file. I've applied relative positioning and a z-index value lower than the dropdown. The changes are not on a public web server at the moment, so its not easy for me to post exactly what is going on with the page. However, if anyone has run into an similar obstacles and has some suggestions, it would be greatly appreciated. Thanks Similar TutorialsWell I'm using a dropdown menu type of thing off of dynamicdrive.com... well everything seems good except i can't get the drop down menu to show over the flash image that is directly below, it always get's hidden below it. You can see what i'm talking about by going to http://www.upbeetmusic.com/test/template.htm and putting your mouse over where it says features in the nav bar. View the source and you'll see i even tried puttin gthe flash element in a div tag and changing the z-index, and still no luck. Any suggestions? Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... Take a look at this site: http://clients.ekcetera.com/thunderhook/thunderhook/# The image that displays: Welcome to the Wilderness is giving me trouble. It's 85 px tall and I can't get it to bump up right underneath the navigation. It's like there's something there blocking it from doing so. If you highlight the images and the navigation, you can see this little block of space off on the right side that gets highlighted. I can't seem to find where that is being created. Here's the CSS: Code: body {
background-color: #C2B59B;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 980px;
margin-right: auto;
margin-left: auto;
}
.logo {
position: absolute;
}
.whitebackground {
background-color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
height: 1000px;
padding-top: 30px;
}
.mininav {
text-align: right;
width: 835px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 25px;
color: #036;
}
.header {
background-image: url(images/header.jpg);
width: 835px;
margin-right: auto;
margin-left: auto;
padding-top: 155px;
background-repeat: no-repeat;
}
.mainnav {
background-image: url(images/transparent.png);
background-repeat: repeat;
height: 25px;
width: 835px;
margin-bottom: 0px;
padding-bottom: 0px;
}
/* Dropdown Menu Styling */
.dropdown {
float: left;
position: relative;
left: 123px;
top: -16px;
}
.dropdown dt {
cursor:pointer;
padding-right: 15px;
padding-left: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 25px;
}
.dropdown dt:hover {
background-color: #C2B59B;
}
.dropdown dd {
overflow:hidden;
width:200px;
display:none;
z-index:200;
opacity:.6;
background-color: #DED8C9;
position: absolute;
left: -40px;
}
.dropdown ul {
list-style-position: outside;
margin-left: -40px;
font-size: 13px;
}
.dropdown li {
display: inline;
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
color:#333;
text-decoration:none;
width:200px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
}
.dropdown a:hover {
color:#000;
font-weight: bold;
background-color: #C2B59B;
}
.dropdown .underline {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
.welcomewilderness {
text-align: center;
margin: 0px;
padding: 0px;
height: 85px;
}
.welcomewilderness img {
vertical-align: top;
}
HELP! I've been looking around for hours now, and I can't find a way to get rid of a slight gap to the left of my flash nav bar (which is inserted in a nested div). Everything is centered and verticaly fluid. code for flash div= #flash { vertical-align: top; margin: 0; padding: 0; height: 111px; width: 875px; } code for centercol div= #centerCol { margin: 0 auto; padding: 0px; width: 875px; background-color: #ffffff; height: 100%; background:url(top_04.jpg) repeat; } html for embeding= <div id="centerCol"> <div id="flash"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="top_bar" ALIGN="center"> <PARAM NAME=movie VALUE="top_bar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="top_bar.swf" quality=high scale=exactfit wmode=opaque bgcolor=#FFFFFF WIDTH="100%" HEIGHT="100%" NAME="top_bar" ALIGN="center" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> some content </div> Thanks. Hi, Is it possible to place a div on top of a flash animation? When i place it on top of the flash, it dissapears, but shows up on the rest of the page. this is the code i am using: Code: <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:100; left: 114px; top: 359px; visibility: visible; overflow: visible;"><img src="flap.gif" width="146" height="18"></div> I am using a basic css layout but i am having a problem when it comes to adding the flash. I need it to stay in the wrapper.here is the code im using :- Code: body {
background-image: url(bg2.jpg); font: 76% verdana,arial,tahoma,helvetica,"sans serif";
}
* {
padding: 0px;
margin: 0px;
}
HTML {
MARGIN-BOTTOM: 1px; HEIGHT: 100%;
}
#wrapper {
MARGIN-LEFT: auto; WIDTH: 700px; MARGIN-RIGHT: auto; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}
ul {
margin-top: 1.1em; margin-bottom: 1.1em; line-height: 130%;
}
ul li {
padding-left: 13px; list-style-type: none; margin: 0px 0px 0.15em 1.5em; color: #327EBE;
}
a {
color: #4f9cef; text-decoration: none;
}
a:visited {
COLOR: #FF9523; TEXT-DECORATION: none;
}
a:hover {
COLOR: #FF9523; TEXT-DECORATION: none; border-bottom: 1px dotted #7CD300;
}
a:active {
COLOR: #333333;
}
#img {
padding-bottom: 0px;
}
#nav {
background-image: url(gradientbg.gif); height: 34px;
padding: 0px 0px 0px 0px;
}
#navlist li {
display: block;
list-style-type: none;
padding: 0px 0px 0px 0px;
font-weight: bolder;
float: left;
}
#navlist a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
padding: 10px 10px 10px 10px;
font-weight: bolder;
}
#navlist li a:hover {
background-color:#FFFFFF; padding: 12px 10px 12px 10px;
font-weight: bolder;
}
#navlist a:hover {
color: #AF9981;
background-color: #FFFFFF;
font-weight: bolder;
}
#col1 {
float: left; WIDTH: 700px;
}
#col1content P {
FONT-SIZE: 10pt; Font-family:tahoma, sans-serif; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 10px; COLOR: #666666; LINE-HEIGHT: 140%; MARGIN-RIGHT: 10px; TEXT-ALIGN: justify;
}
#col1content {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 15px; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS", Tahoma;
}
#footer {
CLEAR: both; background-color:#333333; WIDTH: 700px; HEIGHT: 65px; text-align: center; padding-top: 15px; padding-bottom: 0px; BORDER-TOP: #a4d0ed 2px solid;
}
H1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #003333; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 20px; PADDING-BOTTOM: 0px; COLOR: #b4aa9e; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
H3 {
FONT-SIZE: 20px; PADDING-BOTTOM: 25px; COLOR: #b4aa9e; PADDING-TOP: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; padding-left: 13px;
}
#footer P {
PADDING-LEFT: 15px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 10px; COLOR: #71AB6B; PADDING-TOP: 10px; text-align: center;
}
#footer a {
COLOR: #00cc00; text-align: center; padding-top: 10px; padding-bottom: 0px;
}
#copyright {
font-size: 0.9em; color: #FFFFFF; padding-top: 15px; padding-bottom: 7px;
}
#contentterms {
font-size: 0.8em; color: #FFFFFF;
}
It is when i add the css that it doesnt work the way it should. How would I put the flash into column one without it messing up? The size of the flash is the same width as the column and wrapper. If anyone can point me in the right direction it would be very appreciated. Thanks in advance. Is there a way to set a flash movie as the background image of a div? Any suggestion how to accomplish this if it's not possible? I have three Flash Movies (contained in one DIV with a fixed width of 600px and height of 415px) on my XHTML page, one above the other. They look fine in IE and Netscape but in FireFox for some reason it leaves a gap between the movies which I haven't asked for. I'm sure it is just a simple something I am missing in the CSS, any ideas? hi.. i am totaly new to this and don't know what I'm doing! can anyone help me centre my games with css not with tables? at the momment it looks fine in firefox and ok in some resolutions on internet explorer http://www.free-online-games-player.co.uk/police-chopper-game.html thanks I have some drop-down menus that are hidden behind a flash movie. I have set the z-index way up to 6 on them, but they still stay hidden. Anybody have any ideas? http://www.husbandman.org/2baptist/ I have a site with a menu that works perfectly in every single browser except IE6. Instead of the menu going over top of the flash, it enlarges the menu bar and just displays within that. I've tried SWFObject, as well as wmode=transparent and opaque for the flash movie, and they work great for all browsers other than IE6. Does anyone know a fix for this? Hello! I have a flash header and I'm wondering how to make an img (jpg/png) overlap a flash header? It seems that the flash keeps covering my img when i use positionsomething) Thanks! If i create a flash like button using CSS, does anyone know if it's cross compatible with all browsers? Or, has anyone already tried this and found it more trouble than it's worth? Ive been trying to make this site for a friend, http://www.force-g.net/nathan/mainpage.html he wants a specific design so I made it with flash. The problem is useless with flash and thats as far as I can get. Can anyone give me a hand or some hints on how I could replicate this design with html and css. Would I have to use frames or can I divide the page with css? Or should I just stick to the flash design I have already? Hi, I have a flash movie which it sppaearing on top of a drop down menu. I do not have access to the <object tag so I cannot add a wmode tag. Is there a way I can get the drop down menu to appear on top using just css? Thanks! OK I have embedded a flash movie and I want no padding at the bottom of the flash object so it butts up with my horizontal menu. I have used the following html PHP Code: <td class="flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="340" height="140"> <param name="movie" value="images/movie.swf"> <param name="quality" value="high"> <embed src="images/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="340" height="140"></embed> </object></td> Here is the css I use for the cell: PHP Code: .flash{ vertical-align: bottom; text-align:right; padding-right:25px; background-color:#EBF0F5; padding-bottom:0px; margin:0px; } But in Netscape and Mozilla browsers there is a 2pixel gap at the bottom of the object ? IE and Opera are ok, does any-one know anything about this ? thanks for your time. I have a drop down menu that drops behind my flash element. is there a way to push the flash behind the menu in CSS? I fixed it. Had an absolute div tag that was overlapping. Hello, I have a css/javascript drop-down menu (see code) in my website's header. Just below the header area, I have 728x90 Flash banners from various 3rd party ad networks. Depending on the banner, sometimes the drop-down menu properly appears on top of the Flash banner, and other times it drops down behind it, making it unusable. No amount of adjusting the z-index property seems to help. I have no control over the banners since they are served by a 3rd party system. Is there anything I can do to my drop down menu to always make it appear on top of everything, including all Flash content? Thanks! Hi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions? thanks |
|||||||