Expandable page with CSS?

Hi, all, I'm creating this website based on a design given to me by the client, attached. The url is

http:// www dot uncle will productions dot com.

I'm doing it with tables, so with different screen resolutions it looks different. Is there a way to do it with CSS so it would look the same on all resolutions and browsers and fit the page better?

Thanks, I hope it's not asking too much! web-mockup.pdf
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

andrevanzuydamCommented:
I'm not sure exactly what you really want to do with your web page, there is nothing wrong with using tables but you need to decide on a resolution and then either left align or center your page according to the resolution.  Also I would definitely remove the embedded sizing of your tables and put that in a style sheet.  

My recommendations:

Build your webpage for 800X600, this resolution will hopefully cater for the lower resolutions (mobile is another story).  

Center or left align your page using a div so that on a high res page your website is positioned nicely and performs as created for the 800X600 mode.

If 800X600 is too small then start with 1024X768 as a starting point.  Alternatively you can use some Javascript to "resize" your site on load time.

Alternatively,

Create images for 3 different website sizes, 800X600, 1024X768, Greater than >

Load the appropriate images for the appropriate screen size using Javascript.

If you need a nudge in the right direction with some examples I would be happy to oblige if you think I'm heading you in the right direction. Somewhere you need to draw a line as to what resolutions you will support or you will find yourself with a website which sort of works but doesn't exactly if you try catering for too many resolutions dynamically.

Yours sincerely

Andre
0
Melody ScottAuthor Commented:
Thanks, Andre. I did a bunch of screenshots of different sizes. (Using cross-browser.com). Most of them show the website cut off on the right, but mine and my client's both show the attached, with a lot of space around the the tables. screen shot
I'm using a dell inspiron N1710, with windows 7 and 1600x900 screen resolution.
0
andrevanzuydamCommented:
Hi

I would definitely start by removing the inline center style on your main table,  you need to add another table on the outside if you wish continue on this line of thinking or use some divs with the table layout.

An example perhaps ?  Give me a chance to sketch out a basic layout for you, you will need to fill in the gaps.

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

andrevanzuydamCommented:
Mel

Here is a basic idea of what I'm talking about, see my comments in the index.html file.

Also, maybe change those gifs into pngs, you might get smaller size for loading.

Check what fonts you want to use, try something thats compatible across platforms / browsers or use images.

I've changed the menu into a ul tag with a tags.  I think thats more what you need.

Play with removing the center tag, I've tested in firefox + ie + chrome , seems to do what it must.

Watch out for using padding and margins in CSS, IE interprets padding and margins differently and in firefox padding stacks to width of elements.

Otherwise it should work fine for what you want to do.
sample.zip
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Thanks so much, I'm with another client right now but will look at that in a few hours!!
0
Melody ScottAuthor Commented:
Thanks very much, I think this will work well, and the code is much cleaner.
0
andrevanzuydamCommented:
100% , I'm glad I could help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.