1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

CSS Novice - Problem with wide-screen display

Discussion in 'Web Design & Development' started by stclair, Oct 30, 2007.

Thread Status:
Not open for further replies.
  1. stclair

    stclair Thread Starter

    Joined:
    Oct 30, 2007
    Messages:
    1
    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;}
     
  2. metweek

    metweek

    Joined:
    Jun 6, 2003
    Messages:
    125
    I see in your CSS you are trying to set the width on a div with an id of wrapper. Which doesn't exist. You need to wrap all your page contents within a div. See below

    Add opening div tag with an id of "wrapper" on line 167
    Code:
    <script name="J-BotScroller" type="text/JavaScript" language="JavaScript" src="Skills%20for%20Change_files/scroller.js">
    // Copyright Webs Unlimited, Inc. 1999, 2000, 2001 http://www.websunlimited.com
    </script></head><body>
    <div id="wrapper">
    <table style="border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%">
    	<tbody><tr>
    
    Add closing div tag at line 538
    Code:
    urchinTracker();
    </script>
    </div>
    </body></html>
    
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/645733

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice