Welcome to WebmasterWorld Guest from 54.144.107.83

Forum Moderators: not2easy

Message Too Old, No Replies

How do I make site look like 1000x800px on bigger screens?

     
1:05 pm on Aug 30, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 11, 2009
posts: 9
votes: 0


The site on all screens that are about 1000x800 looks really nice and exactly how I wanted it to be.... However, in bigger screens all the elements of the pages are positioned quite far from each other leaving big empty spaces in between them... How do I fix this so that in any bigger screens the site still looks as if it was in 1000x800?
I am using Dreamweaver and obviously swim in newbiness :)
4:51 pm on Aug 30, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


so that in any bigger screens the site still looks as if it was in 1000x800?

Do you mean maintain 1000 pixels width on any monitor, or maintain the same proportion as if it were on a 1000 pixel monitor?

This has been the challenge of developers since the birth of the Internet, develop a GUI that will work properly on millions of output devices, none of which you will ever see. There are almost as many ways to resolve it. Mine would be this.

If you want 1000 pixel width, use pixel widths for your container and center it (or not) in the viewport:

#main-div {
width:1000px;
margin: 0 auto 0 auto;
}

But the problem here is that this may render very small on a high res monitor, or cause a horizontal scroll bar on a lower res one (typing this through my 21" CRT as we speak, it's set for 1024 X 768 ATM, but many 17" 800 X 640's out there still.) A second solution is to set your page at 100% width, which "kind of" meets the second condition:

#main-div {
width:100%;
margin: 0; /* Since it's 100%, no need to center */
}

But wait again, what about those uber cool super wide aspect ratio monitors in high resolution? This makes my web site TOO wide, and there are now lines of text over 20 inches wide, making a legibility problem as bad as 6 point text. Now what?

One solution is to set the max-width property on the container, but this is not supported by IE6. My argument here is that if they are on IE6, the likelihood of them having an extremely wide monitor is very slim.

#main-div {
width: 100%
max-width:1000px;
min-width:800px;
margin: 0 auto 0 auto; /* as it may or may NOT be 100% */
}

This is my approach and I am by no means an "expert" but appears to work for IME. Welcome aboard!

2:45 pm on Sept 1, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 11, 2009
posts: 9
votes: 0


Hi rocknbil,

yes I want to maintain the pixels width on any monitor.

thanks for your input, very informative! I think the last approach is what I need. However, my site is using tables and I am still trying to figure out if your suggestion can fit into tables... does it?
cheers!

5:07 pm on Sept 1, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


<table id="main-div">

Sans CSS,

<table width="1000" align="center">

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members