Help with Web Design

[PeterGriffin]

I found this website template and modified it to my own, but now I have a question. It seems as though with the way it was created that it fits perfectly on the screen whether you are viewing it in 1024x768 or 800x600. So my question is, how did they do that?

I hate having to scroll to view a page that was created for 1024x768 and I hate the blank space that this viewed on a page created for 800x600. This website seems to have solved that problem. How can I recreate a website from scratch that would accomplish this same thing? I can’t see anything significant in the code that would lead me in the right direction, but I am no expert web developer either.

I’m using FronPage 2003 to make my pages and Photoshop to create the images.

Can you view my webpage and tell me how it was done please?

http://home.satx.rr.com/traversatech/


Thanks!!!

[Beemer]

The link isn't working but they probably are using tables. Set your screen res to 800x600. This will be scalable to higher res's.
The main table would be set close to 100%. I use 93 % on my pages. Don't set the main table to pixels. Use percentage on nested tables as well. This will keep the page scalable.

Cheers!

[ben-the-slacker]

Dead link.

[PeterGriffin]

Try this http://traversatech.gotdns.com

[Beemer]

Looking it over in Front Page, it's beyond me. Hang around and someone will have the answer.

Cheers!

[Droppyale]

the trick is in the "table width = 100%"

no matter what the resolution is, the table will adjust to cover 100% of the screen

[davidamarkley]

Yes, 100% is what it's set at.

One recommendation of mine, would be to have the header of the "Services" and "Contact Us" pages be 'inline' with the body text.

On lower resolutions (800x600, 1024x768) it looks fine. But, since it's actuall in two columns, it splits when you get over those two resolutions, and just doesn't look as nice.

It's a simple fix too... Here's what you do:

Current Code:

	<table border="0" width="100%" id="table1">
		<tr>
			<td colspan="2">&nbsp;<p>

			<font face="Arial" size="6" color="#074F82">Services</font></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td width="904">

Fixed Code:

	<table border="0" width="100%" id="table1">
		<tr>
			<td colspan="2">&nbsp;<p>

			<center><font face="Arial" size="6" color="#074F82">Services</font></center></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td width="904">

Notice the <center > codes. That will center the "Services" text, instead of leaving it stranded over on the top left, while the body text moves to the right farther and farther with higher resolutions.

The actual problem is that the main body text tables seem to be aligned to the right. I couldn't see any quick fixes for that, as I don't have a lot of time to delve through the code, but if you could make it so it's either left aligned, or centered, it would make for a better web page.

HTH,

Dave