A visitor to thesitewizard.com recently told me about a problem he had with his site layout. His multi-column website looked fine on his computer but when he used another computer that had a wider monitor resolution, the images and text on his website went out of alignment. As a result, the site looked awful under any resolution or window size other than the one he designed it under. This article describes how such a problem can be solved using either Nvu or KompoZer (free web editors).
Since this article was written to solve a specific problem, I will assume that you already know how to use either Nvu or KompoZer, and have already created a website using those editors. If this is not the case, and you're here looking for an article on how to design your own site, please see one of the following tutorials instead:
The above tutorials teach you how to design a website from scratch. Just pick any series you like -- both Nvu and KompoZer are free web editors. If you are completely new to website-making, you should also read my article How to Start / Create a Website: The Beginner's A-Z Guide. In fact, you should read the Beginner's Guide first, since there's more to creating a website than using a web editor. The guide will point you to the necessary tutorials, among other things.
If your site faces a problem of graphics or text being misaligned under certain resolutions, it means that you have created a site that is dependent on a particular width.
In such cases, you should change your site to use fixed widths, rather than relative widths. I have written elsewhere about the pros and cons of both fixed and relative widths in website design, and will not reiterate the points made there. If you wish, you can visit that article to learn more about the issue.
For sites that use tables to create a multi-column layout, do the following.
Start up either Nvu or KompoZer (whichever you used to create the site).
Click a spot somewhere in one of the table columns, so that the blinking text cursor appears inside the table.
Click the "Table" menu, and select the "Table Properties..." item from the menu that appears. A dialog box with the caption "Table Properties" will appear.
Look at the line that shows "Columns". The "Width" field of that line probably shows something like "100% of window" or some other figure in percentage. This is the value that you need to change. Percentage is a relative measurement. 100% of a 1024x768 monitor is narrower than, say, 100% of a 1680x1050 monitor. What you need is to set the width of your window in pixels.
To do this, click the drop down box for "% of window" and select "pixels" instead. Now change the "100" (or whatever number that was in the box before) to a number that is suitable for your website. If you're not sure what number to enter, try putting in some random number, save your web page and load it in your browser to see if it looks okay. Keep adjusting that number until the output in your browser has the appearance you want.
Note that the width you need will probably not be the same as your screen resolution. That is, for a screen resolution of, say, 800x600, the width of the visible portion of a displayed web page is unlikely to be 800 pixels, since the edges of the browser window take up some space.
When you've finished, click OK to exit the dialog box.
You have now fixed the total width of the table. However, depending on how you have created your layout, you may also need to resize the individual columns of your site. To do that, put your cursor in the column you want to configure, and then select "Table Properties..." from the "Table" menu again. This time, when the dialog box appears, click the "Cells" tab on the top of the window. The resulting dialog box allows you to change the width of the column to a number that suits your site's design. You can use either pixels or percentage here. As before, if you are not sure what value to use, just experiment with some number and adjust till it is to your satisfaction.
To adjust the widths of the other columns, if needed, click your mouse somewhere in that column to place the text cursor, bring up the "Table Properties" dialog box again, and do the same thing as before.
Once you've finished setting the fixed width, you will need to centre ("center" in US English) your table. Now that your table no longer fills the width of the screen, if your page is viewed in a maximized browser window on a large monitor, you will find that it is flushed to the left of the window. To solve this, see the article How to Centre a Table Using CSS in Nvu and KompoZer.
(For those using tables to define your site's layout, please skip this section.)
If you are using CSS to create a multi-column layout for your website,
chances are that you did not rely solely on Nvu's or KompoZer's WYSIWYG (What-You-See-Is-What-You-Get) interface, since Nvu/KompoZer has weak support for creating
and maintaining multi-column CSS layouts. In other words, if you used CSS to create your own layout, I can probably assume that you know the
basics of CSS, and don't really need a lot of hand-holding. All you probably need,
in such a case, is to know where to look to fix your code. So, for such people, I'll just mention that you need to set the width property
for your DIV blocks with a pixel value (instead of "%" or "em"). For example, if the containing DIV block for your two columns has an id of
container, do the following to make that column have a fixed width of 750 pixels.
#container {
width: 750px ;
}
After setting the width of your various columns, you will also need to centre your DIV block. To do this, see my article How to Centre a DIV Block Using CSS.
As you can see, changing a site to use a fixed width in Nvu/KompoZer is a simple task. With the above steps, the content of your site need no longer be misaligned in browser windows larger than the one you designed for.
Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
