|
HTML - Layout Problem Png Over Flash
Hello, I am having trouble placing my PNG file over my flash. I am using z index and absolute positioning but the PNG will not center itself on the webpage over the flash file. It ends up in a weird position above the flash.
Thanks! Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ss - [design, photo, art]</title>
<meta name="description" content="ss - Los Angeles Graphic Designer, Photographer, and Artist" />
<meta name="keywords" content="graphics graphic design designer designs portfolio website los angeles california ca ss print photography photograph poster posters illustration illustrations catalogs catalog company branding logo logos stationery magazine editorial" />
<style type="text/css">
/*<![CDATA[*/
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
}
div#frame{
/*placement*/
position:absolute;
z-index:9999;
}
#flash{
position:absolute;
z-index:1;
}
/*]]>*/
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16886040-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
body {
background-image: url(content/background.jpg);
}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div id="frame"><img src="content/frame.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></div>
<div id="flash"></div>
<table width="100" border="0" cellspacing="0" cellpadding="0"></table>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600"><param name="movie" value="ss3.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="ss.swf" width="800" height="600"><!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>--></object> <!--<![endif]--></object></td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
swfobject.registerObject("FlashID");
//]]>
</script>
</body>
</html>
Similar TutorialsSo I downloaded this http://www.flashmo.com/preview/flash...humbnail_stack flash template, and the URLs don't work. When I click on a picture, it's supposed to redirect me to a webpage, but when I do this nothing happens. I've tried this with several different flash templates from other websites but the same problem happens. This is a problem that is not really a problem. With one of my websites, the flash does not display properly when I view the site from a file on my computer. When I view the site online, everything is properly displayed. When viewing the file (when I test the page with my CoffeeCup html editor) in the browser, flash items such as video players, news feeds, and audio players, show with the bottom and right hand portions clipped off. Again, when viewing the page on the web, everything is normal. I have coded the flash on this page the same way I have coded it on my other websites, and on the other sites there is no problem. I have gone over the stylesheet for the page and found no errors. I have been unable to find any html coding errors that might account for this. Anyone else ever run into this sort of thing? Hello! This is the page I'm trying to embed Flash: JUZD at Holt Refrew page - not working but it's not working. Here's the JUZD at Holt Renfew Flash - working. What am I doing wrong? Please help. At the right of this page I added a news scrolling in flash, when I open this website in Safari or Firefox there is NO PROBLEM! But when I open it in Internet Explorer I get a weird error "Bewerking Afgebroken" It is Dutch and don't know what it will mean in English, After I get this error the page stop loading and I only see the topbar of my website. HELP Website: http://liv9.net/television/index.php (the flash script is a rss flash script, so the news is from another website) Hello, I have flash website that I want it to be opened by html page. What I need to do if I have an html page that when I press on link on this page it will open my flash page on full screen (fit screen)? I have this website for example of my question: www.federicafontana.it Thanks to anyone that will help. Best regards, Fabio. aaaaaaaaaaaaaaaaaa Hello all, I just got a job working for a school and noticed their website was pretty much unorganized. So yesterday i took up dreamweaver and created this page(the rest of the site is pending acceptance/working of this main page): http://pratt.broward.edu/colejw/Attucks/ However, it did come with problems. In IE it displays fine, everything seems to work. But.. Firefox doesn't seem to like my menu bar and flash scroller combo. In firefox the flash scroller appears over the drop down menu, below is a picture of what i mean. Everything below the menu bar is in a table, so its not the table itself since the drop down appears over the pictures and other text. The only thing overriding it is the flash scroller. Anyone have any ideas? i played with Z-index and such but no luck and in one instance it moves everything from the menu down over to the right of the menu, i could also be placing the z-index's in the wrong place. If anyone has any fixes please let me know. Hi! I have exported an flash movie to a html file. The file is located at http://magnetik.eu/files/ratas If move around the menu you will notice that is a line break at the top. Right between the flash file and the top of the browser. Any idea how can I get rid of it? Thank you Hey everyone, I'm having a problem with a Flash .swf file in my HTML page. If I input the code one way, it works in Firefox and not in IE. If I do it another way, it works in IE and not Firefox. The approach I was thinking of taking was using conditional statements in Javascript, however I'm having problems arranging the code to properly implement it. And believe me, I've reworked this file and I'm getting nothing that works on both at the same time. Suggestions for both methods would be great -- If you'd like me to post the code I could do so. Thank you! 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. Having a problem with my layout Here is the link... I can't get the text to stop overflowing out of the div. It only seems to be doing it horizontally. Vertically it is doing fine but i'm trying to get the background image to stretch and it wont do it! Hello all! Got this huge problem which kept me up for like 30 hours now. The layout on http://www.easydialer.nu/facelift/index.html couldn't be more different in IE than FF. How in the world can be able to get the layout that is shown in FF, work in IE? Feels like I've tried everything now. Every suggestions, thoughts or help will be warmly appreciated. Thank you! Hi there I have a layout problem with a news listings page. The listings are database driven and some results pages are fine whereas some others break. I wonder if anyone can help me? http://www.zleeps.co.uk/news.asp?offset=30 Cheers, Kev Okay, first of all sorry for posting so much, just I keep on running into problems with my layout that I'm making. Hmm, so I'm using the "hover", "active", and "visited" attributes for my layout that I'm creating right? When I click on the link, it turns into the automatic purple after I've visited it(or whatever color it is?). I don't want the automatic purple. I just want to keep it the same color (light blue) that it already is. I tried making it so that its blue after its visited, but what happened was that none of the "hover" tributes were applied. Can someone help me? Link: http://www.freewebs.com/noeylani94/index.htm Hi There, Im a new member to this site and have become one due to a layout problem I just cant seem to sort - Never had it before and can normally sort this type of issue but am stumped! The address is: http://www.adamsgraphicdesign.co.uk/sf/index.htm When you browse through the navigation buttons at the top you will notice some pages skip left a couple of pixels. I need to stop this and make sure all pages remain in the same place - Any hints or cures on this would be massively appreciated as it needs to go live this weekend!!!! Cheer in advance Overtired and confused! In IE7 and 8, the layout of the page is fine but in IE6 it seems to wrap the long table to the end of the page (down). Now, im just looking at the source/code and didnt design the layout but no idea why its doing it. from what I am seeing, when the width of the table with the columns exceeds the width of the page, scrollbars are being added (which is fine) and therefore it shows the entire table right at the bottom fo the page instead of where it should be, in the middle/next to the content on the left handside. not sure what more to add as I cannot publish a link as there is no live site but in development. its using tables, tr's and th's Code: <thead> <tr> <th> Name </th> <th> Address 1 </th> <th> Address 2 </th> <th> Address 3 </th> <th> City </th> <th> County </th> <th> Post code </th> <th> Switchboard </th> <th> Fax </th> <th> Url </th> <th> Business sector </th> <th> Status </th> <th> First name </th> <th> Last name </th> <th> Title </th> <th> Job title </th> <th> Email </th> <th> Direct dial </th> <th> Mobile </th> <th> Mail DPA suppression </th> <th> Date mail DPA suppressed </th> <th> Email DPA suppression </th> <th> Date email DPA suppressed </th> <th> Telephone DPA suppression </th> <th> Date telephone DPA suppressed </th> <th> F10 registration </th> </tr> </thead> when from the firstname heading to the last column heading is removed, the layout is fine.... but when adding them in, thats where the problem happens. any ideas? Hello. =) A few weeks ago, I made this thread saying that I'm (basically) still new to HTML...and now I'm forcing myself to use an HTML editor. (I decided to use KompoZer, and I've been using it for a few days.) Right now, I'm playing around with it and trying to create different site layouts. I came up with a design (which involves using DIVs), but I'm really having some problems: What the site is supposed to look like [GIF image] What the site actually looks like (for now) [HTML document - CSS is embedded in the page] ...Truth be told I drew that picture first, then I went online and found a similar-looking layout (since I can't make one from scratch yet; I still don't really understand how DIVs+CSS work). So I tried modifying the layout as best I could, and I didn't do such a great job. ^^; Anyway, I want the layout to be "liquid", so if you resize your browser everything shrinks nicely. But whenever I reduce my browser size, the header and footer start moving. How do I stop this from happening? Can anyone tell me the correct code I should be using? Thanks in advance!! PS: 1) You see those "white spaces" in the picture I drew? Well, I figure the best way to add those spaces is by modifying some background images, like what I did here. If I'm wrong, or you know a better way to do this, please tell me!! 2) If you scroll the HTML document, you might notice that it's hard to read the top line of text (because it's "hidden" behind the header DIV). I think the best way to solve this problem is by making the bottom of the header DIV transparent...or, by adding a second DIV at the bottom of the header, and then making that second DIV transparent. I heard you can use "filter:chroma" to do this, but for some reason I can't get it to work with hex colors OR pictures. =( 3) Do you think it's easier/makes more sense to try and edit this other layout instead? It scrolls the same way, and it already has a header and footer...plus the bottom of the header is already a different color, so I should be able to make it transparent. This layout doesn't have a side column, but I can make one using code like this, right?: HTML Code: body {
color: white;
background-color: #000000;
background-image: url(stars_bg3.gif);
background-image: url(foot-head.gif) bottom 300px right;
background-repeat: no-repeat;
background-attachment: fixed;
border-top: 6px solid white;
border-right: 0;
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid #FFFFFF;
padding-left: 184px;
overflow: hidden;
margin: 0px;
}
I created this portal to help promote my business in a competition I was invited to take place. Anyways it works in FF, Chrome, Safari, but doesn't work in IE. I wonder if anyone could help me figure out the problem. I feel confident I"m just stupidly overlooking something. Vote.VisiblyCreative.com |
|||||||