HTML - Transparent Flash Site
I have a website which consists of a flash movie, which is transparent, placed on top of an image. Currently the only way I can do this is with:
Code: <div style="position: absolute; top: 0; left: 0; width: 800px; height: 604px; z-index: 3"> Which doesn't allow me to scale the elements, as they are positioned absolutely. What I want to be able to do is position the elements one on top of each other, but have their height set to 100% rather than a fixed amount, and for them to be centered. Any ideas? Thanks Fred Similar TutorialsHello everybody! My name is Myron, and I'm a bit stumped on a code we are using at school. The teachers gave us the following HTML we could use for a site we made, but so far it seems to be only working on FireFox and Chrome I'll use this site as an example: http://www.hildevos.com/ As you can see, IE seems to be loading the page, but then fails to show the Flash-component in the middle of the screen. FireFox and Chrome don't seem to have this problem, which is nice, but I really want to run the site on all webbrowsers! This is the code we are using: Quote: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1"> <title>www.hildevos.com</title> <meta content="Dutch, Nederlands" name="language" /> <meta name="description" content="Hilde Vos, The Official Website." /> <meta name="Keywords" content="Hilde, Vos, A Heartbeat Away, Country, Singer Songwriter, Music, Nederlandse zangeres"/> <meta name="revist-after" content="15 days"> <meta name="distribution" content="global"> <meta name="robots" content="ALL"> <style type="text/css"> #swf_gecentreerd { width: 990px; height: 590px; position: absolute; top: 50%; left: 50%; margin-left: -495px; margin-top: -295px; } </style> </head> <body> <div id="swf_gecentreerd"> <object type="application/x-shockwave-flash" data="Index.swf" width="100%" height="100%"> <param name="allowScriptAccess" value="Index.swf" /> <param name="loop" value="false" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="wmode" value="opaque" /> <param name="bgcolor" value="#FFFFFF" /> <embed src="Index.swf" width="100%" height="100%" loop="false" allowscriptaccess="sameDomain" menu="false" quality="high" scale="noscale" wmode="opaque" bgcolor="#FFFFFF"></embed> </object> </div> </body> </html> If someone could please look at the code and snuff out all the errors, I'd be really happy! Thanks in advance!! if i have a flash site and a non-flash site at the same domain, how does a mac visitor get directed to the correct (non-flash) site? thanks for the newb help! berbes Hi All, I've been working on a portfolio website for a little while now, which is currently built as a hybrid html and flash. I was hoping to code the whole thing in html, but was having some problems with the horizontal scrolling portion of the site. You can see how it looks he jcolt.com There are 2 main things that are holding me back from this being entirely html: I'd like to change the appearance of the scroll bar, so it looks like what i've done in the current flash version. I'm also trying to map the scroll wheel on the mouse to scroll horizontally, across the gallery. Currently it works like this in the flash version, but again, trying to do it in html. I've seen it done successfully on this site: http://www.ptarmak.com/ My question is mainly; how complicated would this be to do? I have a working knowledge of html, but most of this site has been trial and error. Secondly, could anyone point me in the direction of code, or a discussion of how to do this? Thanks in advance. Hi there! I'm quite a newbie to webdesign and programing and right now I'm really stucked! I hope this is the right Forum to post my question! So I'm working at a html based website, and I'm trying to show my photos in a simpleviewer gallery which I want to embed in the html side (I work with tables). however I want this flash gallery to adjust the size depending on screen or window size... which I some how also managed: see he http://www.dgclick.com/portfolio/index.html (just the gallery not embedded) and now my problem...I'm trying to embed this gallery in the html, which I managed in general, just that the gallery is tiny and doesn't resize at all!! see here--> http://www.dgclick.com/portfolio/portfolio_en.html that's how I embedded it: <embed src="viewer.swf" width="100%" height="auto"!important height:"100%" bgcolor="#161317" name="viewer" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" scale="exactfit"></embed> what's wrong with it!! Please help me!! Thanks Dani Hi, My client needs an html website. It has to be easy to edit the text later on his own when the site is done. How would you suggest I build it? (I am familiar with dreamweaver for html) It will also have some flash content. (flash content need not to be editable, only stable so it doesn't change position from page to page. menu will be in flash) Is joomla any good for my client? how should I do it? Thanks a lot for your advice, js. i'm trying to put a transparent png img on a colored background, in IE6 the transparent part of the img appears as a color instead of transparent how can i fix that??? the attached imgs shows how it's appearing in IE6 and FF I have a jailbroken iPhone 4 and I am trying to get a flash embed to display on it but I am having a lot of trouble. i have successfully used and enabled different flash objects elsewhere but this is the only one that wont run. so I know it will work. HTML Code: <head> <title>iSwim</title> </head> <body> <div style="width: 320px; height: 356px; margin-top: 80px; margin-bottom: 44px;"> <object width="320" height="356"> <param name="movie" value="http://listen.grooveshark.com/widget.swf" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" /> <embed src="http://listen.grooveshark.com/widget.swf" type="application/x-shockwave-flash" width="320" height="356" flashvars="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" allowScriptAccess="always" wmode="opaque" /></object> </div> </body> Can anyone help me to make sure the flash displays right? what happens is the player loader displays at the top instead of the center and the control buttons are present before it loads. then after the loader fails it shows a "cannot connect" error. so I think the flash object is resizing inside its self. can anyone help me clean up this script so it will display correctly in iPhone safari (with flash enabled)? website is he smalldotdesign.zxq.net/iSwim.html that is where the HTML file is located that I am trying to get corrected. thanks in advance. i have a feeling this is going to be a tough fix. Hi, I want to implement something like this into my website, with a single 'snipped-off' corner image on an otherwise square, bordered content surround. I'm really not sure what would be the best way to do it, though. Would you use divs or tables, and how exactly would you go about implementing it? ( example: ) P.S. the real layout isn't that hideous, thankfully--just clear colours so you can see what's going on. Any help would be greatly appreciated! J-L Hi, As the title suggests, i need a code to make an iframe transparent. I know there are so many other sites and forums out there which give u the code to do this, but it don't seem to be working for me. What is wrong? Does this code need to be in the head tags of the page that contains the iframe or in the source page itself? Or does it need to be in the body? here is the bit i am talking about: HTML Code: <body STYLE="background-color:transparent"> Please could someone help me and give me step-by steps of what to put where. Thank you Hi, I have a header in blue, and the text is black. I would like the header to be a darker blue, and the text transparent. Could anyone help? Thank you. Nick I have a part in my site wherer if u go out of line, it will start a scrollin thing, ill show u how it is now. on the part where it is squared in red instead of that color can i get it transparent? also on the outside of the arrows! p.s. here is the codes: Catagory: Code: <!--Other :Other--> <td valign="top"> <div class="content" style="position:relative; overflow: auto; width:150px; height:100px; left:-95px; top:700px;"> <font face="verdana" size="2"> Other<br> <!--Search Form Starts--> <center><FORM action="/cgi-bin/htsearch" method="post"> <input type="hidden" name="restrict" value="http://www.spt.pcaworld.net"> <input type="hidden" name="exclude" value="/index.html"><p> Search: <input type="text" name="words" size=20 maxlength=20 value=""> <input type="submit" value="Search"><br> Match: <select name="config"> <option value="htdig">with Extensions <option value="exact">Exactly </select> </form> <!--Credit Starts--> <!--http://htdig.sdsu.edu by Andrew Scherpbier andrew@contigo.com--> <!--Credit Ends--> </center> <!--Search Form Ends--> <!-- Start Bravenet.com Service Code --> <center><script language="JavaScript" type="text/javascript" src="http://pub38.bravenet.com/counter/code.php?id=401896&usernum=3260284116&cpv=2"></script></center> </div> </td> here is the style: Code: <!--Style--> <style type="text/css"> A:link { color: #000000; text-decoration: none; font-weight: italic;} A:visited { color: #EC0010; text-decoration: none; font-weight: normal;} A:hover { color: #000000; text-decoration: none; font-weight: normal;} body { SCROLLBAR-FACE-COLOR: #D70018; SCROLLBAR-HIGHLIGHT-COLOR: #D70018; SCROLLBAR-SHADOW-COLOR: #D70018; SCROLLBAR-3DLIGHT-COLOR: #D70018; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #FB0000; SCROLLBAR-DARKSHADOW-COLOR: #FB0000; BACKGROUND-COLOR: #000000; } .bgtable { border: 0px solid #000000; background-color: #EC0010; background-image:url("http://i12.tinypic.com/61n9q81.png"); width: 1007px; height: 802px;} .content { border: 0px solid #000000; color: #000000;} </style> <!--/Style--> plz help! http://junksen.tumblr.com/ Hi! i just wanted to know if i can make the right bar, the post area, and the left bar transparent so i can see the background through them if anyone can help me out, please let me know y0! I am suprised i have never come across this before i am sure i must have tried adding a png with no background to a non-white page background and viewing it in IE6, so i have just found that IE6 gives a transparent png a bluey/grey background. After a quick google it seems thereis a solution for IE wwhich is to use, filter:progidXImageTransform.Microsoft.AlphaImageLoader() which i tried and it works as it should but i am suprised i have never seen or heard of this code before, consdering the amout of html code i have ever looked through which is a lot, someone must have used a transparent png on their site, what am i missing why have i never seen this before ?? Hi, I have to make my div transparent so that content(text and image) of container div donot become transparent. Attaching my code u can change image name. Code: <html> <head> <title>Image opacity script - www.designplace.org</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .transparent{ filter:alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; } .notTransparent{ filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <div style="width: 500px; height: 500px; background-color: red;" class="transparent"> <div class="notTransparent"> A <span class="notTransparent">transparent</span> div. <img id="tuxie" src="next.gif" width=254 height=46 style="-moz-opacity:30%;filter:alpha(opacity=30)"> </div> </div> </body> </html> Problem :-- In my case every thing in container div becomes transparent. How can I make sure that image and text does not becomes transparent however container div whose background color is red becomes transparent. Thanks Does anyone know how to make the radio button transparent? I need to put a radio button on a textured background but I don't want the rectangle and actual button to show up on top of the background. I wanna the image working as a radio button. Thanks in advance! Hi, I used the following code below to straighten out a problem with transparent png files in IE5.5/6. The title png file that floats with the text over the background image is fixed but the google banner at the base of the page is still filling in the transparent area with white. Code fix: http://homepage.ntlworld.com/bobosola/index.htm My page: http://www.muskmagazine.com/wintertrends.html Any suggestions would be much appreciated. Thanks Justin I have this code in my website: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>PinkuHaruKoneko</title> </head> <body text="#ffffff"> <font face="arial"> <style> <!-- A{height:1px;behavior:url(linkhilight.htc);filter:progid:dximagetransform.microsoft.gradientwipe duration=1)} A:link { text-decoration: none; color:#ffffff;} A:visited { text-decoration: none; color:#ffffff; } A:hover { text-decoration:line-through; cursor: crosshair; color:#ffffff;} body { scrollbar-arrow-color: #CEE0F6; scrollbar-darkshadow-color: #090E3C; scrollbar-track-color:#090E3C; scrollbar-face-color: #275674; scrollbar-shadow-color:#CEE0F6; scrollbar-highlight-color:#CEE0F6; scrollbar-3dlight-color: #090E3C; text-align:justify} h1 { border: 1px solid #000000; background-color:#0000ff; font-size:14px; text-align:center; } --> </style> With that code, text align justify -elements doesn't work and h1 doesn't work at IE. If I take away that thing before <html>, it works but in IE bg isn't transparent anymore. Is there anything what I can replace that doctype-thing and get that code work in Mozilla and IE? Hi Friends, I have problem in IE6 using transparent png image. I have already include the IE6 png fix javascript file. If suppose using img tag, its no problem, but I set the png image within my td background its not display properly. here my code : <td align="center" valign="middle" style="background-image:url(images/footer_bg.png); background-repeat:no-repeat;"> also i attached the sample image. this is my problem. so anybody knows or face the same problem give me the solutions. Yours, vjn_23 (vijayan M) I am wondering if it is possible to create an INDEX.HTML to redirect to another website? I would like it to display the redirected site, but if possible keep to the original address.. e.g. A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar. Hope I explained ok, any responce would be much appricated! Thanks! |