FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Web Pages and Viewer's Screen Size

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


Dennise
Can anyone tell me how to make web pages automatically re-size to the viewers screen?

If I design pages on my PC with a 21" moniter, and then view the pages on a smaller laptop, I get those annoying scroll bars.

How do I get pages to render at the full screen size of the viewer's screen without the (horizontal) scroll bars

Thanks in advance Very Happy
sonam
You need liquid layout what mean percentage divs and em for fonts. But this is not very easy if your layout is very complicated. Here is few nice examples:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

Sonam
Dennise
sonam wrote:
You need liquid layout what mean percentage divs and em for fonts. But this is not very easy if your layout is very complicated. Here is few nice examples:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

Sonam


Ouch! I though that might be needed.

Thanks, I'll take a look at those examples.
GB
Yeah, that's a great method. Just think in percents instead of absolute pixel width. Or just design your site to be 800px wide. (ugh!)
Chinmoy
I keep it optimized for 124+768 for optimal performance.
polly-gone
You could use percentages to set the widths. Although, most of my sites have a very specific, complicated design that is centered, so often times, I will make my page 768 pixels wide exactly. That keeps the page exactly how I want it and virtually everybody can view it.

-Nick Smile Smile Smile

EDIT: This is my 600th post! WOOOHOOO!
ssweat
sonam wrote:
You need liquid layout what mean percentage divs and em for fonts. But this is not very easy if your layout is very complicated. Here is few nice examples:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

Sonam


That is what i have been looking for, thanks for the link. I usually make my pages a standard 1024x768 resolution because i believe this is minimal standards these days,but on higher resolutions it leaves alot of dead space ont the edges so this will be greeat to try for me. Thanks again.
Donutey
Dennise wrote:
Can anyone tell me how to make web pages automatically re-size to the viewers screen?

If I design pages on my PC with a 21" moniter, and then view the pages on a smaller laptop, I get those annoying scroll bars.

How do I get pages to render at the full screen size of the viewer's screen without the (horizontal) scroll bars

Thanks in advance Very Happy


As some others have said, a liquid layout is an option. However, these are difficult to pull off when your site gets more complicated.

I generally center justify the content (margin: auto;) and then set the width of that content to around 1000pixels. This lets people with 1024x768 (a still common resolution) view the page, while still being large enough for people with big widescreen monitors.

Anything smaller than that is not necessary as 800x600 and lower are only found on a couple percentage of computers.
ratanegra
There is an easy method to make tables and divs re-size horizontaly...

I have a website, it's ratanegra.frihost.org

I explain it the easier I can:

You want to work with percents (%), and not with pixels, because when you work with %'s, you are telling the screen, e.g. the table will be a 70% of the width of the screen, that means that when you put a smaller screen it will be still 70%, but 70% of a smaller screen...

I ALWAYS work with %, I put margins of 14% on each side, so if you put a smaller screen the margins won't get too big nor too small...

Code:
<table border=0 width="100%">


that table is inside a div with width="100%", and inside of the table is another table with a sub-menu, which gives me a way to make a "solid" (non-re-sizable) table inside a liquid (re-sizable) table...

If you want the top-margin be 4 pix's on your screen, but put it on a laptop which's screen is 1/2 of your screen, then you put it kind of 1% top-margin and in the laptop, when it's a half then it would be 0,5% of your screen, but 1% of laptop's screen...

I hope you understand what I'm saying (I'm not so good at English, I speak Spanish, so don't complain, I dont know how to xplain it better in another language...)

Greetings![/code]
Related topics

Problem with the web pages
Create Web pages without knowing HTML.
Best Designed Websites?
Web Pages That Suck
"Web Pages That Suck" Website and Books
Communicating between web pages
Fixing the screen size in Vector Linux on Laptop
Easiest way to type Maths in Web Pages?
Top 10 web design mistakes!..
Basic HTML Introduction
Windows Tips&tricks!
HELP me with Frontpage PLEASE
web pages
Master Tutorial on SEO
Java tutorials
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.