How to make a website automatically resize based on user resolution?

[LordSnailz]

I posted this a few months back but didn't want to ressurect the thread since many things have changed, mainly of which is thanks to screw3d for all the help!!

But alas, we're stuck at a point. The webpage is fairly simple, done through css and it contains a few tables. The main question is, how do I make it so that it would display the same size regardless of the user resolution.

So for example if the top banner takes up 70% of screen when centered it would take 70% no matter what resolution the user is on.

Any tips is greatly appreciated and many thanks to screw3d for getting me this far! :beer:

 

[Modeps]

<table width="70%" cellpadding="400" cellspacing="1">

 

[SelArom]

hey I don't know a whole bunch about this stuff, but it SEEMS that if you know the users resolution (like detecting it using javascript or something) then you could just embed some php into the width and height attribs of the banner, like
img src="blah.jpg" width={?php 200 * $resolution_width ?} height={?php 50* $resolution_height}

I don't know if this is possible since I'm not too knowledgeable in php, but that's where I would start... forgive me if I don't know what I'm talking about. would that work?

 

[SelArom]

Originally posted by: Modeps
<table width="70%" cellpadding="400" cellspacing="1">

oh yeah I forgot about percents

 

[LordSnailz]

ah, thanks modeps, but how would I size my original images?
So say my banner is of size 700px, the image will resize by itself?

I like SelAron idea as well since that way we don't have to rely on html to resize the pictures ... got a link for that? off to google for now

 

[edmicman]

I don't know if I would go with resizing images - usually you want the images to be a static size, and just resize the tables around them using percentages. Just my .02.

 

[Beau]

Originally posted by: Modeps
<table width="70%" cellpadding="400" cellspacing="1">

USE CSS!! WE MUST DESTROY ALL DEPRICATED ATTRIBUTES.

<table style="width: 70%">

Or even better, if it's just a banner:

<div style="width: 70%">

 

[Beau]

Originally posted by: LordSnailz
ah, thanks modeps, but how would I size my original images?
So say my banner is of size 700px, the image will resize by itself?

I like SelAron idea as well since that way we don't have to rely on html to resize the pictures ... got a link for that? off to google for now

That would require javascript, but as edmicman said, resizing images and especially fonts (because they don't actually scale the same way) is not friendly.

If you really want this, make it in flash, where everything is vectored.

 

[SelArom]

This might get you started all you need to do is modify it to calculate the width based on the resultion of the users monitor.

this link should get you started on that too.

hope I've been helpful!!

 

[Beau]

Originally posted by: SelArom
This might get you started all you need to do is modify it to calculate the width based on the resultion of the users monitor.

Using PHP to create resized images on the fly is not a very efficient solution and could actually crash the server.

 

[SelArom]

Originally posted by: Beau

Originally posted by: LordSnailz
ah, thanks modeps, but how would I size my original images?
So say my banner is of size 700px, the image will resize by itself?

I like SelAron idea as well since that way we don't have to rely on html to resize the pictures ... got a link for that? off to google for now

That would require javascript, but as edmicman said, resizing images and especially fonts (because they don't actually scale the same way) is not friendly.

If you really want this, make it in flash, where everything is vectored.

I agree, I wouldn't resize images either since they'll get distorted, but if this is what he wants to do, it might help to use javascript. Does CSS work with image size too? I didn't know that. But how would you change the css style dynamically based on the user's resolution?

 

[Beau]

Originally posted by: SelArom

Originally posted by: Beau

Originally posted by: LordSnailz
ah, thanks modeps, but how would I size my original images?
So say my banner is of size 700px, the image will resize by itself?

I like SelAron idea as well since that way we don't have to rely on html to resize the pictures ... got a link for that? off to google for now

That would require javascript, but as edmicman said, resizing images and especially fonts (because they don't actually scale the same way) is not friendly.

If you really want this, make it in flash, where everything is vectored.

I agree, I wouldn't resize images either since they'll get distorted, but if this is what he wants to do, it might help to use javascript. Does CSS work with image size too? I didn't know that. But how would you change the css style dynamically based on the user's resolution?

you still end up downloading the full size image, but your browser just changes it's displayed size.

In order to get everything to work correctly, he'll have to adhere to some strict standards for coding (like where to specify the font sizes and image dimensions) and will have to create a javascript that will cycle through every HTML element and reduce it based on the users window dimensions. The javascript wouldn't be *that* hard I suppose, but it won't work flawlessly because of the fonts. Fonts don't display at regular pixel sizes, even if you specify them to be. ex: in PC IE, you'll never get a font below 6px.

 

[LordSnailz]

ugh -- didn't know it was such a pain to do this .. I don't want to learn all this java php stuff, I'm an EE engr!!
What does everyone think of SelArom original idea, to have to it detect the user res. and use the pre-defined images based on that value. So I can have image1_res1024, image1_res1280, etc. This such a pita for a personal website ...

 

[SelArom]

ahh just make 3 copies of your site (800*600, 1024*768, and 1280*1024) and redirect!

or just make it with a width of 800. there can't be that many people still browsing at 640*480. everyone else will just see blank space on the edges. no biggie

incidentally, why is it so important that it looks the same on different resolutions?

 

[LordSnailz]

Alas finally found a way to have the site select the correct css file but now I'm stuck. The images are controlled through the html file so even though my css file says 600px as oppose to 800px, the same image is displayed. What was the point in have it go to different css files again?

How do you do this re-direct thing?

Why is it so impt. for it to look the same? Cause I'm freakin' anal but now that I'm thinking about it, I don't think I care that much. I'll give it a few more days if I can figure it out, then it stays!