Basically the majority of my content is flash based. I designed it using Flash Builder (Flex) and Its in a liquid layout, (everything is in percents) and if im JUST embedding the flash content it scales
to the page fine, and i have the flash content set
to have a padding of 50 px.
I put a header div in fine with no problems, but I have 2 problems, the first being the footer div seems
to cover up the buttom of the flash content in IE, but it looks just fine in chrome. How can I solve this? I'm using the stock embed code that Flex provides, I tried
to edit the css style for the div which I think is #flashContent and give it a min width and min height but it didnt seem
to work, actually anything I did
to #flashContent didn't seem
to do anything, maybe its not the div i need
to be adding that attribute
to...
And my other problem is I dont even know where
to start when it comes
to placing a div thats 280width by 600height colum
to the right side of the flash content. If i could specify a size for the flash content, and the float it left, and float the colum right, and clear it with the container div id be just fine....But remember the flash content is set
to 100% Scale (well techically 100%x80% because it looked better that way).
Does anyone know how I can start
to deal with creating a more complex scaleable flash layouts that includes other divs? ALL WELL MAINTAINING IE SUPPORT? IE is ruining my life.
Here's the code I'm using:
(or if it will help you visualize what im trying
to do here's the page where im working on setting this up http://apumpkinpatch.com/textmashnew/)
<!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" lang="en" xml:lang="en">
<head>
<title>TextMixup</title>
<meta name="google" value="notranslate">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="../appassets/scripts/jquery.titlealert.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19768131-2']);
_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);
})();
function tabNotification()
{ $.titleAlert('New Message!', {interval:200,requireBlur:true,stopOnFocus:true}); }
function joinNotification()
{ $.titleAlert('Joined Chat!', {interval:200,requireBlur:true,stopOnFocus:true}); }
</script>
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!--
END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "10.2.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "TextMixup";
attributes.name = "TextMixup";
attributes.align = "middle";
swfobject.embedSWF(
"TextMixup.swf", "flashContent",
"100%", "80%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id="homebar"><a href="http://apumpkinpatch.com"><img src="../appassets/images/logo/logoHor_130_30.png" alt="APumpkinPatch HOME" width="130" height="30" hspace="10" vspace="3" border="0"/></a>
</div>
<div id="topad">
<script type="text/javascript"><!--
google_ad_client = "pub-5824388356626461";
/* 728x90, textmash */
google_ad_slot = "1114351240";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="mainContainer">
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
10.2.0 or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="80%" id="TextMixup">
<param name="movie" value="TextMixup.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="TextMixup.swf" width="100%" height="80%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted
to run or Adobe Flash Player version
10.2.0 or greater is not installed.
</p>
<!--<![endif]-->
<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" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
<div id="convosPreview">This is a div I would want
to appear as a colum
to the right of the flash content that can scale</div>
<!---End mainContainer -->
</div>
<div id="footer">
<a href="../apps.html"><img src="../appassets/images/apps.png" hspace="5" vspace="5" alt="random chat app apumpkinpatch" width="228" height="40" border="0" /></a><a href="https://chrome.google.com/webstore/detail/hjmnobclpbhnjcpdnpdnkbgdkbfifbao?hl=en-US#"><img src="../appassets/images/chromeapp.png" alt="chrome app random video chat apumpkinpatch" width="115" height="40" vspace="5" border="0" /></a><br /><br />
<a href="http://spacebarup.com" target="_blank">©2011 Space Bar</a> | <a href="../tos.html">TOS & Privacy Policy</a> | <a href="../help.html">FAQ & Help</a> | <a href="../tips.html">Important online safety tips</a> | <a href="http://www.facebook.com/pages/APumpkinPatchcom/164279206963001?sk=app_2373072738" target="_blank">Discussion Boards</a><br />
<p>You must be at least 18 years of age
to access this web site.<br />APumpkinPatch.com is not responsible for the actions of any visitors of this site.<br />APumpkinPatch.com does not endorse or claim ownership
to any of the content that is broadcast through this site. </p><h2>A Pumpkin Patch is BRAND NEW and will be developed a lot over the next few months adding video chat games, chat rooms, and more! Check back often it's going
to be a lot of fun!</h2>
</div>
</body>
</html>
myCSS:
html, body {
height:100%;
}
body {
text-align:center;
font-family: Helvetica, Arial, sans-serif;
margin:0;
padding:0;
overflow:auto;
text-align:center;
background-color: #ffffff;
}
object:focus {
outline:none;
}
#homebar {
clear:both;
text-align: left;
width: 100%;
height: 40px;
background-color:#333333;
color:#CCC;
overflow:hidden;
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
margin-bottom: 10px;
}
#mainContainer {
height:auto;
width:auto;
clear:both;
}
#flashContent {
display:none;
height:auto;
float:left;
min-height: 500px;
min-width: 340px;
}
/**this is the div i want
to appear as a column net
to the scaleable flash content **/
#convosPreview {
float:right;
width:280px;
height:600px;
}
