Dynamically moving table in CSS

[nintendofanboi]

Hi I'm trying to make a webpage that looks like this mock up I've made..

http://www.interludeartists.co.uk/ma...es/preview.jpg

I've managed to get the background to dynamically resize to fit in most browsers, I'm having trouble getting the central elements to all move together so that it still looks like they're sitting on the floor.

I want all of the elements to always be centered but to move up and down in accordance with the users browser.

I understand that it's going to be impossible to make the elements sit in the same place in EVERY browser but wish to achieve this as best as possible.

My current HTML is here:

http://www.interludeartists.co.uk/mandy/index.html

and my current CSS is here:

http://www.interludeartists.co.uk/mandy/style.css

I'd really appreciate any help.

Thanks!

[achira]

It actually is possible. Read up on flexible grid width design- specifically media queries and the css specific code for different browsers.

The short of it is that you create a set of CSS rules that are specific to variables that you specify- for example, you want to indicate layout rules for a smaller screen:

@media screen and (max-width: 770px) {
/*insert alternate rules here*/
}

as far as browser tweaks, here's an example of setting a border radius (gives the element rounded corners) in your css and including the code for the other browsers so it will look similar on any browser:

 border: thin solid #000;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 -o-border-radius: 15px;
 border-radius: 15px;

hope this helps.