positioning one image over another

[samflex]

Hello all,
This is a free web site I am designing for a church affiliated organization of which I am a member.

I am having a tiny little problem with positioning a flash masking image I created over another image.

For instance, the image I want flash to be over is called sttsmy01.jpg.

I want the flash object to be on top of that image.

It works but then it doesn't work, depending on your computer's resolution.

For instance, if your screen's resoulution is 800/600, it works perfectly.
However, if your computer's resolution is say, 1024/768 pixesl, the flash image shifts to the left.

Is there an easy to overlay the flash image over the sttsmy01 image and have work regardless of screen resolution?

Here is the code I am working with.

The bottom part of the code that begins with <div id="menu" ... is the one I am trying to lay on top of the image on top code.

Thanks for any help!

<div align="center">
  <center>
  <table border="0" width="85%" cellspacing="0" cellpadding="0" background="images/white.jpg">
    <tr>
      <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td width="50%" valign="top">
              <p style="margin-left: 30"><br>
              <img border="0" src="images/welcome.jpg"></p>
              <p style="margin-left: 40"><font face="Arial" size="2">This is the
              Smyrna Parishioners Organization Website. We are located at the St. Thomas
              The Apostle Church premises at 4300 King Spring Road, S.E Smyrna Road, Smyrna.</font></p>
              <p style="margin-left: 40"><img border="0" src="images/aboutus.jpg"><br>
              &nbsp;</td>
            <td width="50%">
              <p align="center"><img border="0" src="sttsmy01.jpg" width="170" height="150"></td>
          </tr>
        </table>


<!-- Flash image that I am trying to lay on top of image in the code above this line begins below-->

        <div ID="menu" STYLE="position:absolute; left:513px; top:105px; z-index:750;">
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td>
  <!--url's used in the movie-->
  <!--text used in the movie-->
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="[URL unfurl="true"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"[/URL] width="120" height="70" id="maskingfinal" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="maskingfinal.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="maskingfinal.swf" quality="high" bgcolor="#ffffff" width="110" height="100" name="maskingfinal" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] />
  </object>
  </td>
  </tr>
  </table>
  </div>

 

[vbkris]

<div ID="menu" STYLE="position:absolute; left:513px; top:105px; z-index:750;">

sets the Left of the Div, this has to be changed according to the resoultion, if its 800 leave it else change it.

after all ur html code paste this:
<script>
if(screen.width==1024)
{
document.getElementById("menu").style.left="500px"
//change it till it aligns...
}
</script>


Known is handfull, Unknown is worldfull

 

[samflex]

It worked real good, thank you very much.

 

[ChrisHunt]

The problem is, though, what if the screen width is 1024, but the browser window is not maximised? You'll still have the same problem - caused by the fact that your image is positioned at a certain percentage of the page width, whilst your flash movie is positioned absolutely.

Something along these lines might do the trick (use it as the table cell in which the image appears):

<td style="text-align:center" width="50%">
   <div style="margin: 0 auto;text-align:left">
      <img border="0" src="sttsmy01.jpg" width="170" height="150">
      <div id=menu" style="position:absolute; left:0px; top:0px; z-index:750;">
        <!-- Put your flash object in here -->
      </div>
   <div>
</td>

I don't do much CSS positioning, but that ought to set you on the right track.

Alternatively, why do you want to put a flash object on top of an image? Is the image supposed to be a fall-back in case the Flash cannot be displayed? If so, there are less fiddly ways to do it. See

http://www.alistapart.com/articles/flashsatay/

for how.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[samflex]

Chris,
You have got a good point about the image appearing differently from what it is intended if browser is not maximized.
However, when I tried your code, I am still having the same problem.
I had to refresh (Just like I do with my current code to align them correctly) unless I am doing it incorrectly.

BTW: I am not trying put flash object directly on top of an image.

What I am trying to do is to cover a portion of the image with flash.
According to the users of the website, it gives it a certain flavor.