Computer Hope

Internet & Networking => Web design => Topic started by: wusanderz on July 19, 2008, 05:06:49 PM

Title: Resizing Issue
Post by: wusanderz on July 19, 2008, 05:06:49 PM

  Ok, my site: http://www.manganime.ucoz.com, is too wide if the browser window's height/width ratio is changed, and I don't want to show a horizontal scroll bar. I've searched Google and these forums for keywords like "liquid design" and "fluid design" and "browser auto-resize" but I can't find what I want.
  Basically, my question is this: Can I make my page automatically change size to fit the browser's width perfectly so that there's never any horizontal scrolling bar? Thanks guys for answering.

Title: Re: Resizing Issue
Post by: kpac on July 20, 2008, 05:18:36 AM

So you use tables in the source code, right?

Just put this into the main table tag:

Code: [Select]

<table width="100%" ... >
. . . . .
</table>

BTW, I dont see any horizontal scrollbars.

Title: Re: Resizing Issue
Post by: wusanderz on July 20, 2008, 06:34:14 AM

Thanks for replying but my tables were already set like that. :P

Title: Re: Resizing Issue
Post by: kpac on July 21, 2008, 05:09:09 AM

Could you set it to maybe 80%, so it will be compatable with all screen/browser sizes?

How much, roughly, is it overflowing to the right?

Title: Re: Resizing Issue
Post by: aslater on July 21, 2008, 10:19:36 AM

I found this at Dynamic Drive a while ago, I hope it helps, I love that site.
ASlater

Auto Maximize window

In the head section:
<script language="JavaScript1.2">
<!--

/*
Auto Maximize Window Script- By Nick Lowe ([email protected])
For full source code, 100's more free DHTML scripts, and Terms Of Use
Visit http://www.dynamicdrive.com
*/

top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->

</script>

Title: Re: Resizing Issue
Post by: ChrisXPPro on July 22, 2008, 08:38:04 PM

Just a few thoughts .......

Even if tables set to 100%, which should normally give an auto adjust for the size it's being viewed at - some content can ''force'' size beyond, such as very long text strings, large images etc.  Other problem with auto sizing is formatting can change with size change - IMO not always useful for some text layouts, particularly when pics embedded within and then a scroll bar can appear.  It only takes one item within a page to ''push'' the size to then need a horizontal scroll bar with smaller screen res..

The auto maximize script shown in last post should work but - maybe just me - but I hate to have my browser forced full screen!!  I work in 1680x1050 res and have my app's cascaded and rarely want full screen - it's an option I'd use with discretion.

Again just me but - for uniformity of layout it seems better to choose fixed width .... either design for the 800x600 folks (they still exist) - or go for the 1024x768 crew which probably suits most laptops and is still within bounds for majority of surfers.  Of course, you can use a css wrapper or use a 100% table as your wrapper but use some fixed size elements within that for content.