auto-size of site page to the viewers browser window size 1

JerJag · Jul 15, 2005

I'm interested if there is a way to have a site automatically
adjust and fill the the viewers browser window. I think I've seen this before and tried to find how this is done in the code.

I review another site that this seems to happen and saw this
in the code.
<table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%"><tr>

Is this possible? Can it be done with a page built with multiple frames or a single table. I can't find anything about htis in the DW documentation.
Thanks for your help.
Jerdog

lebisol · Jul 15, 2005

one way would be:

http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp

:--------------------------------------------------------------------------:

All around in my home town,
They tryin' to track me down...

Cheech · Jul 18, 2005

If you just want to fill the window then Lebisol has answered. If you wish to fill the entire screen then you will need to add a javascript function like this

Code:

<script>
function resizeWindow(){
window.resizeTo(screen.width,screen.height);
self.moveTo(0,0);
}
</script>

Then just call the function onLoad or whatever

Cheech

[Peace][Pipe]

JerJag · Jul 22, 2005

Lebisol oh great wise one, I bow before you.
Your suggestions was just what I needed.

This presents a new challenge.
When I reduce the window size enough to create a scroll bar at bottom, when I scroll to the right, the two tables (banner and nav bar)right edge don't line up, with the nav bar being a few pixels wider. (I checked both tables and they both include elements that have same width measurements with one cell that is autostretch)

Also, when I scroll to the right, the art doesn't autostretch after the window is reduced horizontally, showing a background color (white), even though the art below may still stretch right.
Any further help is much appreciated.

As I wait for your reply, we will gather up some village virgins and throw them into the volcano to appease you.

thanks (just kidding about the virgins and molten lava)

JerJag

lebisol · Jul 22, 2005

keep the molten lava out it

if u have some code or better yet a link it would help to see what is going on. Perhaps img position in relation to the cell/table could be causing it...post some more.
All the best!

:--------------------------------------------------------------------------:

All around in my home town,
They tryin' to track me down...

JerJag · Jul 22, 2005

Lebisol, many thanks. The virgins of my village are very relieved that you don't need a sacrifice to secure your help.

My nav bar is about 3 pixels wider from the above banner table

Being a designer, I work more in the Design mode rather than the code view (kind of like speaking English with a bad french accent in France) so I hope this is enough code to check:

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('JP_Assets/Nav_profile2.gif','JP_Assets/Nav_portfolio2.gif','JP_Assets/Nav_available2.gif','JP_Assets/Nav_contact2.gif')" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" valign="top" height="100" bgcolor="#000066"><img src="JP_Assets/JP_logo_white.gif" width="250" height="100"></td>
<td width="100%" valign="top" bgcolor="#000066"><a name="Page_top"></a></td>
<td width="473" valign="top" bgcolor="#000066" align="right"><img src="JP_Assets/header_spacer.gif" width="473" height="100"></td>
<td width="70"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="65,7,173,20" href="profile.html" target="_self">
<area shape="rect" coords="188,8,256,20" href="portfolio_frame.html" target="_self">
<area shape="rect" coords="268,8,334,20" href="available.html" target="_self">
<area shape="rect" coords="346,8,428,20" href="contact.html" target="_self">
<area shape="rect" coords="8,7,51,20" href="index.html" target="_self">
</map>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="204" height="23" valign="top" bgcolor="#000066"><img src="JP_Assets/logo_colorspace.gif" width="250" height="23"></td>
<td width="100%" valign="top" bgcolor="#000066"> </td>
<td width="366"></td>
<td width="151" valign="top" bgcolor="#000066"><a href="profile.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Nav_profile','','JP_Assets/Nav_profile2.gif',1)"><img name="Nav_profile" border="0" src="JP_Assets/Nav_profile1.gif" width="150" height="23"></a></td>
<td width="104" valign="top" bgcolor="#000066"><a href="portfolio_frame.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portfolio','','JP_Assets/Nav_portfolio2.gif',1)"><img name="portfolio" border="0" src="JP_Assets/Nav_portfolio1.gif" width="104" height="23"></a></td>
<td width="104" valign="top" bgcolor="#000066"><a href="available.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('available','','JP_Assets/Nav_available2.gif',1)"><img name="available" border="0" src="JP_Assets/Nav_available1.gif" width="104" height="23"></a></td>
<td width="130" valign="top" bgcolor="#000066"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_us','','JP_Assets/Nav_contact2.gif',1)"><img name="contact_us" border="0" src="JP_Assets/Nav_contact1.gif" width="115" height="23"></a></td>
<td width="121"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="288" height="60" valign="top"><img src="JP_Assets/spacer_left.gif" width="288" height="60"></td>
<td width="100%" valign="top"><img src="JP_Assets/spacer_right.gif" width="432" height="60"></td>
<td width="138"></td>
</tr>
</table

crystalized · Aug 16, 2005

In the link that was posted the only columns with values set for the width were the balloon columns (100%) but in your code you have pixel values set on the other columns all over the place. That will cause grief as was mentioned in the posted example site because you are mixing pixel and percentage widths within a single table. I notice you also have height values set in some places, and I know for certain that I have experienced problems with that. So what you might want to do is:
1. Select each table in turn in Dreamweaver
2. In the Properties tool click the buttons to remove column widths and row heights from the table
3. Go back and set the 100% column width on only the desired table cells.

NOTE: Dreamweaver will put in these widths etc for you if you are dragging border edges in the design view of your tables. The idea of the example that was posted should remove any need for adjusted the columns by dragging them etc.

I hope this helps!

Crystal
--------------------------------------------------

Experience is one thing you can't get for nothing.

-Oscar Wilde

AccessGuruCarl · Sep 24, 2005

Just a reminder...

Not everyones desktop resolution is the same, So if you designed the site at say 1024x768, and a user opens the page with 800x600 res, they wont see the entire page without having to scroll around.

AccessGuruCarl
Programmers helping programmers
you can't find a better site.

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!

auto-size of site page to the viewers browser window size 1

JerJag

Technical User

lebisol

IS-IT--Management

Cheech

Technical User

JerJag

Technical User

lebisol

IS-IT--Management

JerJag

Technical User

crystalized

Programmer

AccessGuruCarl

Programmer

Similar threads

Part and Inventory Search

Sponsor