Help with coding

**jon_w_walker** · 11-18-2005, 12:15 AM

I have tried to get my web page to fit to fill any rez monitor to no avail. Can anyone help? I have an under construction page up to test this before I load the complete site. Here is the code for it. What do I need to change to get this to fit any monitor say for example like the Apple web site where they have that nice header that will fit any monitor you use whether it's 800x600 or 1024x768. I've managed to get it centered by making the left margin 100 but if you open it on a smaller rez monitor than 1280x1024 it is massive and you have to scroll to see everything. Suggestions? Thanks for all the help.

<html>
<head>
<title>comingsoon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="000000" leftmargin="100" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
[img]images/index_01.gif[/img]</td>
<td colspan="3">
[img]images/index_02.gif[/img]</td>
</tr>
<tr>
<td rowspan="2">
[img]images/index_03.gif[/img]</td>
<td>
[img]images/index_04.gif[/img]</td>
<td rowspan="2">
[img]images/index_05.gif[/img]</td>
</tr>
<tr>
<td>
[img]images/index_06.gif[/img]</td>
</tr>
</table>

</body>
</html>

**ADAM Web Design** · 11-18-2005, 12:30 AM

If you want it to fill up horizontally, use style="width: 100%;".

Vertically is wonky at the best of times, but try style="height: 100%;".

**RedMark** · 11-18-2005, 02:20 PM

I notice the Apple website's graphics fit on an 800 x 600 screen and that's the way I usually do it. Make your banner graphic about 760 pixels wide and then set up a table within a table.

Code:

<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
  <td background='left-xt.gif'>[img]left-xt.gif[/img]</td>
  <td>
    
    <table width='760' cellpadding='0' cellspacing='0'>
    </table>
    
  </td>
  <td background='right-xt.gif'>[img]right-xt.gif[/img]
  </td>
</tr>
</table>

What this does for you is put 'wings' on either side of your banner. On an 800x600 screen, you'll see two small wings on either side of your perfect banner. On a 1280x1024 screen, you'll see two much larger wings on either side of your perfect banner. The wings should be constructed so that they seamlessly merge into your banner and will stretch horizontally without changing their appearance.

Please note, the above code is not a cut and paste solution. You'll have to work this into your own site. It's meant as an example only. To demonstrate the effect, change your screen resolution to 1280x1024 and take another look at apple's website.

Hope this helps. It's a little confusing at first, but it makes a true header for your site.

Mark

**Markll** · 11-18-2005, 04:15 PM

Design in Flash and publish to a percent rather than pixels.

Perfect fit at EVERY screen resolution and EVERY browser major type.

**SafariMan** · 11-18-2005, 04:35 PM

Damn, I didn't notice that RedMark had already given you some code. Anyway, now you'll have enough examples I guess.
This one's similar, but it will fill the whole page and not limit your actual content to 800px wide

I think you'll ge the idea from everyone's comments that key is balancing 100% width with fixed width images, or something like that.

Code:

<html>
<body topmargin="0" leftmargin="0">
<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>[img]SiteLogo.jpg[/img]</td>
		<td width="100%" bgcolor="#0033FF"></td>
	</tr>
</table>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td valign="top">
			[img]blank.gif[/img]

			Left Menu
		</td>
		<td width="100%" bgcolor="#0099FF">
			Main Content of page here
		</td>
	</tr>
</table>
</body>
</html>

**DrTandem1** · 11-18-2005, 06:41 PM

When using 100%, it is important to remember that some people have very large monitors. No one wants to read a sentence that is two feet wide. Therefore, you may want to place text within smaller width tables that are nested within the overall table for easier reading.

Also, there is no height attribute for a table.

**newhomeplans** · 11-19-2005, 12:18 PM

I haven't had any formal training in writing code, but isn't "height=100%" the easiest way to make a table within a table fill the main table?

Please correct me if I am wrong.

Allen Jones
Salmon Arm, British Columbia

**DrTandem1** · 11-19-2005, 12:55 PM

Originally Posted by newhomeplans

I haven't had any formal training in writing code, but isn't "height=100%" the easiest way to make a table within a table fill the main table?

Please correct me if I am wrong.

Allen Jones
Salmon Arm, British Columbia

There is no height attribute for the <table> tag. The table's height is determined by its contents. In other words, if you have a table with a width of 100 pixels and you insert an image that is width="100" and height="200", the table would stretch to the height (or length, you prefer) of that image plus any cellpadding you may have added.

**SafariMan** · 11-19-2005, 01:03 PM

DrT,

I hardly ever use height, so I assumed you were refferring to browser incompatibility. However, I had a look in Dreamweaver's reference and it says both netscape/mozilla and IE (since IE3) support height in a table.

True that the table will extend past the height you specified if in image or something inside the table is greater than the table's height, but that's true of the width as well. Save my code below in a file and view it in your browser and it'll fill the whole page. Or at least it does for me in IE.

**DrTandem1** · 11-19-2005, 01:13 PM

Originally Posted by SafariMan

DrT,

I hardly ever use height, so I assumed you were refferring to browser incompatibility. However, I had a look in Dreamweaver's reference and it says both netscape/mozilla and IE (since IE3) support height in a table.

True that the table will extend past the height you specified if in image or something inside the table is greater than the table's height, but that's true of the width as well. Save my code below in a file and view it in your browser and it'll fill the whole page. Or at least it does for me in IE.

For more details, please go to the following URL:

http://www.apptools.com/examples/tableheight.php

Note the third paragraph on that page. Your page will not validate with such a height attribute.

Thread: Help with coding

Thread Tools

Display

Help with coding

Similar Threads

Social coding.

Paypal coding

Auto Coding

Help with some basic coding please?

PHP coding help required

Posting Permissions