Problems scaling to fit resolution. - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

usa_hodson · 06-22-2008, 02:29 PM

Hi,

I have a particular scaling problem. I have 4 flash movies, and one png image on a page. In native resolution the layout is 1183 pixels wide - too wide even for 1024x768 screens. However, scaling each individual movie to fit lower resolution screen sizes does not seem to affect the quality too much.

Here's the problem. My content is laid out in a table, and alternatively with div tags, as follows:

_________ _____________________________
| PNG |_________FLASH ____________|
|_________|____________FLASH____________|
| | |
| FLASH | FLASH |
| | |
|_________|_____________________________|

I want my content to resize and maintain the same layout when the screen size is smaller; but not to expand, or pull the layout apart if the screen size is bigger than the native resolution.

I have tried to do this with a table, but when the screen is smaller the content rescales leaving a large gap between the top two rows and the bottom row. When the screen is bigger has a large white gap between the first and the second column. I thought that I could resolve this by setting the flash movies to be left-aligned and top-aligned in the right-most column, and right-aligned and top-aligned in the left-most column - but this doesn't seem to make any difference.

This is the table code I am currently using:

Code:

<title>Untitled Document</title>
<style type="text/css">
<!--
.profile {
	max-width: 190px;
}
.logo {
	max-width: 1183px;
}
.tableLeft {
	max-width:190px;
}
-->
</style>
</head>

<body>
<table class="logo" width="100%" height="100%" border="5" align="left" cellspacing="5">
  <tr>
    <td width="18%" height="23%" rowspan="2"><div class = "tableLeft" align="center"><img src="/uni/images/unilogo.png" width="100%" align="middle" class="logo" /></div></td>
    <td width="82%" height="9%" valign="left"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="52">
      <param name="movie" value="/uni/loginBar.swf" />
      <param name="quality" value="high" />
      <embed src="/uni/loginBar.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="52"></embed>
    </object></td>
  </tr>
  <tr>
    <td width="82%" height="10%" align="left" valign="left" bordercolor="#990066"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="47">
      <param name="movie" value="/uni/navBar.swf" />
      <param name="quality" value="high" />
      <embed src="/uni/navBar.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="47"></embed>
    </object></td>
  </tr>
  <tr>
    <td width="18%" height="79%" align="center" valign="top" bordercolor="#990066"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="505" align="middle">
      <param name="movie" value="/uni/profile.swf" />
      <param name="quality" value="high" />
      <embed src="/uni/profile.swf" width="100%" height="505" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
    </object></td>
    <td width="82%" height="79%" align="left" valign="left" bordercolor="#990066"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="505">
      <param name="movie" value="/uni/main.swf" />
      <param name="quality" value="high" />
      <embed src="/uni/main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="505"></embed>
    </object></td>
  </tr>
</table>
</body>
</html>

You can see the layout that I want to achieve at Sprinkal Uni. - Apply to University in the USA., and the scaling badly version at Untitled Document.

Thanks in advance for any help solving this problem...

James