Need help dynamically positioning flash content and image in different resolutions

Hi,

i need help.

Right now, my image and flash are not being displayed correctly in the different resolutions. I may be able to make it look nice but the images and the flash content gets moved around the moment it is being displayed in a different resolution. Help is appreciated. Source is in the zip file provided. Thanks.

Hi… Thank all of you for the help… I have manage to find the solution to this problem…

Since your attachment isn’t approved as yet, maybe you can give a link to the site?

sorry… its www.sgdesign.sg/dtrenzo/

on a 1400 X 900 reso it looks fine… however, on smaller / bigger resolution, all the contents are not as specified

Maybe the easies way is to adjust the header div a bit:


#header {
    width: 720px; height: 224px; margin: 6px auto 0; background: url(images/Dtrenzo logo1.jpg) no-repeat; 
}

i mean… i dun want to move side to side but align it towards the top abit

I see that your image has a different width and height than you indicated in the beginning. Or you have to adjust the logo in whatever program you use or you have to adjust the header div in your styles.

Hi, i still couldn’t get the image to move up abit even after implementing the changes… if u see properly, the bottom part of the image have been overlapped by the flash module itself.

Just saw the sylesheet. You don’t need all those declarations:


#container {
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
overflow-x:hidden;
overflow-y:hidden;
width:950px;
}

This will do the same


#container {
    width: 920px; margin: 0 auto; overflow: hidden;
}

I’m looking at it now. I don’t see the header at all

hi, i managed to get it up and working but is there any way to shift the image up by abit? thanks alot

hi, can u try again?

since your header div is inside the container you can play with margins as you please. The container is 920px; the header div is 699px so there is a difference of 221px which means you have a margin of 110px on one side and 110 on the other side. So instead of:


#header {
margin: 6px auto 0;  
}

you could do


#header {
margin: 6px 90px 0 131px ; 
}

or whatever margings you would like to use.

It should work. Do you have it with what I said online now? Did you remove the id=“Dtrenz” from the flash movie?

ok… implemented the changes, header image not showing correctly

the original code are as follows…

please do tell me how do i make changes using your div containers… thanks

<!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>D’TRENZ INTERIOR</title>
<style type=“text/css”>
#Dtrenz {
background-color: #000;
position: relative;
top: 160px ;
left: 25px ;
}

body p strong {
font-size: 18px;
}
body {
color: #FFF;
}
body p {
text-align: right;
}
body {
font-size: 18;
}
body {
font-size: 12px;
}
</style>
</head>

<body>
<img src=“D’Trenzo.jpg” width=“720” height=“224” style=“position:absolute; TOP:5px auto; LEFT:131px auto; WIDTH:699px; HEIGHT:163px” />
<object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0” name=“Dtrenz” width=“920” height=“385” id=“Dtrenz”>
<param name=movie value=“Dtrenz.swf” />
<param name=quality value=high />
<param name=“LOOP” value=“false” />
<param name=bgcolor value=black />
<param name=“LOOP” value=“false” />
<param name=“SCALE” value=“exactfit” />
<embed src=“Dtrenz.swf” width=“920” type=“application/x-shockwave-flash” height=“385” loop=false quality=high bgcolor=#black name=“Dtrenz” pluginspage=“http://www.macromedia.com/go/getflashplayer” scale=“exactfit”></embed>
</object>
<br />
<br />
<br />
<br />
</body>
</html>

the problem is that, even after i tried to implement the div container, i still am not able to see the difference between what i had before because like what i mentioned, the site looks great on 1400x900 but everything is shifted to the right at a resolution of 1024 X 768. On other resolutions, each changes differs. The correct position is that the image"dtrenzo" and the flash content should be at the centre of the width.

What is the problem you are having with it?

margin 0 auto; center it in all browsers

Is there by any chance that by making it test the width and height of the page and determin it’s centre from there?

I have trouble implementing the container div with the example u have shown me. isit possible to show me how to implement it in the index page alone? thanks.