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!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

screen resolutions?? 1

Status
Not open for further replies.
sfddbigt

sfddbigt

Technical User
Joined
Dec 25, 2001
Messages
11
Location
US
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?
this link will demonstrate what I mean if you view it in both resolutions.
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
If you need more clarification, information, or debugging, give me a shout on this thread. I have it marked for notificaiton.

Crispy
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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...
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
</head>

<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot;>
<table width=&quot;100%&quot; border=&quot;4&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bordercolor=&quot;#FF0000&quot; height=&quot;189&quot; align=&quot;center&quot;>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>
<table width=&quot;100%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;center&quot; height=&quot;100%&quot;>
<tr>
<td width=&quot;150&quot; bgcolor=&quot;#FFFF33&quot;>
<div align=&quot;center&quot;>COLUMN 1 = 150pixels</div>
</td>
<td bgcolor=&quot;#99FF99&quot;>
<div align=&quot;center&quot;>
<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=&quot;150&quot; bgcolor=&quot;#FFFF00&quot;>
<div align=&quot;center&quot;>column 3 = 150 pixels</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
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=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
</head>

<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot;>
<table width=&quot;100%&quot; border=&quot;4&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bordercolor=&quot;#FF0000&quot; height=&quot;189&quot; align=&quot;center&quot;>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>
<table width=&quot;100%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;center&quot; height=&quot;100%&quot; bordercolor=&quot;#0000FF&quot;>
<tr>
<td width=&quot;150&quot; bgcolor=&quot;#FFFF33&quot;>
<div align=&quot;center&quot;><img src=&quot; width=&quot;150&quot; height=&quot;1&quot;><br>
COLUMN 1 = 150pixels</div>
</td>
<td bgcolor=&quot;#99FF99&quot;>
<div align=&quot;center&quot;>
<p><img src=&quot; width=&quot;340&quot; height=&quot;1&quot;><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=&quot;150&quot; bgcolor=&quot;#FFFF00&quot;>
<div align=&quot;center&quot;><img src=&quot; width=&quot;150&quot; height=&quot;1&quot;><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
&quot;nested&quot; table
</body>
</html>
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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 =).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tallonius
  • Locked
  • Question Question
GoLive running but wont appear on-screen
Replies
0
Views
193
tallonius
tallonius
damipera
  • Locked
  • Question Question
@media print and @media screen
Replies
0
Views
105
damipera
damipera
Doctorcroc
  • Locked
  • Question Question
Layer Position and Different Screen Resolutions
Replies
4
Views
191
Doctorcroc
Doctorcroc
EricSietsema
  • Locked
  • Question Question
Screen Resolutions?
Replies
2
Views
94
lebisol
lebisol
sggaunt
  • Locked
  • Question Question
Changes due to larger screens
Replies
2
Views
183
sggaunt
sggaunt

Part and Inventory Search

Sponsor

Back
Top