Author Topic: Roph or Nouman sirs. Halp. (Read 1950 times)

#1 • Mar 30, 2010

I'm trying to get this damn flash object to sit below the rest of the page, essentially creating a background image. At the moment, the other div tags (other than Layer) push below the object instead of layering on top. I've tried it with the other div tags outside of the Layer div, and it's the same thing. Halp. Make my flash sit lower

My HTML

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>airdog</title>
<link href="airdog_css.css" rel="stylesheet" type="text/css" />
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body>

<div id="layer">
<!----------------------- START my flash object ------------------------>
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'FLASHbkg',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'exactfit',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'FLASHbkg',
			'bgcolor', '#ffffff',
			'name', 'FLASHbkg',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'FLASHbkg',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="98%" id="FLASHbkg" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="FLASHbkg.swf" />
    <param name="quality" value="high" />
    <param name="scale" value="exactfit" />
    <param name="bgcolor" value="#ffffff" />
    <param name = "wmode" value="transparent" />	
    <embed src="FLASHbkg.swf" quality="high" scale="exactfit" bgcolor="#ffffff" width="100%" height="98%" name="FLASHbkg" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
	</object>
</noscript>
<!----------------------- END my flash object ------------------------>


<div id="header">
This is a header.</div>
<div id="left">
This is the left, body.</div>
<div id="right">
This is the right, body.</div>
<div id="footer">
This is the footer.</div>
</div>

</body>
</html>

My CSS

Code: [Select]

body {
	background-color: #000000;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

#layer {
	position: absolute; 
	width:'100%'; 
	height:'100%'; 
	z-index: 1; 
	left: 1px; 
	top: 1px;
}

#header {
	position: relative;
	width: auto;
	height: 100px;
	z-index: 2;
}

#left {
	position: relative;
	float: left;
	width: 500px;
	height: 700;
	z-index: 2;
} 

#right {
	position: relative;
	float: right;
	width: auto;
	height: 700;
	z-index: 2;
} 

#footer {
	position: relative;
	width: auto;
	height: 50px;
	z-index: 2;
}

#2 • Mar 30, 2010

You cannot trust overlapping a flash object. Notice how youtube's user menu is different when you're watching a video - so it doesn't overlap (rather, in many cases it would go behind) the video player.

Depending on browser/version, flash version and whatever other configs, you run a chance of making everything else meant to appear "over" the flash invisible, as the flash takes the front stage.

I encountered this problem a few years ago and simply gave up, they'd have to make do with not using the main menu while playing videos (though actually it works now for me in firefox). I never found a solution.

Since your flash could possible end up in front of everything else, you may use a transparent wmode, and transparency in your flash content to have stuff behind your SWF be visible, however links will not work through a transparent wmode'd flash as long as it is still in front. It's basically just like a glass window. You can look but not touch.

If somebody is trying to make you do that, explain why it's bad and wrong (you shouldn't use flash anyway, unless perhaps you're dealing with video/audio) and try something else =o

There's lots of javascript gimmicks that allow moving stuff around and things like that, available nowadays, and for which I have no interest in, so I can't help you with those. jquery is the most popular one.

#3 • Mar 30, 2010

i didn't read all of this page yet, but, maybe this will help solve what i'm trying to do?

http://www.alohatechsupport.net/webdesignmaui/maui-web-design-articles/layer_flash_under_html.html

also, it's not particularly for any client i have or anything. It's for my thesis project. The flash is a giant ass background image that fades into a new image every 10 seconds. The website is just a full browser window image that changes every 10 seconds. Then I'm trying to fit the content on top of it (obviously).

edit ---------------------------

Sooo, i threw in all that code from that page i posted. It came out like the attached image. >_>
So, it's on top of the flash, however, the flash is now cut into 1/3. So only the left side is visible, which I'm confused about, I didn't really change any sizes. Here's the updated code:

HTML

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>airdog</title>
<link href="airdog_css.css" rel="stylesheet" type="text/css" />
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body>
<div id="container">
	<div id="flash">
<!----------------------- START my flash object ------------------------>
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'FLASHbkg',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'exactfit',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'FLASHbkg',
			'bgcolor', '#ffffff',
			'name', 'FLASHbkg',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'FLASHbkg',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="98%" id="FLASHbkg" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="FLASHbkg.swf" />
    <param name="quality" value="high" />
    <param name="scale" value="exactfit" />
    <param name="bgcolor" value="#ffffff" />
    <param name="wmode" value="transparent" />	
    <embed src="FLASHbkg.swf" quality="high" scale="exactfit" bgcolor="#ffffff" width="100%" height="98%" name="FLASHbkg" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
	</object>
</noscript>
<!----------------------- END my flash object ------------------------>
	</div>
    
    <div class="body">
    This is the body.
    </div>
    
</div>

</body>
</html>

CSS

Code: [Select]

body {
	background-color: #000000;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

#flash {
	width:'100%'; 
	height:'100%'; 
	position: absolute; 
	z-index: 0;
}

.body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    margin-left: 15px;
    margin-top: 35px;
    padding: 5px;
    font-weight: bold;
    line-height: 14px;
    position: absolute;
    z-index: 1;
}

#4 • Apr 1, 2010

I fix'd that issue yesterday. I didn't think to do it since I thought it would be redundant, but in the CSS for the flash I just added a width: 100%;. That fixed it. Didn't think I needed it since it's in the HTML like 2 or 3 times already.

So I got it up and moving a lot more now.

Looks like this now,

I have it so that those boxes are actually a frame that loads other webpages inside of it. That's the whole basis of my website. The site stays on this page while loading necessary information inside of the larger box to the left. The box to the right of that is actually going to be 100% transparent on load. The website is essentially an online store or catalog for this company, so in the larger left box, you can scroll through the products and when you click on a thumbnail, the right box will appear and show a larger image of the thumbnail of that product and some additional information below it.

#5 • Apr 1, 2010

Anything you put in a frame is made invisible to search engines. If they have other web dev guys and you give them that, I'd imagine they'd shout at you. Or if they told you to iframe everything that search engines would find valuable, you should shout at them.

#6 • Apr 1, 2010

it's not going live. it's going to sit on screen on a local computer for a show lol
it's apart of my senior thesis, a proof of concept. this website doesn't even work on any browser except safari anyways haha.
but yeah, i'm using iframe there.