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;
}
