Originally Posted by
plumber
does any1 know how to make a webpage viewable in all screen resolutions and all browsers?
The method is the same for all browsers.
Code all widths in % totaling 100%. That means all elements like divs, tables, td tags, forms, lists and also side margins, side padding and also images
Borders can't be sized in % so make the total of all other items 97% or 98% to allow for borders in px.
You won't find it easy for your page. You have a header image 1078*272px but it's a background which cannot be stretched so you have to make it a normal image and size that in px
<img style="width: 100%;" src="webpics1/background01.JPG" alt="Background image"/>
If you don't give a height, that will change automatically in proportion to the width.
Your navbar will be a problem as it isn't flexible in width because of the font-size and the cellspacing in px. Even if you size the td tags in % the font-size will be too great for a small window so it would be better to have a vertical sidebar menu.
Your page doesn't have a doctype above the <html> tag which is needed by all browsers, especially IE. See http://www.w3.org/QA/2002/04/valid-dtd-list.html
Totally fluid page design works best where there is very little content, so it can squash up without a problem and still look good at very large resolution widths. You can code min-width and max-width but this doesn't work in IE6.
The best you can do with your code without altering it too much is to wrap everything in a container with
Code:
#container{ min-width: 1078px; max-width: 1380px; }
but it won't affect IE6.
You have the #container style but you aren't using it yet.
Code:
<body bgcolor="#80FDFF" text=#0068FF LINK=#001EB2 ALINK=#001EB2 VLINK=#001EB2>
<div id="container">
.........all content.........
</div>
</body>
Another tip - don't use capitals in files names like background01.JPG as servers are case-sensitive and it makes coding easier if you stick to lower case in the code and in filenames.
Last edited by Wickham; 27 Jan 2010 at 01:36 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.
Reply With Quote
