Html/css background flash help!
I seriously need some help. I am somewhat new to flash and
need some help as soon as possible (ANY REPLY will be greatly
appreciated). I submitted an earlier post under the topic "masking
a fading image," but no one has replied (I didn't mean for it to
sound ignorant or retarded, but I'm just trying to find the right
words to accomplish what I'm trying to do. I will break the entire
task down into more appropriate topics and take it one step at a
time.
My first step is as follows: I've created a flash movie file
that I would like to set as the background in an html page. Is this
possible? I do know when I publish the flash as a transparent web
page, I can view the source, copy that, and integrate it into the
html page I want to create (with a background color ="#000000") as
long as the flash file is saved within the directory of the web
content. However, the code (since it is transparent) seems to be
just placed on the html page (on the foreground), and the animation
will hover over any links or pics that are also place within the
page. Is there a way to set the whole flash file in the background
of the html page, so it doesn't seem to hover over other content?
Thank you ahead of time.
Joe
Your basic issue is getting HTML to appear over top of an
embedded SWF. If you want to make the SWF literally a background
image like using the CSS rule "background," that is not possible.
If, however, you just need some piece of HTML to appear over top of
a Flash movie(common need is a drop down menu -- like adobe.com
homepage), then there are workarounds, but they are not fun and not
always reliable:
http://www.google.com/search?q=html+over+flash&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-U S:official&client=firefox-a
Similar Messages
-
Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images
Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
ChrisGreetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris -
Catalyst and HTML/CSS Round Trip with Flash?
Question one: I was wondering if Catalyst will be able to assist in importing into Flash an existing (or under development) HTML page which contains flash apps --to make technical changes such as insert more multimedia? audio, swf, jpgs, etc?
I have a nearly completed html/css page that contains Flash etc., but I'd like to add a new swf at the beginning of the page and edit it in Flash to be sympatico with the overall style established in Dreamweaver. I am using CS4 Premium Creative Suite.
I know how to bring Flash files into Dreamweaver but a round trip would be so great! Can Catalyst do it? or what do you recommend?
Question two: I am hoping to give Catalyst Beta a try where do I sign in for it?
Joy Foraker
I Web WomanHey Joy,
Currently there isn't any way to go between Flash Catalyst and Flash CS4. You can bring the SWFs you create in Catalyst into Dreamweaver in the same way you bring in other SWFs, but it won't be able to edit or change any of your current Flash files.
And the public beta is getting close, we're still looking at late May, early June. You can sign up here - http://www.adobe.com/cfusion/mmform/index.cfm?name=flashcatalyst_notify - to be notified when Catalyst goes beta.
=Ryan
[email protected] -
Importing HTML with CSS in Flash
I've tried all the tutorials, searched the web for tuts,
downloaded files and I am still not getting it. So this is what I
want to do:
First the names:
Dynamic text field name: htmwelcome
HTML file name: welcome.html
CSS file name: style1.css
How should the code read to have
welcome.html load into the dynamic text field
htmwelcome with CSS style sheet
style1.css.
What modifications should be made to
welcome.html so that the coding does not appear.
Hope this makes it simple. Be nice if they had a tut that
started with the names outlined at the beginning then how the code
should be written and why.Have a look at these example files. Its not a tutorial, but it should get you started.
http://www.ddg-designs.com/downloads/importedTextwithCss.zip -
Help Editing code from a published html file with flash detection enabled from flash
hi guys ive publish a html file with flash detection enabled from flash
heres the code from the publish html:
<!-- saved from url=(0013)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>main</title>
<script language="javascript"> AC_FL_RunContent = 0; </script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 45;
// -->
</script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// embed the flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
'width', '800',
'height', '600',
'src', 'main',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'main',
'bgcolor', '#ffffff',
'name', 'main',
'menu', 'true',
'allowScriptAccess','sameDomain',
'allowFullScreen','false',
'movie', 'main',
'salign', ''
); //end AC code
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here.'
+ 'This content requires the Adobe Flash Player.'
+ '<a href=http://www.macromedia.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
// -->
</script>
<noscript>
// Provide alternate content for browsers that do not support scripting
// or for those that have scripting disabled.
Alternate HTML content should be placed here. This content requires the Adobe Flash Player.
<a href="http://www.macromedia.com/go/getflash/">Get Flash</a>
</noscript>
</body>
</html>
now since the default codes places my flash movie on upper left corner, ive made my own tables with the flash on it, how or where do i place this code to the upper codes?
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th valign="middle" scope="col"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th height="600" bgcolor="#333333" scope="col"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','800','height','600','src','main','quality','high','pluginspage','http://www.adobe.com /shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','main' ); //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=9,0,28,0" width="800" height="600">
<param name="movie" value="main.swf">
<param name="quality" value="high">
<embed src="main.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"></embed>
</object></noscript></th>
</tr>
</table></th>
</tr>
<tr>
<td height="30" bgcolor="#990000"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="col"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><div align="left" class="style1">Copyright 2009 St. Paul of the Cross Parish. All Rights reserved.</div></th>
<th width="400" scope="col"><div align="right" class="style1">Usage outside our permissions guidelines requires our prior written consent.</div></th>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table>
Tnx in advance!Hi
Can you tell me which version of dreamweaver you are using (and flash pro, if you have it), as the code you provided has element of a number of different versions (e.g. your js flash files are reasonably new, but your flash inserted into the html body is old, but with the cs3 version of flash player indicated!). Also the detect flash file is no longer required.
PZ -
HTML generated by Flash failed validation test
Hello guys,
I have created a simple Flash website:
http://www.icebergfilms.com
It's HTML was also created in Flash using Publish Settings. However, when I tried to validate this HTML using online validator, it failed the test:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.icebergfilms.com%2F&charset=%28detect+a utomatically%29&doctype=Inline&group=0&No200=1&verbose=1&user-agent=W3C_Validator%2F1.654
I am a complete novice in Flash and in HTML, so could please anyone give me some advise how to fix this?
Thank you so much for your help.Thank you so much for your response.
I actually did try (with help of some guys from html forum) to use text editor to generate HTML and simply just embed that swf file onto that HTML document.
It works well, but there is one little problem. Very first thing viewer see (after clicking on URL to upload my site) is black background with
white rectangle which is the space where swf movie will appear. It last around 2-3 seconds. Then preloader appears and everything goes normal. But this white empty space before preloader shows up is very weird.
here is that code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.icebergfilms.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Subject" content="IcebergFilms specializes in promotional videos and demos, environmental projects, adventure documentaries, live sport events, corporate and training videos and videos for fundraising presentations.">
<meta name="Description" content="IcebergFilms is a local video production company located in Vancouver BC specializing in promotional videos, adventure documentaries, training and educational videos, demo reels, live sport evets, videos for fundraising presentations, etc.">
<meta name="Keywords" content="video production in Vancouver, videographer in Vancouver, video production services, professional, editing, promotional, demo, film, educauional, outdoors, expeditions, documentaries, corporate, dvd, hdv, hd, advertising, environmental, video stock footage, fundraising, high definition, nature, digital, live events, sport, kayaking, hiking, trekking, biking, training, final cut pro, videographer for hire, vancouver, bc, canada">
<meta content="General" name="rating">
<meta content="index,follow" name="robots">
<meta content="ALL" name="robots">
<meta content="5 days" name="revisit-after">
<title>>Promotional Video Production company in Vancouver - IcebergFilms</title>
<style type="text/css">
body {
background-color:#000;
object {
display:block;
margin:auto;
</style>
</head>
<body>
<div>
<object type="application/x-shockwave-flash" data="IcebergFilms.swf" width="810" height="600">
<param name="movie" value="IcebergFilms.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
</object>
</div>
</body>
</html>
This white space does not happened when using HTML generated by Flash, however, that one on the other hand misses some basic elements.
Should I then maybe just use the code above , delete this BODY sectiont:
<div>
<object type="application/x-shockwave-flash" data="IcebergFilms.swf" width="810" height="600">
<param name="movie" value="IcebergFilms.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
</object>
</div>
and replace it with BODY section from Flash generated HTML?
I apologize for this chaotic post, but I am trying to create the correct code for about 2 weeks now, and I am starting to lose it
Thanks again for your response .... and for your patience. -
How can I use my Html/CSS Navigation bar to control an Edge Stage?
I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
<li><a href="/home" class="three-d">
Dynamic
<span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
</a></li>
<li><a href="/demos" class="three-d">
Work
<span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
</a></li>
<li><a href="/deals" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
</a></li>
<li><a href="/about" class="three-d">
Profile
<span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
</a></li>
<li><a href="/about" class="three-d">
Contact
<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
</a></li>
</ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-57204389 { visibility:hidden; }
.block-menu {
display: block;
background: #000;
.block-menu li {
display: inline-block;
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One',Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
/* animation domination */
.three-d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
transition: all .07s linear;
position: relative;
.three-d:not(.active):hover {
cursor: pointer;
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
-moz-transform: translateZ(-25px) rotateX(90deg);
-webkit-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
.three-d-box {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
</style>
<!--Adobe Edge Runtime End-->
</head>
<body>
<div id="menu"><ul class="block-menu">
<li><a href="/home" class="three-d">
Dynamic
<span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
</a></li>
<li><a href="/demos" class="three-d">
Work
<span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
</a></li>
<li><a href="/deals" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
</a></li>
<li><a href="/about" class="three-d">
Profile
<span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
</a></li>
<li><a href="/about" class="three-d">
Contact
<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
</a></li>
</ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
targetComp.getStage().play();" class="three-d">
Dynamic
<span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
</a></li> -
I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The "sponsors" div will not align with the top of "headlines"
and "content" divs. Thanks so much for any help.
MarkHi Mark --
Rather than using such huge margins (536 px for #sponsors!)
try this layout.
It's basically the same structure as your page.
Hope this helps.
John
<style type="text/css">
body {
font-family: verdana, "Trebuchet MS", Arial;
margin-top: 30px;
text-align: center;
font-size: 100%;
margin-bottom: 20px;
background-color: #97895e;
h1 {
font: bold normal 15px Arial, Helvetica, sans-serif;
color: #b3060c;
text-align: left;
margin: 0px;
padding: 0px;
h2 {
color: #b3060c;
text-align: left;
margin-bottom: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
h3 {
color: #b3060c;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
margin-top: 5px;
margin-bottom: 2px;
padding-top: 3px;
h4 {
color: #b3060c;
text-align: left;
font-size: 80%;
margin-top: 7px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
padding: 0px;
p {
color: #000000;
text-align: left;
margin: 0px 0px 0px 1px;
padding: 5px 0px 0px;
font-size: 80%;
#wrapper {
position: relative;
padding: 0px;
width: 760px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
text-align: left;
background-repeat: no-repeat;
background-position: left top;
#header {
background-image: url(../assets/page_elements/header.gif);
background-repeat: no-repeat;
height: 106px;
background-position: right;
#content {
float: right;
width: 350px;
margin-left: 32px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
padding-right: 5px;
margin-top: 15px;
#leftsidebar {
float: left;
width: 182px;
margin-top: 15px;
#leftsidebar h2 {
font: bolder 10pt Arial, Helvetica, sans-serif;
color: #b3060c;
text-align: left;
padding-left: 20px;
#rightsidebar {
float: right;
width: 172px;
margin-top: 15px;
margin-left: 10px;
padding-right: 5px;
#rightsidebar p {
font-size: 70%;
#rightsidebar h2 {
color: #b3060c;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
.clearer {
clear:both;
height: 1px;
overflow: hidden;
line-height: 1px;
margin-top:-1px;
background-color: #97895e;
#footer {
background-color: #FFFFFF;
background-image:
url(../assets/page_elements/arch_bottom.gif);
background-repeat: no-repeat;
height: 30px;
#bottomnav {
background: #97895e;
color: #544324;
text-align: center;
font-size: 70%;
padding: 15px;
#bottomnav p {
color: #544324;
text-align: center;
font-size: 85%;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<!--end header DIV -->
<div id="leftsidebar">
<h2>#leftsidebar DIV </h2>
</div><!--end leftsidebar DIV -->
<div id="rightsidebar"style="padding-bottom: 20px;">
<h2>#rightsidebar DIV </h2>
</div>
<!--end rightsidebar DIV -->
<div id="content">
<h2>#content DIV </h2>
</div>
<!--end content DIV -->
<br style="clear:both;"/>
<div id="footer"></div><!--end footer DIV
-->
<div id="bottomnav"><p>Bottom navigation and
copyright notice</p>
</div><!--end bottomnav DIV -->
</div><!--end wrapper DIV -->
</body>
</html> -
CSS- Background img not showing up in container
Hello, I am new to css but not to webpages. I used to design
pages using tables and now I want to learn and design using css.
But I'm having trouble and I figure its a quick fix. Note this
website is not on line I am doing my test use IE 7 and Firefox ver
2 PC Ver.
Q: I'm trying to design a website for a client and I am have
trouble try to get my background img to show up in my #container.
Here is sample of my basic layout. Hope some could help me.
@charset "utf-8";
body {
background-color: #271a0b;
background-image: url(../images/bgStrip.gif);
background-repeat: repeat-x;
#container {
width: 100%;
height: 900px;
overflow: hidden;
background-image: url(/images/backGround.jpg);
background-repeat: no-repeat;
background-position: 0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="asset/screen.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="container">Content for id
"container" Goes Here</div>
</body>
</html>
body background is working. Note: Got the codes samples from
CSS Cookbook, good book learning allot but can't seem to get it to
work. Hope some could help me.If the page in question is one level below the root of the
site, and if the
images folder is at the same level as the root of the site,
then both links
would be correct.
Also, since background-position defaults to "0", there's no
reason to
restate it.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Virginia Carter" <[email protected]>
wrote in message
news:[email protected]...
> Without seeing the page on the web, it's somewhat
difficult to see exactly
> where the problem is, but this is curious:
>
> body {
> background-color: #271a0b;
> background-image: url(../images/bgStrip.gif);
> background-repeat: repeat-x;
> }
>
> #container {
> width: 100%;
> height: 900px;
> overflow: hidden;
> background-image: url(/images/backGround.jpg);
background-repeat:
> no-repeat;
> background-position: 0;
> }
>
> It's looking in two different places for those images:
>
> ../images and /images
>
> Check that and then see if you still have troubles.
>
> --
>
> Virginia Carter
> Carolina Web Creations
> ======================
> www.carolinawebcreations.biz
>
> borgru12 wrote:
>> Hello, I am new to css but not to webpages. I used
to design pages using
>> tables and now I want to learn and design using css.
But I'm having
>> trouble and I figure its a quick fix. Note this
website is not on line I
>> am doing my test use IE 7 and Firefox ver 2 PC Ver.
>>
>> Q: I'm trying to design a website for a client and I
am have trouble try
>> to get my background img to show up in my
#container. Here is sample of
>> my basic layout. Hope some could help me.
>> @charset "utf-8";
>>
>> body {
>> background-color: #271a0b;
>> background-image: url(../images/bgStrip.gif);
>> background-repeat: repeat-x;
>> }
>>
>> #container {
>> width: 100%;
>> height: 900px;
>> overflow: hidden;
>> background-image: url(/images/backGround.jpg);
background-repeat:
>> no-repeat;
>> background-position: 0;
>> }
>>
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
>> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="asset/screen.css" rel="stylesheet"
type="text/css" />
>> </head>
>>
>> <body> <div id="container">Content for
id 'container' Goes Here</div>
>>
>> </body>
>> </html>
>>
>>
>> body background is working. Note: Got the codes
samples from CSS
>> Cookbook, good book learning allot but can't seem to
get it to work. Hope
>> some could help me.
>> -
Classic/static html+css export
Unfortunately i've never really figuerd out all that div-floating margin-and-padding-overlaping css mambo jumbo
I always prefered flash over html+css becouse of its logical visual approach and I even developed my own little news cms and we suppose to live happily ever after but apple crew that all up ;(
is it posible to make nice and clean layout in flash and then convert it to html+css?
with semantics like container symbol -> container div and buttons become functional links?
that would get smile back on my face :/
i would appreciate any help!Unfortunately i've never really figuerd out all that div-floating margin-and-padding-overlaping css mambo jumbo
I always prefered flash over html+css becouse of its logical visual approach and I even developed my own little news cms and we suppose to live happily ever after but apple crew that all up ;(
is it posible to make nice and clean layout in flash and then convert it to html+css?
with semantics like container symbol -> container div and buttons become functional links?
that would get smile back on my face :/
i would appreciate any help! -
How to 'Publish' layout or extract the HTML/CSS?
OK, I created a nice layout, how do I "Publish" it -- i.e. extract the HTML/CSS so I can use it on an actual web site page? The "Reflow Overview" and other such Adobe "Getting Started" videos don't say and when I looked for such a thing as "Extract" or "Publish" or even "Upload" [ala Flash and/or Dreamweaver), all I found was "Save" and "Save As" which saves the Project as an arcane RFLW file.
Since I found no other question like this on the Forum, I'm beginning to wonder if I'm missing something obvious!There was a recent update to a thread on this:
How to export Edge Reflow work file to Dreamweaver
Long story short, it will be easier to export code in the next release of Reflow. Until then you can get the HTML and CSS from the preview folder or you can get just the CSS from the code popover by clicking on the "<>" button on the bottom bar:
Hope that helps and thanks for using Reflow,
Chris -
i have a css background gradient... but when i scroll, the gradient stick in the loading height.
what can i do to have the gradient correct always?
html {
height:100%;
body {
height:100%;
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: -moz-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(84,84,84,0.9)), color-stop(100%, rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
background: linear-gradient(top, rgba(84,84,84,0.9) 0%, rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6545454', endColorstr='#e6000000', GradientType=0 );
margin: 0;
padding: 0;
color: #000;Don't know about the Javascript - you basically would need to create a listener that would detect when the window size changed and the reapply the CSS gradients. One issue with that approach is that it can become a bit of a resource hog.
For approach #2 check out: http://www.designbyfire.com/ - scroll and look at the bottom of his text content - he's using a transparent png graphic to create a kind of fade gradient effect (it's very subtle). Take a look at the source to see how he did it. Also this might be helpful:
http://www.1stwebdesigner.com/inspiration/beautiful-gradient-effects-on-web-design-researc h-part-2/ - a bunch of sites that use this technique for background gradients.
But basically create a gradient graphic in Photoshop (you only need a small sliver graphic as we can repeat it across the x-axis). Then in your CSS do something like this:
body{
background:#ccc url("path/to/gradientImage.jpg") bottom repeat-x;
Change the background color (#ccc) to match the top of your gradient image color. "bottom" tells the browser to attatch the graphic to the bottom of the body tag, "repeat-x" tells the browser to repeat it across the x-axis (horizontal). If you've done it right, your background image will blend into the background color creating a nice gradient effect. -
If I want to apply a class to a flash movie, where do I place
it in order
for it to listen?
Here's my code:
<div id="header">
<p id="flash">
<object type="application/x-shockwave-flash"
data="/clients/affusion/webs/assets/affusionconsulting.swf"
width="472" height="196" class="movie">
<param name="movie"
value="/clients/affusion/webs/assets/affusionconsulting.swf"
/>
</object> </p>
</div>
Here's the simple css:
#flash {
height: 214px;
margin: 0 21px 0 15px;
background: url(/clients/affusion/webs/images/headerbg.gif)
no-repeat left;
display: block;
text-align: right;
.movie { padding-top: 9px;}
Here's the URL:
http://www.galfanodesign.com/clients/affusion/webs/final/index.asp
Might there be a simpler solution to what I am seeking?
Thanks!
DanThat could be....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Dan Galfano" <[email protected]> wrote in
message
news:[email protected]...
>I see. I swear the bg-image did move before..but perhaps
it was the whole
>container that was moving and not the bg-image.
>
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Jup. The only way to move background images is with
>> background-position....
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>> ==================
>>
>>
>> "Dan Galfano" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Hmm...Well, whatever it was doing, I just
re-read what I wrote and made
>>> sure the background position of the image was
"top" and then added the
>>> padding to the container, and it worked.
>>>
>>> Dan
>>>
>>>
>>>
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:[email protected]...
>>>> Padding will not move background images.
>>>>
>>>> --
>>>> Murray --- ICQ 71997575
>>>> Adobe Community Expert
>>>> (If you *MUST* email me, don't LAUGH when
you do so!)
>>>> ==================
>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>>>> ==================
>>>>
>>>>
>>>> "Dan Galfano"
<[email protected]> wrote in message
>>>> news:[email protected]...
>>>>> Ok. Well, I have this header with a
background image and am putting
>>>>> the flash movie in the <div> but
the movie is aligned at the top of
>>>>> the <div>. I want it padded 9px
from the top. But, if I put in the
>>>>> padding-top in my css for the header,
then it moves the background
>>>>> image down too......
>>>>>
>>>>> Any thoughts?
>>>>>
>>>>> Dan
>>>>>
>>>>>
>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>
news:[email protected]...
>>>>>>> I can't apply CSS to a flash
movie? I don't want to apply it within
>>>>>>> the movie...Wouldn't it be like
adding CSS to an image?
>>>>>>
>>>>>> No. Sorry. Flash lives in a
concurrent but different universe than
>>>>>> HTML.
>>>>>>
>>>>>>> If not, then, do you see any
fixes I can add to my container?
>>>>>>
>>>>>> I'm not quite sure what you are
wanting to do, Dan.
>>>>>>
>>>>>> --
>>>>>> Murray --- ICQ 71997575
>>>>>> Adobe Community Expert
>>>>>> (If you *MUST* email me, don't LAUGH
when you do so!)
>>>>>> ==================
>>>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>>>>>> ==================
>>>>>>
>>>>>>
>>>>>> "Dan Galfano"
<[email protected]> wrote in message
>>>>>>
news:[email protected]...
>>>>>>> Murray,
>>>>>>>
>>>>>>> I can't apply CSS to a flash
movie? I don't want to apply it within
>>>>>>> the movie...Wouldn't it be like
adding CSS to an image?
>>>>>>>
>>>>>>> If not, then, do you see any
fixes I can add to my container?
>>>>>>>
>>>>>>> Thanks!
>>>>>>>
>>>>>>> Dan
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>>
news:[email protected]...
>>>>>>>>> If I want to apply a
class to a flash movie, where do I place it
>>>>>>>>> in order for it to
listen?
>>>>>>>>>
>>>>>>>>
>>>>>>>> You cannot apply CSS to
Flash. You could apply it to a container
>>>>>>>> into which the Flash is
placed, though.
>>>>>>>>
>>>>>>>> --
>>>>>>>> Murray --- ICQ 71997575
>>>>>>>> Adobe Community Expert
>>>>>>>> (If you *MUST* email me,
don't LAUGH when you do so!)
>>>>>>>> ==================
>>>>>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM)
>>>>>>>> Technotes
>>>>>>>> ==================
>>>>>>>>
>>>>>>>>
>>>>>>>> "Dan Galfano"
<[email protected]> wrote in message
>>>>>>>>
news:[email protected]...
>>>>>>>>> If I want to apply a
class to a flash movie, where do I place it
>>>>>>>>> in order for it to
listen?
>>>>>>>>>
>>>>>>>>> Here's my code:
>>>>>>>>>
>>>>>>>>> <div id="header">
>>>>>>>>> <p id="flash">
>>>>>>>>> <object
type="application/x-shockwave-flash"
>>>>>>>>>
data="/clients/affusion/webs/assets/affusionconsulting.swf"
>>>>>>>>> width="472" height="196"
class="movie">
>>>>>>>>> <param name="movie"
>>>>>>>>>
value="/clients/affusion/webs/assets/affusionconsulting.swf" />
>>>>>>>>> </object>
</p>
>>>>>>>>> </div>
>>>>>>>>>
>>>>>>>>> Here's the simple css:
>>>>>>>>> #flash {
>>>>>>>>> height: 214px;
>>>>>>>>> margin: 0 21px 0 15px;
>>>>>>>>> background:
url(/clients/affusion/webs/images/headerbg.gif)
>>>>>>>>> no-repeat left;
>>>>>>>>> display: block;
>>>>>>>>> text-align: right;
>>>>>>>>> }
>>>>>>>>>
>>>>>>>>> .movie { padding-top:
9px;}
>>>>>>>>>
>>>>>>>>> Here's the URL:
>>>>>>>>>
http://www.galfanodesign.com/clients/affusion/webs/final/index.asp
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> Might there be a simpler
solution to what I am seeking?
>>>>>>>>>
>>>>>>>>> Thanks!
>>>>>>>>>
>>>>>>>>> Dan
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
> -
Opening an HTML popup from Flash, not as tab
Hi
I need to open an HTML popup from Flash (using ActionScript in
Flex 4).
Thus far I found a solution, and it does work in Safari - a new
and separate HTML window is popped up (with a new web page).
private function popUpTheHtmlEditor():void {
var url:String = "http://www.adobe.com";
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
} catch (e:Error) {
trace("Error occurred!");
But in (my) Firefox (with my settings), when I click on the Flash
(Flex) button, the page is being opened in a new tab.
I need a solution which pops up the HTML page in a new/separate
window, as far as possible regardless of the browser (and browser
settings).
I found an example where a popup is opened from HTML, and it opens a
separate window (a real popup) in my Firefox:
http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html
-> "Open a requested popup"
The JavaScript code seems to be:
OpenRequestedPopup(this.href, this.target); return false;
with this function def:
function OpenRequestedPopup(strUrl, strTarget)
if (WindowObjectReferenceOfRequestedPopup == null || WindowObjectReferenceOfRequestedPopup.closed)
WindowObjectReferenceOfRequestedPopup = window.open(strUrl, strTarget, "top=" + windowTop + ",left=" + windowLeft + ",width=" + windowWidth + ",height=" + windowHeight + ",menubar,toolbar,location,resizable,scrollbars,status");
else
if(WindowObjectReferenceOfRequestedPopup.focus)
WindowObjectReferenceOfRequestedPopup.focus();
How could I call such code from ActionScript? Should this work through
ExternalInterface? I couldn't even get this to work:
ExternalInterface.call('alert', 'foo');
Should I use swfobject.js for embedding the .swf in the HTML wrapper?
Any other ideas?
The two files are pasted below.
Here's the compiler command I'm using:
mxmlc -output button.swf -target-player 10.0.0 flash_to_editor.mxml
I'm running the examples locally (as files, not over http). Would it
help to place the files on a server?
Tobi
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
horizontalAlign="center" verticalAlign="middle">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
import flash.net.URLRequest;
// This 'http://www.adobe.com' is just an example URL.
// Works but opens tab in FF (not a separate window):
private function popUpTheHtmlEditor():void {
var url:String = "http://www.adobe.com";
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
} catch (e:Error) {
trace("Error occurred!");
// Doesn't work:
// var url:URLRequest = new URLRequest("javascript:alert('foo'); void(0);");
// navigateToURL(url, "_self");
// How to get this to work?
private function popUpTheHtmlEditor():void {
ExternalInterface.call('alert', 'foo');
// How to get this to work?
private function popUpTheHtmlEditor():void {
ExternalInterface.call('launch','http://www.adobe.com');
// Or
// ExternalInterface.call("window.open", "http://www.adobe.com", "win", "height=200,width=300,toolbar=no,scrollbars=yes");
// Perhaps it's necessary to try different approaches:
// (As soon as I get two approaches to work.)
private function popUpTheHtmlEditor():void {
var s:String;
if (ExternalInterface.available) {
// Necessary? Safe?:
// Security.allowDomain('*');
s = ExternalInterface.call('launch','http://www.adobe.com');
} else {
// TODO: Then try URLRequest?
s = "Wrapper not available";
Alert.show(s);
]]>
</fx:Script>
<s:Panel title="One way to open the HTML editor"
width="75%" height="75%">
<s:Button id="button" label="Open the HTML editor"
click="this.popUpTheHtmlEditor();"
horizontalCenter="0" verticalCenter="0"/>
</s:Panel>
</mx:Application>
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>html_around_swf.html</title>
<script type="text/javascript">
function launch(url) {
alert(url);
// OpenWin = this.open(url, "FOO", "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,width=400,height=200");
</script>
</head>
<body>
<object id="button" name="button" width="550" height="400"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="button.swf" />
<param name="allowScriptAccess" value="always" />
<embed id="foo" name="button" src="button.swf" width="550" height="400"></embed>
</object>
</body>
</html>Hi,
Here's a solution.
1. Make ExternalInterface work when files are loaded as local files:
Go to
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htm l
In tab Global Security Settings: Edit Locations -> Add Location ->
browse to the .swf file, add it. Make sure it's in the list (under the
Edit Locations drop down, with a green check mark.)
Now open the HTML wrapper in a browser (eg Firefox).
Now this works (ActionScript):
private function popUpTheHtmlEditor():void {
ExternalInterface.call('alert', 'foo');
On Windows: perhaps:
http://techjig.blogspot.com/2008/03/flash-global-security-settings-windows.html
"In order for external interface functions to be called, you must also
specify the folder/file where the swf file is located."
The above setup isn't necessary when the files are on a server.
Also see:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/External Interface.html#call()
""ExternalInterface" "
"call() method"
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7ea6.html
"About ExternalInterface API security in Flex"
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf626ae-7fe8.html#WS2d b454920e96a9e51e63e3d11c0bf69084-7f31
"Using the ExternalInterface API to access JavaScript"
2. Open a real popup: Example:
ActionScript:
private function popUpSomething():void {
var editorPathOrUrl:String =
'wrapper.html';
var windowName:String =
"SomeNameSeeDocs";
var windowFeatures:String =
"toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=500,height=700";
ExternalInterface.call(
'launch',editorPathOrUrl,windowName,windowFeatures
JavaScript:
function launch(editorPathOrUrl,windowName,windowFeatures) {
windowRef = window.open(
editorPathOrUrl,windowName,windowFeatures
Works in all browser I tested except Opera.
Tobi -
I have created a document in HTML as I need my Flash
Presentation to link to other sites with hyperlinks. I have never
actually used HTML with Flash before so I am uncertain on what I
should do,
do I have to link the HTML document to my text field in some
way
do I just put the code into the text field
do i have to call it with some sort of action script????
Any help will be greatly appreciated.What do you mean you want to implement JS onHoverOver? How
are you using that in Flash? And what do you mean by importing an
HTML file? Flash can understand some HTML but you can't import an
entire file (not in AS2 anyway).
Maybe you are looking for
-
HT4241 IS THERE A apple Mini DisplayPort to HDMI adapters
IS THERE A apple Mini DisplayPort to HDMI adapters
-
Solution Allowing Customers to Pause/Cancel Recurring Orders
Hi, We've created an eCommerce website for a client, using Business Catalyst, which features recurring payments. The client is asking whether it's possible for their customers to be able to log into their account on the website and pause/cancel recur
-
Livetype asking for serial number.
I just updated leopard to 10.5.2 I opened livetype to work and i get the "enter user information". The problem I don't have the serial number because it was preloaded unto the mac already. What to do?
-
How to Subtract Wagetype in PCR....?
Dear All Please suggest for the following. I have 2 Wagetypes in Input Table as M100 and M200. I need to write a PCR which will subtract M200 from M100 and transfer the M100 to OT. M200 should be removed after the calculation. I am not sure if there
-
Is it possible to install Airplay on my mac if i don't have it and how?
is it possible to install Airplay on my mac if i don't have it and how?