Resizing table to fit for different screen resolutions

[HolisticDriving]

I created my first web page...I have exactly what I want for a layout in mind, and the first page is complete. However, I'm running into massive difficulties in geting the page to display the way I want it.

the page is: here (http://whalebone.elon.edu/cis114/jaleman/magicalartistry/enter.htm)

I want it so that you can read it and see the entire picture (without scrolling), no matter what screen resolution or window size you have in your browser. If you look at the page in high resolution you'll see what I want. I realized after I finished the page that when you look at it on different computers it's no longer the right size because I used pixel width and length. However, I can't figure out how to set the table, the image, and the text to resize automatically so that it is visible in all resolutions. I tried a million variations using percentages for the width and length, but it never works properly.

Is there any way to achieve this? I'm open to any suggestions, if you could show me how to use javascript or flash or anything else to make it work, I'll do it. This is my business web page and I want it to be professional and sleek. I appreciate the help immensely and apologize for the long post but it's difficult to explain exactly what I want. Thanks everyone!

[cg9com]

well, if you manipulated the size of an image from its default, it can look screwy right? so perhaps resize the picture? :)
also how have you been using percentages on your tables?

[zoobie]

If I understand you correctly, did you try sticking the whole page within a <table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>

You may want to define your 100%ages in the above's td as well as maybe making the valign="top".

Try playing around with that...I think the whole page kinda displays all at once when it's finished loading...ka-thump. :p

[meow]

I think you exaggerate the problem. As cg9com said, if you size the image in % it will look crappy. The image is long but it's not that wide. Does it really matter if the height doesn't fit everyone's browser window without scrolling? I think not. Maybe down-size it a little but apart from that I would do nothing. :)

Flash? Nah...

[ronaldb66]

You may also want to consider the fact that the average westerner reads / scans from left to right first, then top to bottom.
Thus your main message should really be left to right near the top of the page... but then again: it's your page, so it's your call.
Usually, you can pretty much control what happens horizontally; the vertical is mostly dictated by how much room is needed.

Code-wise, check out the uses of CSS to get rid of all those deprecated font elements and deprecated attributes; it'll make your code a lot more compact.

[HolisticDriving]

Well, I tried all kinds of combinations of percents in the various height and width attributes but they all failed. Either nothing happened at all or it totally screwed up the image, the table, or both. As to whether it matters if they have to scroll down the page, it does matter to me, simply because the page was designed with a visual appeal that's lost if they can't see it on the page.

I was hoping someone might know something about tables and images that might be causing the problem. I'm not sure that it's possible to have the table height and width resize, as that seems to be a sticky problem, so I posted hoping someone might have a way around this. I've heard you could use js to detect their resolution and display a smaller or larger table w/image accordingly, but I don't know how to use js, and that seems like a hell of a lot of work. What I don't understand is why this is so difficult...it seems like it should be a simple task, to have the table and image just auto-size itself with percentages of the screen but I've run into nothing but problems in doing so. In any case, if anyone has ever done something like this before or knows of anything else I can try, please add your comments, I'll give anything a try!

Zoobie, what did you mean about defining the 100%ages and making the page load all at once? You lost me in that statement.
Thanks everyone!

[Frank]

I you want people to see the entire screen no matter what screen size they have setup. Then the easiest way is to design your htm at 800x600 it may look to small on bigger monitors then you would like. However, sometimes you need to sacrifice design for functionality.

You know what they say, you can't always get what you want.

[cg9com]

Originally posted by Frank
You know what they say, you can't always get what you want.

var they = "Rolling Stones";

:D:D:D

[HolisticDriving]

Thanks...I'll give that a shot, also I had it pointed out to me that I should take the original pic and resize it much, much smaller. Thanks for the help everyone!

[zoobie]

Well, I think if you include your whole body html within a <table>
<tr>
<td width="100%" height="100%">
All body html here
</td>
</tr>
</table

...it doesn't load progressively...and just displays after loading all at once with a ka-thump. :D