I am having trouble getting the image to show up in my html
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/web/20120116002959oe_/http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="580" height="250">
<param name="movie" value="images/stockbridgeiron.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/stockbridgeiron.swf" width="580" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>
css code
div#header {
width: 928px;
height: 250px;
background: url(images/bg-header.jpg) top left no-repeat;
text-align: right;
}
It's because the background is overwritten with this selector:
.thrColFixHdr #header
You can add !important to your background property to override it.
background: url(images/bg-header.jpg) top left no-repeat !important;
Related
Div tag with SWF content and background image should auto stretch so that the height of the background image and the div tag change accordingly to the SWF content. And they should not go behind div tags that are positioned under them, like the footer for example.
What I would like to achieve can be seen here on this website, where the SWF game loads.
I am quite a beginner in web design and was asked to achieve this, so I am sorry if this actually a stupid question and easily done, I just couldn't find any tutorials or explanations of how it is done.
this is the css of the page: (the div tag in question is #game )
* {
margin:0;
padding:0;
}
body {
height: 100%;
background-image: url(_assets/gray_bcg.png);
background-repeat: repeat;
background-x-position: center;
background-y-position: top;
background-attachment: fixed;
background-color: #ccc;
margin: 0;
}
#container {
display:block;
width:100%;
}
#wrapper {
height:auto!important;
min-height:100%;
position:relative;
width:918px;
background-image:none;
background-repeat:repeat-y;
margin:0 auto;
padding:0;
}
#content {
width: 918px;
}
#header {
display: block;
height: 368px;
width: 914px;
cursor: pointer;
background-image: url(_assets/1header.png);
background-repeat: no-repeat;
margin: 0 auto;
}
#headerSides {
display: block;
width: 100%;
height: 734px;
z-index: -1;
background-image: url(_assets/1sidebars.png);
background-repeat: no-repeat;
background-position: center top;
}
#headerLeft {
float: left;
position: absolute;
width: 916px;
background-image: none;
margin: 200px 0 0;
left: 0px;
}
#nav {
float:left;
width:584px;
margin:0;
padding:0;
}
#headerSides #wrapper #header #headerLeft #search {
height:59px;
width:306px;
float:right;
margin:-58px 0 0;
}
#add1 {
background-image: url(_assets/recatangle_ad_container.png);
float: left;
height: 105px;
width: 746px;
margin: 0 0 10px;
}
#logo {
background-image: url(_assets/logo_container.png);
float: right;
height: 106px;
width: 166px;
}
.centered {
display:block;
height:65px;
width:122px;
margin:15% auto 5%;
}
#game {
background-image: url(_assets/gcont917x605.png);
height: auto;
width: 917px;
margin-top: 110px;
padding-top: 25px;
padding-left: 160px;
background-repeat: no-repeat;
}
#footer {
background-image: url(_assets/footer.png);
background-repeat: no-repeat;
width: 917px;
clear: both;
height: 300px;
float: left;
}
and this is the 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>Untitled Document</title>
<link href="games.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="headerSides">
<div id="wrapper">
<div id="header">
<div id="headerLeft">
<div id="navbar">
<a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','_assets/_menu/n_home_over.png',1)">
<img src="_assets/_menu/n_home.png" alt="Home" width="117" height="60" id="Home" />
</a>
<a href="games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('games','','_assets/_menu/n_games_over.png',1)">
<img src="_assets/_menu/n_games.png" alt="Games" width="117" height="60" id="games" />
</a>
<a href="blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','_assets/_menu/n_blog_over.png',1)">
<img src="_assets/_menu/n_blog.png" alt="Blog" width="117" height="60" id="blog" />
</a>
<a href="forum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forum','','_assets/_menu/n_forum_over.png',1)">
<img src="_assets/_menu/n_forum.png" alt="Forum" width="117" height="60" id="forum" />
</a>
<a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','_assets/_menu/n_about_over.png',1)">
<img src="_assets/_menu/n_about.png" alt="About" width="117" height="60" id="about" />
</a>
</div>
<!-- ends navbar -->
<div id="search">
<img src="_assets/search_bt.png" width="306" height="59" alt="search" />
</div>
<!-- ends search -->
<div id="add1">
<img src="_adds/728x90.jpg" alt="add1" width="726" height="88" align="right" />
</div>
<!-- ends add1 -->
<div id="logo">
<img src="_assets/efLogo.png" width="122" height="65" alt="logo" class="centered" />
</div>
<!-- ends logo -->
<div id="content">
<div id="game">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400" align="middle" id="FlashID" title="epic boss fighter">
<param name="movie" value="_games/EpicBossFighter.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 data="_games/EpicBossFighter.swf" type="application/x-shockwave-flash" width="600" height="400" align="middle">
<!--<![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>
</div>
<!-- ends game -->
<div id="footer"></div>
</div>
<!-- ends content -->
</div>
<!-- ends headerleft -->
</div>
<!-- ends heADER -->
</div>
<!-- ends wrapper -->
</div>
<!-- ends headerSides -->
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
why can't i see the video, it just show a white space. (i edited the link of the video)
if i check the video on youtube its fine.
if i right click on the white space it says "movie not loaded" but even if i wait doesn't happen anything. i also uploaded the video on the ftp of the website, can i just load it from there? how?
<html>
<head>
<title></title>
</head>
<body style="margin:0px auto; text-align:center; color:white;" >
<div id="container" style="margin:0; padding:0; text-align:center;" >
<div id="main" style="width:100%;margin:0px auto;">
<div id="hdr" style="background-image:url(bg.jpg);float:left;width:100%;height:110px;">
</div>
<div id="hdr2" style="background-image:url(fascia.png);float:left;width:100%;height:70px;">
footer
</div>
<div id="bdy" style="background-image:url(bg.jpg);float:left;width:100%;height:70px;">
body
</div>
<div id="ftr" style="background-image:url(bg.jpg);float:left;width:100%;height:500px;">
<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/xxxxxxxxx"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/xxxxxxxxx" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<div id="ftr2" style="background-image:url(bg.jpg);float:left;width:100%;height:280px;">
</div>
</div>
</div>
</body>
</html>
Use this:
<iframe width="640" height="360"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Hopes this helps!
I have <div> element to show pop-up message. I already set z-index:1000 and add <iframe> but the div element still doesn't show above the live streaming video (embed plugin) in Safari browser. I used Chrome and Firefox, both of which work, but it doess't work in Safari Windows.
This is my code in a Fiddle.
<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<object>
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
</object>
</div>
<div id="draggable">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div>
Can anyone find any issues with this code?
You need to change/set your wmode to opaque.
<embed src="..." wmode="opaque"></embed>
And try setting the appropriate type for the first object.
<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>
http://jsfiddle.net/8C2py/7
As far as I can remember flash is on top of all HTML elements.
You can try to hide it when the pop up is there. Unfortunately I haven't seen a work around for that yet.
One good method is to have a place holder image that is the same size as the video and toggle them
<div class="video">
<!-- video here -->
</div>
<div class="placeholder" style="display:none;">
<img src="path/to/placeholder.jpg"
</div>
when you have the pop up opened
$(".video").css('display','none');
$(".placeholder").css('display','block');
Here are the specs of the z-index property (src: w3.org):
Each box belongs to one stacking context. Each positioned box in a
given stacking context has an integer stack level, which is its
position on the z-axis relative other stack levels within the same
stacking context.
I think that <div class="drag"> is not in the same stacking context as your flash objects.To make sure that the stacking context is correct, make the <div id="draggable"> also relative, and give it a higher z-index than the <div> that contains the flash objects.
Note: I'm not able to test Safari at the moment, so let me know if it works or not:
<div style="position:relative; z-index:1;">
... your flash objects...
</div>
<div id="draggable" style="position: relative; z-index: 2;">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div>
works IE FF Chr & Saf
Placing a div over an iframe/video...
to place div over an image just replace the iframe w/ your image ....
trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:220px; height:140px;">
<iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
or if you want to use your Object code....
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:260px; height:190px;">
<object class="Vid" >
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
</object>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
and the avi code....
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:260px; height:190px;">
<object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
So, if you go to MySpace for example (http://www.myspace.com/sonidolalimpia) you see now the logo have a very interesting effect when you put your mouse over, how they did this?
As already was written, all trick not in the flash, but in the css and jQuery. They uses jQuery onMouseOver Event and simply switch the picture version of the logo with a transparent flash one.
before
<h2>
<a href="/" class="MSIcon MSLogo" id="msStaticLogo" style="left: 0pt;">
Myspace
</a>
</h2>
<div id="flashLogoContainer">
<a href="/">
<span id="logoInTrigger">
Myspace
</span>
</a>
<object width="354" height="475" type="application/x-shockwave-flash"
data="http://cms.myspacecdn.com/cms/x/11/3/bag.swf" id="msFlashLogos"
style="visibility: visible; top: -28px; left: -9999px;">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="bgcolor" value="transparent">
<param name="allowscriptaccess" value="always">
</object>
<span class="MSIcon beta" id="beta">Beta</span>
<div id="leftLogoTrigger" style="display: none;"></div>
<div id="rightLogoTrigger" style="display: none;"></div>
<div id="bottomLogoTrigger" style="display: none;"></div>
</div>
</li>
after
<li class="logo">
<h2>
<a href="/" class="MSIcon MSLogo" id="msStaticLogo" style="left: -9999px;">
Myspace
</a>
</h2>
<div id="flashLogoContainer">
<a href="/">
<span id="logoInTrigger">
Myspace
</span>
</a>
<object width="354" height="475" type="application/x-shockwave-flash"
data="http://cms.myspacecdn.com/cms/x/11/3/bag.swf" id="msFlashLogos"
style="visibility: visible; top: -28px; left: -120px;">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="bgcolor" value="transparent">
<param name="allowscriptaccess" value="always">
</object>
<span class="MSIcon beta" id="beta">Beta</span>
<div id="leftLogoTrigger" style="display: block;"></div>
<div id="rightLogoTrigger" style="display: block;"></div>
<div id="bottomLogoTrigger" style="display: block;"></div>
</div>
</li>
I have a flash movie, height = 151px width = 228, this is placed within a table cell (
cellpadding = 0 cellspacing = 0 vertical-align = top), but when it displays within the explorer windows there is a white space about 20px above the flash movie. I want the flash movie to appear directly under the grey lines.
Here is a screen shot of the current issue:
Here is my code for this page:
<table style="width: 900px; vertical-align: top;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 900px; height: 306;" colspan="6" valign="bottom">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="880" height="306">
<param name="movie" value="AFM/opening_HKA.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="AFM/opening_HKA.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="880" height="306"></embed>
</object>
</td>
</tr>
<tr>
<td style="width: 355px; height: 151px; font-family: Verdana; font-size: 10pt; padding-left: 35px; padding-top: 7px; text-align: left; vertical-align: top;">
HK America LLC is a leading portfolio investment group. HK America is an active
private investment partnership that uses strategies with the goal of generating high
returns again commercial dwellings.
</td>
<td style="width: 80px; height: 151px;"></td>
<td style="width: 228px; height: 151px; padding: 0 0 0 0; margin: 0 0 0 0; vertical-align: top; text-align: left; border-top-color: Silver; border-top-width: 1px; border-top-style: solid;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="228px">
<param name="movie" value="AFM/button_HKA_Timeline.swf" />
<param name="quality" value="high" />
<embed src="AFM/button_HKA_Timeline.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="228px""></embed>
</object>
</td>
<td style="width: 25px; height: 151px;"></td>
<td style="width: 228px; height: 151px; vertical-align: top; text-align: left; border-top-color: Silver; border-top-width: 1px; border-top-style: solid;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="228">
<param name="movie" value="AFM/button_HKA_Opportunities.swf" />
<param name="quality" value="high" />
<embed src="AFM/button_HKA_Opportunities.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="228"></embed>
</object>
</td>
<td style="width: 35px;"></td>
</tr>
</table>
Could you post some of your code so we know exactly what you are doing. Based on your information I could assume that:
the title is within the table
the table containing the titles and the movies has an extra row (or more) between the title and movie which is 20 px tall
or the title is not in the table
that there is a 20 px space between your title and the table