Hey. I’m building a photo gallery site for a client, and I’m using a full browser layout. I’m just the web developer on this project, not the designer… anyways:
The issue I’ve run into is how do you keep the floating objects from overlapping eachother in a liquid layout/full browser site when the browser window size gets small enough that the elements are overlapping?
I know there is a way to restrict the browser window size with javascript, but that seems a little heavy handed…
Here’s a preview of the site so that you can see the problem:
http://www.efcmusic.com/ciar/ciar.html
here’s the code I’m using for my full browser liquid layout:
// ***Stage aligned top left
Stage.align = "TL";
// *** Stop the stage from scaling with the browser window.
Stage.scaleMode = "noScale";
stop ();
// initiate postitions and scaling values for objects
logo._x = Stage.width - 115.5
logo._y = Stage.height - 101.6
menu._x = 250
menu._y = Stage.height/6
welcome._x = Stage.width/2 - 87.5
welcome._y = Stage.height/6
contentarea._x = Stage.width/2 - 200
contentarea._y = Stage.height/6
// end initial position setting
//create a listner that checks to see if the browser window is resized
sizeListener = new Object();
sizeListener.onResize = function() {
// change movieclip properties when the window is resized
logo._x = Stage.width - 115.5
logo._y = Stage.height - 101.6
menu._x = 250
menu._y = Stage.height/6
welcome._x = Stage.width/2 - 87.5
welcome._y = Stage.height/6
contentarea._x = Stage.width/2 - 200
contentarea._y = Stage.height/6
};
Stage.addListener(sizeListener);