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
mel200Asked:
Who is Participating?
 
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
 
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
 
mel200Author 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
mel200Author Commented:
Thanks so much, I'm with another client right now but will look at that in a few hours!!
0
 
mel200Author 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.