screen resolutions?? 1

sfddbigt · Jun 21, 2002

I was wondering how some websites are able to be viewed at 1024x768 and 800x600 and still take up the whole browser window. its as if they resize themselves to fit the users resolution. is this some sort of scriptinig?

http://www.theplatoon.com/

this link will demonstrate what I mean if you view it in both resolutions.

Crspy63 · Jun 21, 2002

this effect is created using nested tables. If you view the source code of the site you mentioned. You will see that they start with a single cell table with a width of 100%. They put another table inside it with three columns --> left most column set to a specific width, rightmost column set to a specific width, and center (or middle column) with no width set. This will allow the center column to "stretch" to fit the screen width.
Word of caution:
When you utilize this type of layout, cells can easily get "squished" to unusable size or hidden under other tables. To make sure this doesnt happen, I take the smallest size I want my page to appear (640 pixels) and use spacer gifs to make sure the center cell does not shrink below that size. Example:
left column 150 pixels
right column 150 pixels
center column no width but a spacer gif that is 340 wide so that if the user shrinks the window below 640, the spacer gif stops the center column from shrinking beyond 340 pixels.

Hope this helps,

Crispy

sfddbigt · Jun 22, 2002

thanks crspy63 that gives me a great idea of what to do. I will have to mess around with that idea and see if i can get it to work [upsidedown]

Crspy63 · Jun 22, 2002

If you need more clarification, information, or debugging, give me a shout on this thread. I have it marked for notificaiton.

Crispy

sfddbigt · Jun 22, 2002

Hi crspy i have been trying the nested tables method and i cant seem to get it to work at all, not sure what i am doing wrong. Also, if i want my page to be able to be viewed at both 1024x768 and 800x600,which resolution should i design for?? i created a single cell table and then 3 more tables inside that but from there everything seems to go wrong. im beating my head on my keyboard [neutral]

GUJUm0deL · Jun 22, 2002

Most of the users use 1024 resolution (although I still use 800 resolution), but I code for both...
The single cell is made as 100% for width right?? And the other tables inside what width did you make them?? I also make the inside table 100%...
Can you post like a snippet of the tables, or post the URL where you have it?? I have not failed; I merely found 100,000 different ways of not succeding...

sfddbigt · Jun 22, 2002

I know not one single bit of HTML, i am strictly a visiual guy(i guess thats why i use DW)maybe thats my problem.
i have not posted anything yet but when i do i will post the url for you

Crspy63 · Jun 23, 2002

Clarification:

The outermost table is 100%. It is made up of a single cell whith 0 cellpadding and 0 cellspacing.

Within this cell, you would put one more table at 100%width. It will have as many columns (vertical cells) as you want and all cells will have a specific width set...all except for one - this one cell will be your "stretching" cell.

The single pixel gif is used as a spacer so that the "stretching" box will not shrink to small....

As far as what you resolution you are designing for, go for the smallest screen resolution (800x600 in your case) this will enable the 800 viewers to see everything and the 1024 viewers will not notice much but some extra space on the sides (if main table is centered).

I am breaking up this thread so it doesn't get to big - the following will be two examples of code that will display the table design we have been discussing. The first will be with no spacer...the second with a spacer.

Crspy63 · Jun 23, 2002

the following is code for example 1 (no spacers). Cut and paste the code into a new DW window:

<html>
<head>
<title>Crispy's 100% Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="4" cellspacing="0" cellpadding="0" bordercolor="#FF0000" height="189" align="center">
<tr>
<td align="center" valign="top">
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" height="100%">
<tr>
<td width="150" bgcolor="#FFFF33">
<div align="center">COLUMN 1 = 150pixels</div>
</td>
<td bgcolor="#99FF99">
<div align="center">
<p>column 2 = no width set so it will stretch...</p>
<p>try stretching the window from maximized to very small to see
the affect no spacer has.</p>
</div>
</td>
<td width="150" bgcolor="#FFFF00">
<div align="center">column 3 = 150 pixels</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Crspy63 · Jun 23, 2002

Here is the second example (with spacers). I am pulling the spacers from my server....so make your own spacers for your site. Again, just cut & paste this into a clean DW window. If you still need help, let me know.

Hope this clarifies a bit......

Crispy

<html>
<head>
<title>Crispy's 100% Example 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="4" cellspacing="0" cellpadding="0" bordercolor="#FF0000" height="189" align="center">
<tr>
<td align="center" valign="top">
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" height="100%" bordercolor="#0000FF">
<tr>
<td width="150" bgcolor="#FFFF33">
<div align="center"><img src="

http://www.3manproductions.com/images/tiny.gif"

width="150" height="1"><br>
COLUMN 1 = 150pixels</div>
</td>
<td bgcolor="#99FF99">
<div align="center">
<p><img src="

http://www.3manproductions.com/images/tiny.gif"

width="340" height="1"><br>
column 2 = no width set so it will stretch...</p>
<p>Notice when you shrink the window to smaller than 640pixels,
the table stops shrinking. I purposefully made the spacer white
so that you could see it in the table. Normally, you would make
it transparent so that it would not be seen in the table..</p>
</div>
</td>
<td width="150" bgcolor="#FFFF00">
<div align="center"><img src="

http://www.3manproductions.com/images/tiny.gif"

width="150" height="1"><br>
column 3 = 150 pixels</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
The red bordered table is the outermost table, the blue bordered table is the
"nested" table
</body>
</html>

sfddbigt · Jun 23, 2002

WOW!! Crispy that was an excellent tutorial, I should have no troubles now(hopefully)creating my webpage with nested tables. Thank you very much for taking the time and effort to show me how to do that, I really appreciate it.
Thanks a WHOLE lot

[bigsmile]

*SF-dD* BigT [bigsmile]

TECHMAN007 · Jun 25, 2002

A second reason a site may resize dynamically is because it is flash. Flash uses vector objects which keep wonderful resolution on resize. Flash is a whole ball of wax on its own. Just thought I would throw this into the mix =).

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

screen resolutions?? 1

sfddbigt

Technical User

Crspy63

MIS

sfddbigt

Technical User

Crspy63

MIS

sfddbigt

Technical User

GUJUm0deL

Programmer

sfddbigt

Technical User

Crspy63

MIS

Crspy63

MIS

Crspy63

MIS

sfddbigt

Technical User

TECHMAN007

Technical User

Similar threads

Part and Inventory Search

Sponsor