I manage this web site: www.skillsforchange.org using FrontPage 2003.
I purchased a FrontPage template from a web design company that is now defunct. My old monitor was set to 800x600. I was blissfully happy with it until I purchased a wide-screen LCD monitor. Much to my dismay my web pages now stretches painfully from edge to edge. Visitors to my website who use a wide-display monitor must recoil in horror.
I''ve seen web sites like the one I am about to describe, but haven't any idea how to make the change - if possible.
I'd like the site to be a fixed (static?) width of 800 px. regardless of resolution or monitor type. It should be centered hortizontally.
There is a file called master.css in the root of the web. the contents of which I have pasted below.
Any help would be much appreciated.
Bill in Toronto, Canada
BODY {
font-family : Verdana, Arial, sans-serif;
font-size :13px;
color: #333333;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-color:#ffffff;
}
p, tr, td, li, ul, table{color: #333333;font-family : Verdana, Arial, sans-serif;font-size : 13px;}
A:LINK {color: #006699;text-decoration: underline;}
A:VISITED {color: #006699;text-decoration : none;}
A:HOVER {color: #ff9900;text-decoration : underline;}
A:ACTIVE {color: #006699;text-decoration : none;}
.header {background: #ffffff;}
h1 {font-size : 15px;letter-spacing: 2px;font-weight : bold;color : #006699;}
h2 {font-size : 13px;font-weight : bold;color : #ff9900; border-bottom: 1px solid #ff9900;}
h3{text-transform: lowercase;padding: 2px;font-size: 13px;font-weight: bold;color: #006699;
letter-spacing: 1px; padding: 2px; border-bottom: 1px solid #006699;}
h4, h5, h6 {font-size : 13px;font-weight : bold;color : #ff9900;}
.topnav {font-size: 11px; color: #006699;text-align: right;background: #ffffff; padding: 3px;}
.topnav2 {font-size: 11px; color: #006699;text-align: left;background: #ffffff; padding: 3px;}
.headerbar {text-align: left;padding: 3px; border-bottom: 1px solid #006699;}
.textarea {text-align: justify;background: #ffffff;line-height: 18px;padding: 20px;}
.leftside {text-align: center;}
.rightside {text-align: center;}
.infoheader {text-align: left;color: #ffffff;font-size: 11px;font-weight: bold;
letter-spacing: 1px;padding: 5px;background: #006699;border: 1px solid #011f35;}
.infoheader2 {text-align: left;color: #ffffff;font-size: 11px;font-weight: bold;
letter-spacing: 1px;padding: 5px;background: #ff9900;border: 1px solid #011f35;}
.info {text-align: left;font-size: 11px;line-height: 15px;padding: 5px;
color: #333333;background: #eeeeee;border-right: 1px solid #333333;border-bottom: 1px solid #333333;
border-left: 1px solid #333333;}
.catalog {padding:3px;line-height: 18px;font-size: 11px; font-family: arial, verdana, helvetica; }
.catalogheader {font-size:11px; letter-spacing: 2px; font-weight: bold;font-family:arial,verdana,helvetica;padding:3px}
.cattext {padding: 3px;font-size: 11px;line-height: 15px;}
.copyright {font-size: 11px;color: #006699;letter-spacing: 2px;padding: 5px;border-top: 1px solid #006699;}
I purchased a FrontPage template from a web design company that is now defunct. My old monitor was set to 800x600. I was blissfully happy with it until I purchased a wide-screen LCD monitor. Much to my dismay my web pages now stretches painfully from edge to edge. Visitors to my website who use a wide-display monitor must recoil in horror.
I''ve seen web sites like the one I am about to describe, but haven't any idea how to make the change - if possible.
I'd like the site to be a fixed (static?) width of 800 px. regardless of resolution or monitor type. It should be centered hortizontally.
There is a file called master.css in the root of the web. the contents of which I have pasted below.
Any help would be much appreciated.
Bill in Toronto, Canada
BODY {
font-family : Verdana, Arial, sans-serif;
font-size :13px;
color: #333333;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-color:#ffffff;
}
p, tr, td, li, ul, table{color: #333333;font-family : Verdana, Arial, sans-serif;font-size : 13px;}
A:LINK {color: #006699;text-decoration: underline;}
A:VISITED {color: #006699;text-decoration : none;}
A:HOVER {color: #ff9900;text-decoration : underline;}
A:ACTIVE {color: #006699;text-decoration : none;}
.header {background: #ffffff;}
h1 {font-size : 15px;letter-spacing: 2px;font-weight : bold;color : #006699;}
h2 {font-size : 13px;font-weight : bold;color : #ff9900; border-bottom: 1px solid #ff9900;}
h3{text-transform: lowercase;padding: 2px;font-size: 13px;font-weight: bold;color: #006699;
letter-spacing: 1px; padding: 2px; border-bottom: 1px solid #006699;}
h4, h5, h6 {font-size : 13px;font-weight : bold;color : #ff9900;}
.topnav {font-size: 11px; color: #006699;text-align: right;background: #ffffff; padding: 3px;}
.topnav2 {font-size: 11px; color: #006699;text-align: left;background: #ffffff; padding: 3px;}
.headerbar {text-align: left;padding: 3px; border-bottom: 1px solid #006699;}
.textarea {text-align: justify;background: #ffffff;line-height: 18px;padding: 20px;}
.leftside {text-align: center;}
.rightside {text-align: center;}
.infoheader {text-align: left;color: #ffffff;font-size: 11px;font-weight: bold;
letter-spacing: 1px;padding: 5px;background: #006699;border: 1px solid #011f35;}
.infoheader2 {text-align: left;color: #ffffff;font-size: 11px;font-weight: bold;
letter-spacing: 1px;padding: 5px;background: #ff9900;border: 1px solid #011f35;}
.info {text-align: left;font-size: 11px;line-height: 15px;padding: 5px;
color: #333333;background: #eeeeee;border-right: 1px solid #333333;border-bottom: 1px solid #333333;
border-left: 1px solid #333333;}
.catalog {padding:3px;line-height: 18px;font-size: 11px; font-family: arial, verdana, helvetica; }
.catalogheader {font-size:11px; letter-spacing: 2px; font-weight: bold;font-family:arial,verdana,helvetica;padding:3px}
.cattext {padding: 3px;font-size: 11px;line-height: 15px;}
.copyright {font-size: 11px;color: #006699;letter-spacing: 2px;padding: 5px;border-top: 1px solid #006699;}