...

View Full Version : website in different resolutions



iamjeff
12-05-2006, 03:09 AM
i am making a website:

http://www.karnov.net/juggle/

im pretty happy with the way it looks in firefox 2.0, 1280x800
i want to make it compatible with 800x600 and higher.

so, i thought a good idea would be to change all of the absolute pixels to percents. that messes up a lot of things (try 'restoring' the window, so its not full screen, and scale it down to a smaller box... everything gets put in the wrong place and looks awful).

so, unless there's a way around this, i want to use absolute pixels, but i don't know how i can do that. if i make it for 800x600, then there will be too much empty space in 1280x800, and if i do the reverse, it will truncate things.

is there any to say in the html "hey, im making this page for 1280x800, so if the user is using a different resolution, scale to fit his screen!"?

if not, what can i do to ensure maximum compatibility with a variety of resolutions?

any help is greatly appreciated!!
thanks!

jeff

Excavator
12-05-2006, 04:22 AM
Here is a pretty cool presentation (http://visionmarkusa.com/resolution/) that covers most resolutions pros and cons.

Or you could try and adapt this (http://www.nopeople.com/CSS/background_image_resize/) into something you can use.

iamjeff
12-05-2006, 05:24 AM
thanks for the info, they are informative!
however, i don't think it quite solves my problem.

i don't quite like the dynamic re-sizing from the first link, it brings about some problems on my page. i'd like to go with the 800x600 fixed thingy, but the other site doesnt really explain how.

i uploaded a new version of the site that looks better in both firefox and IE6, but still has some problems.

a big issue: on re-sizing the window, the iframe disappears (if the window gets too small). i can't figure out why!

and the margins are still fixed, so they appear in all resolutions. basically, i want to keep the different containers (title, menu, main) fixed sizes because re-sizing them screws things up. but i want the red margins to reduce to 0 as the resolution goes to 800x600. the larger the resolution, the bigger the margins. if i try margin: auto, it will move everything over to the left.

suggestions?

Excavator
12-05-2006, 08:37 AM
a big issue: on re-sizing the window, the iframe disappears (if the window gets too small). i can't figure out why!

I would not use an i-frame there. I think it would be easier to style text placed in the div like normal... is there a specific reason to have it?



and the margins are still fixed, so they appear in all resolutions. basically, i want to keep the different containers (title, menu, main) fixed sizes because re-sizing them screws things up. but i want the red margins to reduce to 0 as the resolution goes to 800x600. the larger the resolution, the bigger the margins. if i try margin: auto, it will move everything over to the left.

suggestions?

Place the entire site in a center wrapper. Like this. (http://nopeople.com/juggle/Juggle.htm)

iamjeff
12-06-2006, 12:43 AM
thanks so much!!
this helped immensely.

i tried using a wrapper initially, but removed it when i added body {}

i used the iframe because i didn't know what else to use. the content in the iframe is dynamic and depends on what link you click on in the menu. if i did it without an iframe, wouldn't each page have to have the layout wrapped around it?

i feel there must be some css/html way of doing things, such as http://www.alistapart.com/articles/practicalcss/
where you click on a topic on the right and it loads information in the content div. it's an entirely new page, but since the topics column doesn't reload, it must be separate somehow... i can't figure it out from the source, which looks like it has the content built right in.

argh.

Excavator
12-06-2006, 02:11 AM
QUOTE]i tried using a wrapper initially, but removed it when i added body {}[/QUOTE]

I use the body to specify text-align:center which centers everything, also to give a background color.

Then the wrapper is centered with margin: 0 auto; and that's where the size ov the content, the borders...everything else comes from.


if i did it without an iframe, wouldn't each page have to have the layout wrapped around it?

Yes.


http://www.alistapart.com/articles/practicalcss/
where you click on a topic on the right and it loads information in the content div. it's an entirely new page, but since the topics column doesn't reload, it must be separate somehow... i can't figure it out from the source, which looks like it has the content built right in.

With well written code it re-loads so fast you don't realize that it is a new page, it only looks like the content is all that changes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum