Solved

Maintain Site Display Size Despite Size of Monitor

Posted on 2006-07-12
4
295 Views
Last Modified: 2010-04-25
I'm trying to make it so my site displays the same size on different monitors. For example, on my computer the website appears how I want it, but on others it may appear larger than life itself. I realize that it will vary in different browsers and on different monitor sizes but I wonder if there is a way around this problem. I would like to hear a great suggestion on how to fix this problem - no matter how elementary it is. Please describe the process in detail or provide a link to a possible solution. Thanks.
0
Comment
Question by:AllHale
  • 2
  • 2
4 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17096965
Hi AllHale,
 
I'm not sure I understand what you want.  Do you want the site to take up the same percentage of the screen no matter the monitor size or do you want the site to have the same width no matter the monitor size?

In either case, this is easy to do with a pure CSS design or a table-based design.  The former uses a CSS or table container set to percentage width and the latter uses a CSS or table container set to fixed pixel width.

Here's a couple of examples:

Percentage width: http://www.oswd.org/design/preview/id/2828

Fixed width: http://www.oswd.org/design/preview/id/2485
0
 

Author Comment

by:AllHale
ID: 17102688
I definitely want to take up the same percentage of the screen despite a change in monitor size. Is there a tutorial on creating the site in CSS design, I shy away from CSS now, but if it yields better results maybe I should throw myself into it.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 17102850
There are TONS of tutorials on CSS design.  Just google around until you find one you like.   It's not that CSS yields better results for what you are asking here, but it can do more than table-based design can.  Using tables to layout the site is fast becoming a no-no in web design so it is worth looking into CSS.

For this specific thing, all you would need to do is wrap all of the content of the page in a div or a one-cell, one-column table and set the width of that container to whatever % of the screen size you prefer and then make all other elements inside of that container % relative to the container.  The exception would be navigation bars (those should be defined as static widths).

So instead of defining a 760 pixel width with a 100 left and a 660 pixel right column, you would define a 80% container with a 100 pixel left box and let the right box take up the rest of the space.  As we are getting to specific code, I will leave off here unless you have more specific questions.
0
 

Author Comment

by:AllHale
ID: 17102913
No that's good enough for now. I'll try to do what you suggested and see if it solves my problem. Thanks again Jason, you're the best.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
breathing space around footer 13 262
slide show not working correctly 10 414
Extra Spacing In Pattern Matching 13 315
How Can I Get A Back Button To Work On My Website? 1 126
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question