Best Way to link CSS as per resolution?

[JohnnyPotseed]

I am rebuilding my site and have decided to do an 800x600 version and one for 1024x768 . All of the HTML is the same with the only difference being the external style shhets. Is there a way to link the CSS for each resolution without having to set up two folders with a redirect script?

[me']

Only with Javascript.

However, an easier way would be to make your site 'liquid'; use percentages for size values, so that the page will change depending on the resolution. This way, the page will also resize itself when the user resizes the window; not everyone browses with a maximized window.

[JohnnyPotseed]

I realize that percentages are better than pixels for fluidity. However I just cant get Moz and IE to react the same to percenages with this layout. I can get it perfect in one and the other is screwed up..Even with the smaller browser size the content is still ledgible, it just requires ltr/rtl scrooling.

[bazz]

I would suggest that try to design it fluid in Moz and then come back to us for tweeks to make IE show it properly. You'll end up with a much better site IMV.

Bazz

[me']

Try not to achieve 100% when you add your percentages together... rounding will assure you never reach this. Try instead for around 95-97%.

[J&J]

However, an easier way would be to make your site 'liquid'; use percentages for size values, so that the page will change depending on the resolution.

Using JohnnyPotseed's dilemma - if he uses percentages, sure - the text will resize as appropriate, etc. But if he has a title/header image at the top of his page for instance that's 750x200 or something, how will percentages be of any help in this matter? Stretching it for larger resolutions may distort and make it look worse, but making a large image and then using the width & height to shrink it isn't going to help with the bandwidth, etc.

So, what can be done to make images proportioned to the pages they're on, depending on the viewer's resolution?

[me']

So, what can be done to make images proportioned to the pages they're on, depending on the viewer's resolution?Make a small masthead?

The only way to detect the client's resolution is to use Javascript or another clientside language, and about 20% of users browse with that turned off...

[bazz]

Using JohnnyPotseed's dilemma - if he uses percentages, sure - the text will resize as appropriate, etc. But if he has a title/header image at the top of his page for instance that's 750x200 or something, how will percentages be of any help in this matter? Stretching it for larger resolutions may distort and make it look worse, but making a large image and then using the width & height to shrink it isn't going to help with the bandwidth, etc.

So, what can be done to make images proportioned to the pages they're on, depending on the viewer's resolution?

I dont think there is any oint in doing that. I agree that a page should be designed as fluid, so I do it. I cannot see a need for a logo to go the width of the page or to be 750px odd, wide. Better web design IMV would use a logo more along the width of the one at the top of the page so that whatever width the user views it at, they will see it as it's meant to be. ABnners area different thing and in most cases (IMV) arent crucial to the page content so if they move out of the window as it is sized smaller, then so be it.

my 2c

[Vladdy]

See if this helps: http://www.vladdy.net/Demos/ElementSizing.html

[JohnnyPotseed]

Well for what its worth, I rewoeked the template using percentages. Problem is that when I minimize the browser it distorts the images. If ya wanna have a loo see I loaded the template up to my server.This is the 1024x768 version as I am working on the 800x600 CSS and a CSS rollover for the top menu. I may end up scrapping the whole thing and starting from scratch. I have done sites with percentages before but not with with a design this complicated. I am open to any suggestions. Thanks a million for the help so far :)

Rough Template (www.unifoursolutions.com/test)

[Vladdy]

And what is exactly the difference between your "complicated" template and the demo page I posted :confused:

Also what is the reason for having 3 same navigation elements. Ok the top one disappears when there is no javascript (which is totally uncalled for) and is made out of text images (which is uncalled for as well), but why two more :confused:

[JohnnyPotseed]

Thanks a bundle Vladdy. I'll give this a whirl :thumbsup: