Screen Resolution Variables

Najoba · #1 (**permalink**) 09-20-2005, 12:32 PM

I need some help with code for my hubby's website at www.pc-fixer.biz

I created this simple home page for him at an 800x600 resolution and thought all was well. Last night, my husband took a look at his site on his computer, on which the screen resolution is much larger. The site looked bad, as the designed page was on the left of the screen, and right third of the webpage on his computer was all blank. I would like to be able to code in the ability for my webpage to readjust to different screen resolutions.

Can someone help?

Thanks,

Naj

web_hosting_world · #2 (**permalink**) 09-20-2005, 03:06 PM

You can do it using javascript. You can find the javascript at:
http://www.dynamicdrive.com/dynamicindex9/index.html

If you don't want to use javascript, you can make your main table align in center make your page background to some other color. It would leave equal space on both sides and would look nice.

KeithO · #3 (**permalink**) 09-20-2005, 03:39 PM

In looking at the code, not sure whats going on there. Try simplifying it by creating 1 table with 2 colums. Currently it looks like you've got 2 tables with 3 columns each and more empty cells than used ones. Is there a reason for this?

I was bored so I went through and cleaned it all up for ya. Feel free to use it if you want. The only thing you'd need to do is to create a background that is 640 wide and 2 tall of the white/black background.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>San Jacinto County TX PC Repairs, PC Upgrades, and Custom-Built PCs with FREE Tutorials</title>
	<meta HTTP-EQUIV="description" CONTENT="Computer Repairs, Upgrades and Custom-Built PCs with FREE Tutorials in Coldspring, San Jacinto County, TX">
	<meta HTTP-EQUIV="keywords" CONTENT="computer repairs Coldspring TX computer upgrades San Jacinto County TX custom-built computers with FREE Tutorials PC repairs Point Blank TX PC upgrades Oakhurst TX Custom-built PCs with FREE Computer Lessons  Shepherd TX">
	<LINK REL="SHORTCUT ICON" HREF="http://www.pc-fixer.biz/favicon.ICO">	
	<style type="text/css">
	<!--
		body { margin: 0px; background-image:url(/images/background.gif); background-repeat: repeat-y; }
		.style7 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#000000;}
		.style8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color:#FFFFFF;}
		.style9 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color:#FFFFFF;}
		.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; color: #FFFFFF;}
	-->
	</style>
</head>
<body link="#000000" vlink="#C0C0C0">
<table width="630" cellpadding="0">
	<tr>
	  	<td width="315" class="style7" align="center">
			

</p>
			

Quality Computer Repairs</p>
			

serving</p>
			

Coldspring, Shepherd, Point Blank, and Oakhurst areas of San Jacinto County, TX</p>
			

Custom-built Computers</p>
			

Computer Upgrades</p>
			

Paul Barginear</p>
			

(936) 653-4388</p>
			

[img]/images/emladdy.gif[/img]</p>
		</td>
		<td width="415" align="center" bgcolor="#000000">
			<p class="style8">HOME PAGE</p>
			<p class="style9">PC-FIXER.biz</p>
			

[img]/images/guarantee.gif[/img]</p>
	  	</td>
	</tr>
	<tr>
		<td></td>
	  	<td bgcolor="#000000" align="center">
			<p class="style10">©2005 123-WebWeavers</font>[/b]</p>
	  	</td>
	</tr>
</table>
</body>
</html>

This should help maintain browser/resolution consistency.

Najoba · #4 (**permalink**) 09-21-2005, 02:19 AM

Thank you both for the assistance.

I'm not sure why it looks as if I had created more than one table. I changed the margins of the background to zero, and then created one table with 2 columns with a number of rows. That was all. I left one blank (white) and the other column I changed to black. I thought it was relatively simple. Maybe not. I might have put a one column multi-row table inside of each original column. It's been months now since I first created it, and just finally decided to finish it and upload it this week.

I wanted the appearance to remain as it is shown on my 800x600 resolution -- a simple full white "page" on the left, and a full black "page" on the right, no matter what screen resolution is being used...without the addition of a third color as a background. So I created the table at 100%, but had not realized that when viewed on a larger monitor with a higher screen resolution, it would change the appearance.

I will try your suggestions tomorrow, and see how it turns out.

Thanks again.

I'll post again to let you know how it turns out.

KeithO · #5 (**permalink**) 09-21-2005, 02:46 PM

Oh, I must have misread your statment then. The reason it doesn't look right on other monitors is because of the fixed pixel statements in the tables. They need to be set at 100% for the table and 50% for each column. I don't have time to show you exactly in the example.

imvain2 · #6 (**permalink**) 09-21-2005, 05:48 PM

Essentially what keith's last post is:

<table width="100%" cellpadding="2" cellspacing="0" border="0">

<TR>
<td width="50%" valign="top">Left Side white column</td>
<td width="50%" valign="top" bgcolor="#000000">Right Side Black Column</td>
</tr>
</table>

octaglider · #7 (**permalink**) 09-21-2005, 07:06 PM

Might I suggest that the table is of limited height as well as width and is itself centered on the page, as this avoids the empty scrolling of the black & white background below the information presented on the page.

Best wishes,

Steve

imvain2 · #8 (**permalink**) 09-21-2005, 07:19 PM

Quote:

Originally Posted by octaglider

Might I suggest that the table is of limited height as well as width and is itself centered on the page, as this avoids the empty scrolling of the black & white background below the information presented on the page.

Best wishes,

Steve

The reason why she has the vertical scrolling is as simple as she has tons of rows filled with non breaking spaces, once those are removed the empty vertical scrolling won't become a problem

Weedy Lady · #9 (**permalink**) 09-21-2005, 08:58 PM

two reasons you should remove the music:
1. A commercial web site should not have background music.
2. That song is still under copyright and you can get yourself in a world of legal trouble and more expense than you can ever imagine if you use it......and "they" WILL find you.

If you insist on using music on a commercial website, either use something for which you have permission from the composer/arranger or something that is around 100 years old.

I have a greeting cards site which requires music on the cards pages and I use both of the above types of music.

hbonline · #10 (**permalink**) 09-21-2005, 11:35 PM

I would suggest that you pretty much never try to make your page adjust to different screen resolutions.

I have a large screen and I view at 1280X1024 I like to have what I am looking at as clear as possible.

If you adjust to stretch to better resolutions your design will not look the way you inted it to be viewed.

If that dosen't bother you then I guess thats ok.

800x600 is the right size for 15 inch screens and 1024X768 for 17 inch screens, and if you look at the stats below you will see the percentages for different resolutions.

Stick with your 800X600 until the 1024X768 start exceeding by a large margin. you don't want to ailenate any viewer by side scrolling.

Screen Resolutions

1280x1024 3%
1152x864 1%
1024x768 39%
800x600 52%
640x480 0%
1280x960 0%
1400x1050 2%
Unknown 3%

...But I would make your site centered.

later,

Nick

Najoba · #11 (**permalink**) 09-22-2005, 03:12 AM

Thanks for all the tips, you guys, you are the greatest!

I am still working on it. I can't seem to get it like I want it, when I make the changes (so far). I may just end up having to change my design altogether. I've tried achieving what I want by even creating 3 or 4 new home pages tonight with different approaches and it just isn't working out.

And yes, you are right about the music....I threw it in at the last moment with many misgivings. I think I'll just leave it out. I was simply trying to see if the author of the book I have been reading on Sites that Sell might have a valid point about including music. I am well aware that music is not appropriate on a commercial site.

Back to the drawing board!

espectations · #12 (**permalink**) 09-22-2005, 04:08 AM

Just as a rule of thumb I use the following rules and it served me well over the years Table width 750 and centered on the page.

I played around a lot with screen resolutions and the way it displays and found this table width to work best for me.

It might be different for different people though. Nowadays I use CSS and I played with that too - managed to find a nice way to basically do tables in CSS but found that the 750 width still works the best.

Cross-browser display is also something you should bear in mind - important to make sure that your web site works across the spectrum of various browsers.

Being in South Africa the other day I had someone contacting me - they were still using Internet Explorer 5!!!!

So the css did not display correctly. I have to fix a very old computer now to set it up with windows 98 and IE 5 to check what it looks like. Is going to be interesting.

On that point I checked my clients' stats and saw that 1.5% of his total visitors still use IE5

It is very little in the scheme of bigger things but I am going to be check this out regardless.

Najoba · #13 (**permalink**) 09-22-2005, 05:10 PM

Well, about 3 AM this morning, I gave up trying to achieve a half-white, half-black screen that would be consistent with different screen resolutions. I just created a quickie site and uploaded it a little before 4 AM....for the time being. With Hurricane Rita threatening our extinction, I had to abandon all web design efforts for the time being.

If we survive Rita, I'll give it another try.

Thanks, all.

Najoba · #14 (**permalink**) 09-23-2005, 11:14 AM

Well, here I am again....we are still waiting to see where Hurricane Rita will make landfall. So while my hubby is still boarding up a few more windows, I checked on my browser stats at my most popular web site, to see if I really want to design my sites for a variety of browsers. Here they are, as a matter of interest for you all:

Browser Stats

IE 6.0 70.1%
IE 5.5 0.7%
IE 5.23 0.5%
IE 5.22 0.4%
IE 5.21 0.0%
IE 5.2 0.0%
IE 5.17 0.8%
IE 5.16 0.0%
IE 5.01 0.2%
IE 5.0 0.7%
IE 4.01 0.0%
IE ? 0.0%

Netscape 0.5%
Firefox 9.3%
Unknown 8.4%
Mozilla 2.2%
Opera 0.4%
WebTV Browser 0.0%
Lynx 0.0%

(remainder were PDAs and media players)

RJ38 · #15 (**permalink**) 09-26-2005, 12:18 PM

Browser Usage Statistics

http://www.w3schools.com/browsers/browsers_stats.asp

Weedy Lady · #16 (**permalink**) 09-26-2005, 07:39 PM

RJ38:

Good info on the stats page. Fits my site stats almost exactly. I appreciate their comments about the type of site/visitors. My site is general public and my visitors and general public, most of whom have absolutely no inkling that what "comes with" and what is preset can be changed. Heck, a lot of them don't know that your online mailbox will fill up if you don't delete your deleted items and sent items!!!

It all comes back to "know your target audience", doesn't it????

drummin · #17 (**permalink**) 10-08-2005, 03:02 AM

Hi Najoba,
As I don't see that two column page you're working on, I thought I'd make this little page. I moved most of the styles out of the table so you can modify in css. Gives you something to play with anyway.
<html>
<head>
<title></title>

<style type="text/css">
body {padding:0px; margin:0px; background-color:#353535;}
.pagearea {width:750; position:absolute; top:5px; left:50%; margin-left:-375;}
.pageborder {border:1px solid; border-color:#E9D6BC;}
.leftpanel {background-color:#000000; width:50%; padding:15px;}
.rightpanel {background-color:#ffffff; width:50%; padding:15px;}
.heading {background-color:#696969; width:100%; padding:5px; border:1px solid; border-color:#737373;}
.wht {color:#ffffff;}
.blk {color:#000000;}
.text30 {font: 30px/1 Lucida Calligraphy; line-height:40px; color:#FFFFFF;}
td {font: normal 11px/1 Arial;}
</style>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" summary="" class="pagearea">
<tr>
<td align="center">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" summary="" class="pageborder">
<tr>
<td align="center" class="heading" colspan="2"><span class="text30">My Site</span>
by my lovely wife</td>
</tr>
<tr>
<td valign="top" class="leftpanel"><p class="wht">Bunch of text goes here Bunch of text goes here Bunch of text goes here Bunch of text goes here </p></td>
<td valign="top" class="rightpanel"><p class="blk">Bunch of text goes here Bunch of text goes here Bunch of text goes here Bunch of text goes here </p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode