Forum Moderators: not2easy
I have a site I am trying to build and I have a background image that i want centered but not scaled so that no matter the browser size the center of the image stays centered. No left or right scrolling should be allowed. I do however need vertical scrolling as the image is large and the flash movies will be tall.
I have 3 flash movies. The main movie needs to center over the image and that is why it is important the image be center. The 2 files work together. The main movie is 760px (w) by 645px (h)
Below the main movie will be 3 more flash movies all in a row directly centered below the main movie. The first is 255px (w) by 205px (h). The second is 250px (w) by 205px (h). The third is again 255px (w) by 205px (h) making up the main movies width of 760px.
I need everything to stay in place when the browser resizes but everything I do moves around.
Any ideas or pointers. (The 4 flash movies are the ONLY thing on the page)
In order they are called:
foundreMAIN.swf
buymusic.swf
blog2.swf
joinlist.swf
If anyone is curious and wants to ask why I did not make one large movie...multiple actionscript versions due to multiple component incompatibilities.
Any help would be super appreciated!
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color: #ccc;
}
#wrapper {
/* to make sure we get a large enough area to
play with and make scroll bars appear if too
small*/
position: relative;
min-width: 770px;
min-height: 900px;
background: #ccc url('1.jpg') no-repeat center top;
}
#main {
background-color: orange;
width: 760px;
height: 645px;
position: absolute;
left: 50%;
margin-left: -380px; /* half the width */
top: 25px;
}
#buy, #blog, #join {
height: 205px;
position: absolute;
top: 670px;
}
#buy {
background-color: red;
width: 255px;
left: 50%;
margin-left: -380px;
}
#blog {
background-color: green;
width: 250px;
left: 50%;
margin-left: -125px;
}
#join {
background-color: blue;
width: 255px;
right: 50%;
margin-right: -380px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">big movie here</div>
<div id="buy">left</div>
<div id="blog">middle</div>
<div id="join">right</div>
</div>
</body>
</html>
The html is given a background color that goes below you graphic (should the screen get taller than the wrapper).
I'm presuming you graphic needs 25px on top and bottom and no margin between the movies (since I've no better idea).
The wrapper has a minimum size to prevent the case where there are no scroll bars but the content doesn't fit the screen anymore. This creates the scroll bars if it wouldn't fit.
The position: relative is to give it "position" so it's children will reference it (needed to get them to align to this if the scroll bars appear.
Next I use a trick to have absolute positioning set somethign to the middle:
take it's left (or right) side and put it at 50% (in the middle of the closest parent that has position (or the viewport in the absence of such a thing).
Next move it with a negative margin half its width back.
The 3 on the bottom use a variation of that middle trick: they set their outer border to the same position as the bog one.
Tested in FF3, Safari and Opera. Might need some corrections for IE, but I don't expect any.
#join {
background-color: blue;
width: 255px;
left: 50%;
margin-left: 125px;
}
If you want it centered it'll move sideways by half of the change in width ... Either it's centered or not ...
Or ... thinking of it, are you seeing rounding errors ? Where you get stuff that's 1 pixel off ?
If that's the case, adding the background in an absolutely positioned element might be the solution you need.
Take a look at this link:
<snip>
The one problem I am having now is the bottom three movies have like a one or two pixel gap between them and I resize the movie smaller the smaller movies start moving down.
[edited by: swa66 at 1:42 am (utc) on April 7, 2009]
[edit reason] No personal links please see ToS [/edit]
Doing so now:
<!--[if IE 6]>
<style type="text/css">
#wrapper {
height: 900px; /* lack of support for min-height */
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
Is it working in the compliant browsers ? (firefox, safari, chrome, opera, ...)
If not, is it working if you remove the flash and just use a background color instead ? I'm not that sure those plug-ins do what one would expect of them ...
We don't do links out here on WebmasterWorld due to their content changing as we look at it and that removes the use of the conversation/discussion to others.
