Hi,
I’m trying to position some CSS at the top left of this page: http://bit.ly/aNczxF
The main fbContainer element is where the Flash lies.
However, I’d like to place some CSS over this.
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Brochure</title>
<link href="css/liquid-green.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/liquid.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/oceanbook.js"></script>
<script type="text/javascript" src="js/bookSettings.js"></script>
</head>
<body style="background:#000">
<div id="fbContainer" style="background:#000">
<a class="altlink" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"><div id="altmsg">Download Adobe Flash Player.</div></a>
</div>
<div id="fbFooter">
<div id="fbContents">
<select id="fbContentsMenu" name="fbContentsMenu"></select>
<span class="fbPaginationMinor">p. </span>
<span id="fbCurrentPages">1</span>
<span id="fbTotalPages" class="fbPaginationMinor"></span>
</div>
<div id="fbMenu">
<img src="img/btnZoom.gif" width="36" height="40" border="0" id="fbZoomButton" /><img src="img/btnPrint.gif" width="36" height="40" border="0" id="fbPrintButton" /><img src="img/btnDownload.gif" width="36" height="40" border="0" id="fbDownloadButton" /><img src="img/btnDiv.gif" width="13" height="40" border="0" /><img src="img/btnPrevious.gif" width="36" height="40" border="0" id="fbBackButton" /><img src="img/btnNext.gif" width="36" height="40" border="0" id="fbForwardButton" /></div>
</div>
</body>
</html>
CSS:
html, body{
padding: 0px;
margin: 0px;
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
#fbFooter {
height: 49px;
background-color: #000000;
background-image: url('../img/footerBackground.gif');
background-repeat: repeat-x;
}
.fbPaginationMinor {
/*color: #4e6605;*/
color:#fff;
margin-left: 10px;
}
#fbContents {
float: left;
margin-top: 17px;
margin-left: 15px;
}
#fbMenu {
float: right;
margin-top: 9px;
margin-right: 15px;
}
#altmsg {
position: absolute;
background-color:#000000;
padding: 20px;
opacity: 0.6;
filter: alpha(opacity=60);
text-align:center;
}
#altmsg:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
a.altlink:link {
color: #FFFFFF;
}
a.altlink:visited {
color: #DDDDDD;
}
a.altlink:hover{
color: #FFFFFF;
}
Any ideas how to achieve this?
Many thanks
Well you could wrap the <object> in a <div> and tehn place whatever you want overlayed on the flash inside that same div :).
You could give it position:absolute
The flash will need this param added though
<param name="wmode" value="transparent" />
Sounds good.
You may have noticed from the HTML I’m using the SWFObject for embedding Flash. Would this still work ok?
Can you show me the CSS I’d use for this solution?
Just wrap the <object> in a <div>
Assuming you put like … a <p> inside the <div> you could just do (assuming the <p> has the ID “pants”
p#pants{position:absolute;top:0;left:0;}
And the param will be needed
Yes you will need to modify the JS which loads the params (to include one)
Thanks Ryan.
So my swfobject.js would read something like:
...
var par = "";
for (var j in parObj) {
if (parObj[j] != Object.prototype[j]) { // Filter out prototype additions from other potential libraries
par += '<param name="' + j + '" value="' + parObj[j] + '" />';
}
}
par += '<param name="wmode" value="transparent" />';
el.outerHTML = '<div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object><p id="trousers">bit of text goes here</p></div>';
objIdArr[objIdArr.length] = attObj.id; // Stored to fix object 'leaks' on unload (dynamic publishing only)
r = getElementById(attObj.id);
...
p#trousers{position:absolute;top:0;left:0;}
Does that make sense?
if your trying to position css OVER flash, I ran into this problem before, and the fix/trick was that both the flash and the element overlaying the flash movie have to have position of either absolute or relative.
take a look at http://www.everythingclosets.com how the dropdown menus float over the flash movie.
No actually the trick is is that the flash needs the param I noted above (the link you posted has the param in it ;)) :).
Your JS sniippet isn’t enough. I’d need to see the entire script where the variables are being declared.
Though I’m no expert in JS so going over to that forum may be more appropriate
your right, it does, i think it needs both though if i’m not mistaken,
both the wmode=‘transparent’ AND relative or absolute positioning, or maybe that just just to animate the dropdown over it, i know positioning had somethin to do with it.
peace!
Well normally you won’t try and overlap something like a dropdown so I see your point. It probably does need some sort of position
Hey Ryan,
The entire script is at the URL in the OP. http://bit.ly/aNczxF
You can see 4 scripts, including the swfobject.js.
Will my code in post #5 suffice?
I don’t speak JS so if your code from post 5 doesn’t work head over to the JS forum
Unfortunately I seem to be coming across some IE6 issues
On this version: http://bit.ly/aNczxF the red box appears in IE6, but not in Firefox 3.6
Dang, we were so close too
I’m afraid I’m still stuck with this.
I just want to place a <div> in the top left corner of this page.
Could someone please take a look at my demo link(http://bit.ly/aNczxF ) and let me know where I’m going wrong with this?
Many thanks
PaulOB
February 4, 2010, 9:37am
14
Hi,
If you are trying to place the element called #pants then do something like this:
[B]<div class="wrap">[/B]
<div id="fbContainer" style="background:#000;"> <a class="altlink" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"> <span id="altmsg">Download Adobe Flash Player.</span> </a> </div>
[B] <p id="pants">test</p>
</div>[/B]
p#pants {
position:absolute;
top:0;
left:0;
color:#fff;
z-index:999;
background:red;/* for testing */
width:200px;/* for testing */
height:200px;/* for testing */
}
That assumes that the flash has the opaque or transparent settings.
<param name="wmode" value="transparent"> <!-- object code -->
wmode="transparent" <!-- embed code -->
Many thanks for the quick reply Paul.
Unfortunately, the change to p#pants doesn’t seem to have made a difference to the page: http://bit.ly/aNczxF wrap class?
Thanks again for your help.
PaulOB
February 4, 2010, 9:49am
16
Yes I forgot to post it.
.wrap {
width:100%;
position:relative;
}
You also need to ensure that flash is set as mentioned in my above post with wmode settings.
Thanks for that Paul
I’m still having issues though
Here’s a snippet of my swfobject.js:
var par = "";
for (var j in parObj) {
if (parObj[j] != Object.prototype[j]) { // Filter out prototype additions from other potential libraries
par += '<param name="' + j + '" value="' + parObj[j] + '" />';
}
}
par += '<param name="wmode" value="transparent" />';
el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + ' wmode="transparent">' + par + '</object>';
objIdArr[objIdArr.length] = attObj.id; // Stored to fix object 'leaks' on unload (dynamic publishing only)
r = getElementById(attObj.id);
}
I added this: par += ‘<param name=“wmode” value=“transparent” />’;
Any ideas what I need to try next?
PaulOB
February 4, 2010, 10:03am
18
Hmm, when I view generated source I don’t see a wmode parameter .
<object style="visibility: visible; height: 629px;" id="fbContainer" data="Book.swf" type="application/x-shockwave-flash" width="100%" height="100%">
<param value="always" name="allowScriptAccess">
<param value="#50607" name="bgcolor">
<param value="bookWidth=826&bookHeight=584&pagesSet=pages/page-001.jpeg,pages/page-002.jpeg,pages/page-003.jpeg,pages/page-004.jpeg,pages/page-005.jpeg,pages/page-006.jpeg,pages/page-007.jpeg,pages/page-008.jpeg,pages/page-009.jpeg,pages/page-010.jpeg,pages/page-011.jpeg,pages/page-012.jpeg,pages/page-013.jpeg,pages/page-014.jpeg,pages/page-015.jpeg,pages/page-016.jpeg,pages/page-017.jpeg,pages/page-018.jpeg,pages/page-019.jpeg,pages/page-020.jpeg&scaleContent=true&preserveProportions=false&centerContent=true&hardcover=false&hardcoverThickness=3&hardcoverEdgeColor=16777215&highlightHardcover=true&frameWidth=0&frameColor=0&frameAlpha=100&firstPageNumber=1&autoFlipSize=50&navigationFlipOffset=30&flipOnClick=true&handOverCorner=true&handOverPage=true&alwaysOpened=false&staticShadowsType=Asymmetric&staticShadowsDepth=1&staticShadowsLightColor=16777215&staticShadowsDarkColor=0&dynamicShadowsDepth=1&dynamicShadowsLightColor=16777215&dynamicShadowsDarkColor=0&moveSpeed=2&closeSpeed=3&gotoSpeed=3&rigidPageSpeed=5&flipSound=sounds/02.mp3&hardcoverSound=&preloaderType=Thin&pageBackgroundColor=329223&loadOnDemand=true&allowPagesUnload=true&showUnderlyingPages=false&playOnDemand=true&freezeOnFlip=false&darkPages=false&smoothPages=false&rigidPages=false&flipCornerStyle=first page only&flipCornerPosition=bottom-right&flipCornerAmount=50&flipCornerAngle=20&flipCornerRelease=true&flipCornerVibrate=true&flipCornerPlaySound=false&zoomEnabled=true&zoomPath=pages/large/&zoomImageWidth=992&zoomImageHeight=1403&zoomOnClick=true&zoomUIColor=329223&zoomHint=Double click for zooming.&centerBook=true&useCustomCursors=false&dropShadowEnabled=false&dropShadowHideWhenFlipping=true&backgroundColor=329223&backgroundImage=img/bookBackground.jpg&backgroundImagePlacement=fit&printEnabled=true&printTitle=Print Pages&downloadURL=http://www.test.com/ocean_brochure_2008.pdf&downloadTitle=Download PDF&downloadSize=Size: 3.6 Mb&downloadComplete=Complete&extXML=" name="flashvars">
</object>
Have you updated the script?
Good shout Paul.
Will take a closer look and see what I can do. Sorry for the inconvenience, I think we’re almost there
P.S. How did you view the generated source?
PaulOB
February 4, 2010, 10:10am
20
P.S. How did you view the generated source?
With the Firefox web developer toolbar. You can view source or view generated source.
This is working with the wmode added to the generated code. Just copy and paste and test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="visibility: visible;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Brochure</title>
<link href="css/liquid-green.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.michaelmcg.co.uk/brochure/js/liquid.js"></script>
<script type="text/javascript" src="http://www.michaelmcg.co.uk/brochure/js/oceanbook.js"></script>
<script type="text/javascript" src="http://www.michaelmcg.co.uk/brochure/js/bookSettings.js"></script>
<style media="screen" type="text/css">
html, body {
padding: 0px;
margin: 0px;
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
#fbFooter {
height: 49px;
background-color: #000000;
background-image: url('http://www.michaelmcg.co.uk/brochure/img/footerBackground.gif');
background-repeat: repeat-x;
}
.fbPaginationMinor {
/*color: #4e6605;*/
color:#fff;
margin-left: 10px;
}
#fbContents {
float: left;
margin-top: 17px;
margin-left: 15px;
}
#fbMenu {
float: right;
margin-top: 9px;
margin-right: 15px;
}
#altmsg {
position: absolute;
background-color:#000000;
padding: 20px;
opacity: 0.6;
filter: alpha(opacity=60);
text-align:center;
}
#altmsg:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
a.altlink:link {
color: #FFFFFF;
}
a.altlink:visited {
color: #DDDDDD;
}
a.altlink:hover {
color: #FFFFFF;
}
#fbContainer {
visibility:hidden
}
</style>
<style type="text/css">
.wrap {
width:100%;
position:relative;
}
p#pants {
position:absolute;
top:0;
left:0;
color:#fff;
z-index:999;
background:red;
width:200px;
height:200px
}
</style>
</head>
<body style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<div class="wrap">
<object style="visibility: visible; height: 570px;" id="fbContainer" data="http://www.michaelmcg.co.uk/brochure/Book.swf" type="application/x-shockwave-flash" width="100%" height="100%">
<param value="always" name="allowScriptAccess">
<param value="#50607" name="bgcolor">
<param name="wmode" value="transparent">
<param value="bookWidth=826&bookHeight=584&pagesSet=pages/page-001.jpeg,pages/page-002.jpeg,pages/page-003.jpeg,pages/page-004.jpeg,pages/page-005.jpeg,pages/page-006.jpeg,pages/page-007.jpeg,pages/page-008.jpeg,pages/page-009.jpeg,pages/page-010.jpeg,pages/page-011.jpeg,pages/page-012.jpeg,pages/page-013.jpeg,pages/page-014.jpeg,pages/page-015.jpeg,pages/page-016.jpeg,pages/page-017.jpeg,pages/page-018.jpeg,pages/page-019.jpeg,pages/page-020.jpeg&scaleContent=true&preserveProportions=false&centerContent=true&hardcover=false&hardcoverThickness=3&hardcoverEdgeColor=16777215&highlightHardcover=true&frameWidth=0&frameColor=0&frameAlpha=100&firstPageNumber=1&autoFlipSize=50&navigationFlipOffset=30&flipOnClick=true&handOverCorner=true&handOverPage=true&alwaysOpened=false&staticShadowsType=Asymmetric&staticShadowsDepth=1&staticShadowsLightColor=16777215&staticShadowsDarkColor=0&dynamicShadowsDepth=1&dynamicShadowsLightColor=16777215&dynamicShadowsDarkColor=0&moveSpeed=2&closeSpeed=3&gotoSpeed=3&rigidPageSpeed=5&flipSound=sounds/02.mp3&hardcoverSound=&preloaderType=Thin&pageBackgroundColor=329223&loadOnDemand=true&allowPagesUnload=true&showUnderlyingPages=false&playOnDemand=true&freezeOnFlip=false&darkPages=false&smoothPages=false&rigidPages=false&flipCornerStyle=first page only&flipCornerPosition=bottom-right&flipCornerAmount=50&flipCornerAngle=20&flipCornerRelease=true&flipCornerVibrate=true&flipCornerPlaySound=false&zoomEnabled=true&zoomPath=pages/large/&zoomImageWidth=992&zoomImageHeight=1403&zoomOnClick=true&zoomUIColor=329223&zoomHint=Double click for zooming.&centerBook=true&useCustomCursors=false&dropShadowEnabled=false&dropShadowHideWhenFlipping=true&backgroundColor=329223&backgroundImage=img/bookBackground.jpg&backgroundImagePlacement=fit&printEnabled=true&printTitle=Print Pages&downloadURL=http://www.test.com/ocean_brochure_2008.pdf&downloadTitle=Download PDF&downloadSize=Size: 3.6 Mb&downloadComplete=Complete&extXML=" name="flashvars">
</object>
<p id="pants">test</p>
</div>
<div id="fbFooter">
<div id="fbContents">
<select id="fbContentsMenu" name="fbContentsMenu">
<option value="1">Cover</option>
<option value="1">Back</option>
</select>
<span class="fbPaginationMinor">p. </span> <span id="fbCurrentPages">1</span> <span id="fbTotalPages" class="fbPaginationMinor"> / 20</span> </div>
<div id="fbMenu"> <img style="cursor: pointer;" src="http://www.michaelmcg.co.uk/brochure/img/btnZoom.gif" id="fbZoomButton" width="36" border="0" height="40"><img style="cursor: pointer;" src="http://www.michaelmcg.co.uk/brochure/img/btnPrint.gif" id="fbPrintButton" width="36" border="0" height="40"><img style="cursor: pointer;" src="http://www.michaelmcg.co.uk/brochure/img/btnDownload.gif" id="fbDownloadButton" width="36" border="0" height="40"><img src="http://www.michaelmcg.co.uk/brochure/img/btnDiv.gif" width="13" border="0" height="40"><img style="cursor: pointer;" src="http://www.michaelmcg.co.uk/brochure/img/btnPrevious.gif" id="fbBackButton" width="36" border="0" height="40"><img style="cursor: pointer;" src="http://www.michaelmcg.co.uk/brochure/img/btnNext.gif" id="fbForwardButton" width="36" border="0" height="40"></div>
</div>
</body>
</html>
