Placing flash movie over logo

Scotty501 · September 25, 2010

Hi All,

I have a logo which goes across the full width of the page. I am trying to place a flash movie in to some blank space the logo has.

The best I got so far is to add the flash to the footer.tpl above the footer DIV - but it does not sit in the right place and if I make it larger than about 75px in height it jumps to the right column. Can anyone tell me how to make it sit between the blank space on the logo and if I change height of the movie for it not to jump out of place.

Test site here http://www.ukushosting.com/artnculture and it should be pretty easy to see what I am trying to do.

rocky · September 25, 2010

You will need to use absolute positioning to do that. Change the #page block in the /* global layout */ section of your global.css from:

#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align: left
}

to:

#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align: left;
   position: relative
}

This will allow you to specify an absolute position relative to the page. Then you can use code like the following:

#header_right div.advertising_block
{
   position: absolute;
   top: 12px;
   left: 30px;
}

Change 12px to how many pixels from the top of the page you want the flash to appear and 30px to how many pixels from the left of the page you want the flash to appear.

By the way, I see you are using the following code in the advertising block for the flash:


<html><head>
<title>ukusmovie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="author" content="">
<meta name="generator" content="SWiSHmax http://www.swishzone.com">
<meta name="description" content="ukusmovie">
<meta name="keywords" content="design, hosting, made, simple, website">
<!-- text used in the movie -->
<!-- design, hosting, made, simple, website -->
<!-- urls used in the movie -->
<!-- http://www.ukushosting.com -->
<!-- Created by SWiSHmax - Flash Made Easy - www.swishzone.com -->
</head>
<body bgcolor="#000000">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
 id="ukusmovie" width="155" height="112">




 <embed type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="155" height="112"
  name="ukusmovie" src="ukusmovie.swf"
  bgcolor="#000000" quality="high"
  swLiveConnect="true" allowScriptAccess="samedomain"
 ></embed>
</object>

</body>
</html>

It's not a good idea to repeat the <html> tag. You should instead use just:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
 id="ukusmovie" width="155" height="112">




 <embed type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="155" height="112"
  name="ukusmovie" src="ukusmovie.swf"
  bgcolor="#000000" quality="high"
  swLiveConnect="true" allowScriptAccess="samedomain"
 ></embed>
</object>

Note that I changed ukusmovie.swf to {$content_dir}ukusmovie.swf above. That should ensure the flash works on all pages including SSL pages.

Scotty501 · September 25, 2010

Thanks Rocky - but it not the advertising block I'm trying to move - I am inserting an object code into the template - its the flash move currently on the logo you can see. I have done this via the footer.tpl

I will make the adjustments to the advertising as suggested too.

Scotty501 · September 26, 2010

Rocky - I looked back at what your wrote in more detail - and it kind of makes sense (sorry still findin my feet with CSS) and I think it makes sense

The position relative command allows a fixed position of div objects - but how do I refer it to the flash movie - ie how do I give the flash moview div object identifier? Very confused here.

Or have I got it completley wrong in my understanding?

rocky · September 26, 2010

You could use #header_right object to reference the flash object, assuming there is only one object in the header. I think it is better to put it in a div with an ID to ensure you are referencing only one object. When I last looked at your code, the flash code was in a

, which is why I suggested the above code. If you have a different class or ID, then update my code above to use it instead.

Scotty501 · September 26, 2010

Ah I see.....I think.....

So......

Add the additional position relative to the css in the global layout section - as suggested. Easy enough

Where do I add/edit the following this to the global css ? ( I changed it to headermovie as thats the ID in the flash code - is that correct?

#header_right div.headermovie
{
position: absolute;
top: 12px;
left: 30px;
}

Based on this code

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
 id="headermovie" width="175" height="70">




 <embed type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="175" height="70"
  name="headermovie" src="headermovie.swf"
  bgcolor="#FFFFFF" quality="high"
  swLiveConnect="true" allowScriptAccess="samedomain"
 ></embed>
</object>

rocky · September 26, 2010

Almost. You specified an ID in the HTML and a class in the CSS. Use the following CSS instead:

#header_right div#headermovie { position: absolute; top: 12px; left: 30px; }

Scotty501 · September 26, 2010

OK....almost there - does it matter where in the CSS this goes? I can place that block (if that is the right term) anywhere in the global css?

If I am right - I just learnt more CSS in this thread than four days of reading books!!

rocky · September 26, 2010

That's right. It doesn't matter where you put it, though note that if you repeat the same block twice, the code in the second block will overwrite the first one.

Scotty501 · September 26, 2010

Rocky - you are an absolute star! Thank you so much for your help and patience - I see you help more people than anyone else in these forums.

Going to test it now - I will let you know how I get on - then mark this as solved. (I hope)

A follow on question for my own reference

How will this be handled in varying sized browsers. Will it be adjusted by page width or as it absolute - will it be fixed there and potentially look out of place of on a large width browser - or does it not matter and I am barking up the wrong tree?

rocky · September 26, 2010

It will be fixed at the number of pixels you specified and will not move when you resize the browser window.

Scotty501 · September 26, 2010

mmm nothing is happening.....

This is my code

#header_right div#headermovie { 

position: absolute; 
top: 12px; 
left: 30px; 

}

Nothing appears though? I played with the px settings too.

rocky · September 26, 2010

It's because the flash object is hooked in the left column, not the top of the page, so it isn't in #header_right.

Scotty501 · September 26, 2010

Sorry Rocky do follow you - I have not hooked the object anywhere? I have the code in footer.tpl at the moment?

rocky · September 26, 2010

I see. I got confused since it appeared after a module in a column. Try the following instead:

div#headermovie { 
position: absolute; 
top: 12px;
left: 30px; 
}

Scotty501 · September 26, 2010

Still nothing mate.....mmmm

Scotty501 · September 27, 2010

I am really struggling to make this work - what am I doing wrong - sure its simple...

Scotty501 · September 27, 2010

Success!!!

After playing for sometime - I removed the "div" so it was just

#headermovie

and I wias able to position where I wanted. I add WMODE to correct the background covering the page area it was position on top of and worked - test site here www.ukushosting.com/artnculture

I have the movie code pasted in the footer.tpl. I assume that as long as the code is on a page which is always called upon - ie the footer - the #headermovie will always be displayed.

Is this good practice or have I made a "botched" approach in making this work?

Scotty501 · September 27, 2010

Rocky - as you have been so helpful - I would appreciate your inputs on the above . It worked as I said above - just not sure if I made a "hash" to make it work or I am following "good practice"

Site is now at http://www.artnculture.co.uk/

rocky · September 27, 2010

I think it is more of a hack. I personally would have put the <object> code in the header_right div instead of the footer. It is unusual to load the flash in the footer, then reposition it in the header, but as long as it works for you.

Placing flash movie over logo

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in