|
CSS - Have Css Content Appear On Top Of Flash With Css Only?
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! Similar TutorialsMorning! I've got a page which is displaying a flash of unscripted content before it shows the full CSS - I know there's a way round this, but I'm stuffed if I can figure it out, or find it on Google. Anyone got any ideas on how to fix this? Spooks Hello, I designed/developed a site for a client and everything works the way it should in every browser but IE6. Both the CSS and XHTML 1.0 Transitional have validated. Here's the test link: www.intiinteriorfinish-dot-com/test/index.php If you open the site in FF, Safari, Opera, or IE7, you see that the index page has a gallery toward the bottom and underneath that is an H4 that reads "General Contractor #...". Try to open the same page in IE6 and neither of those elements display. Now I've been testing, researching, testing some more, and racking my brain on end for a workaround/solution to this. I'd be more than appreciative if anyone could take a look at it and maybe shed some light on a possible solution. Best regards, Rob Hi, I have a web site that presents a flash navigation if the user has Flash, and an HTML navigation if the viewer doesn't have Flash. The problem is that the Flash navigation first flashes a white box, then the nav shows up. there should be no white box, as the Flash background is transparent, and the div that holds the flash, has a tiling grey and black gif. Here's my styles:: Code: .AternativeContentNav{
background-color:#000000
}
#navigation{
width:935px;
height:26px;
background-color:#000000;
padding:10px, 0px, 21px, 16px;
margin:10px, 0px,0px, -41px;
z-index:999;
/*margin-bottom:60px;*/
he\ight: auto; /* for IE5/Mac */
margin-left:-22px;
}
Here's the code for my site (I know it's a little confusing, but maybe someone can see what I'm doing wrong): Code:
<div id="navigation">
<table cellpadding="0" cellspacing="20" border="0" bgcolor="#000000">
<tr>
<td>
<!-- IE6navigation -->
<div class="IE6Nav">
<p><TABLE cellpadding="0" cellspacing="0" border="0">
<tr>
<TD bgColor=#000000><A onmouseover="imgAct('img1')" onmouseout="imgInact('img1')" href="alpha_dream_pheromones.php"><IMG height=23 alt="About Alpha Dream Pheromone perfume and cologne" src="images/nav/aboutUs_off.gif" width=163 border=0 name=img1></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img2')" onmouseout="imgInact('img2')" href="human_pheromones_pheromone_cologne_perfume.php"><IMG height=23 alt="alpha-dream pheromone products, cologne and perfume" src="images/nav/products_off.gif" width=175 border=0 name=img2></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img3')" onmouseout="imgInact('img3')" href="pheromone_technology_science.php"><IMG height=23 alt="advanced pheromone technology" src="images/nav/technology_off.gif" width=231 border=0 name=img3></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img4')" onmouseout="imgInact('img4')" href="human_pheromone_questions_answers.php"><IMG height=23 alt="Frequently Asked Questions about pheromones" src="images/nav/FAQ_off.gif" width=175 border=0 name=img4></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img5')" onmouseout="imgInact('img5')" href="contact_alpha_dream.php"><IMG height=23 alt="contact Alpha-Dream" src="images/nav/contact_off.gif" width=181 border=0 name=img5></A></TD>
<TD bgColor=#000000><IMG height=23 src="images/nav/endpiece.gif" width=19 border=0></TD>
</td></tr></table></p>
</div>
<!-- end IE6navigation -->
<!-- insert swf navigation and alternative conternt here -->
<div class="AternativeContentNav">
<!--[if gte IE 6]><script language="javascript">document.write("<NOSCRIPT class=clickfix><OBJECT style=\"display:none\">"); </script> <!--<![endif]-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="940" height="24" id="myFlashContent">
<param name="movie" value="NEWNAV.swf" />
<!--[if !IE]>-->
<!--[if gte IE 6]><script language="javascript">document.write("<NOSCRIPT class=clickfix><OBJECT style=\"display:none\">"); </script> <!--<![endif]-->
<object type="application/x-shockwave-flash" data="NEWNAV.swf" width="940" height="24">
<!--<![endif]-->
<p><TABLE cellpadding="0" cellspacing="0" border="0">
<tr>
<TD bgColor=#000000><A onmouseover="imgAct('img1')" onmouseout="imgInact('img1')" href="alpha_dream_pheromones.php"><IMG height=23 alt="About Alpha Dream Pheromone perfume and cologne" src="images/nav/aboutUs_off.gif" width=163 border=0 name=img1></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img2')" onmouseout="imgInact('img2')" href="human_pheromones_pheromone_cologne_perfume.php"><IMG height=23 alt="alpha-dream pheromone products, cologne and perfume" src="images/nav/products_off.gif" width=175 border=0 name=img2></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img3')" onmouseout="imgInact('img3')" href="pheromone_technology_science.php"><IMG height=23 alt="advanced pheromone technology" src="images/nav/technology_off.gif" width=231 border=0 name=img3></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img4')" onmouseout="imgInact('img4')" href="human_pheromone_questions_answers.php"><IMG height=23 alt="Frequently Asked Questions about pheromones" src="images/nav/FAQ_off.gif" width=175 border=0 name=img4></A></TD>
<TD bgColor=#000000><A onmouseover="imgAct('img5')" onmouseout="imgInact('img5')" href="contact_alpha_dream.php"><IMG height=23 alt="contact Alpha-Dream" src="images/nav/contact_off.gif" width=181 border=0 name=img5></A></TD>
<TD bgColor=#000000><IMG height=23 src="images/nav/endpiece.gif" width=14 border=0></TD>
</td></tr></table></p>
<!--[if !IE]>-->
</object>
<!--[if gte IE 6]></OBJECT></NOSCRIPT><!--<![endif]-->
<!--<![endif]-->
</object>
<!--[if gte IE 6]></OBJECT></NOSCRIPT><!--<![endif]-->
</div>
<!-- end navigation swf object code -->
</td>
</tr></table>
here's the site:http://www.alpha-dream.com Sorry for all the code, but if someone could help, it would be great. thanks 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... Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! 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. 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> 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 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? 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? 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? 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? Well 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? 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 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? 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! |
|||||||