How to fix the width of your site

Frequently asked questions about styles/themes/templates, avatars and ranks.

Moderator: Moderators

How to fix the width of your site

Postby Disturbed One on Tue Feb 21, 2006 4:25 am

I see this question frequently, so please read this before you ask for support on it.

Question
How can I fix the width of my forum/website?

Answer
You can do this 2 ways. One way (the easiest way) alters tables. The other adds a div.
  • Solution 1
    In your templates/*templatename*/overall_header.tpl, or wherever your header information is located, find the
    Code: Select all
    <body>
    tag.
    After it on most websites there is a table, probably similar to (the code from subSilver)
    Code: Select all
    <table width="100%" cellspacing="0" cellpadding="2" border="0">

    You need to change the width="100%" to width="750" (or whatever width you want).
    You also need to add the attribute align="center" to center the whole page.

    The finished code should look similar to
    Code: Select all
    <table width="750" align="center" cellspacing="0" cellpadding="2" border="0">
  • Solution 2
    Personally I prefer this solution. It uses a div, and CSS to keep your forum centered.

    In your templates/*templatename*/overall_header.tpl, or wherever your header information is located, look for your
    Code: Select all
    <body>
    After it add
    Code: Select all
    <div id="wrap">
    Then, in your overall_footer.tpl, or wherever your footer information is stored, find
    Code: Select all
    </body>
    Before it add
    Code: Select all
    </div>

    Now go into your css file (or wherever your CSS data is stored), and add the following code:
    Code: Select all
    #wrap {
       position: relative;
       margin: 0 auto;
       padding: 0;
       text-align: left;
       width: 750px;
    }

    While still in your CSS file find your body tag (similar to the following code)
    Code: Select all
    body {
       css code;
    }

    In that tag add
    Code: Select all
    text-align: center;

    If you do not have the body tag, then add it.

Finished
I hope this was a useful tutorial.
Your pages should now look similar to the following:
  • Solution 1
    [code filename="index.html"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>

    <body>

    <table width="750" align="center" cellspacing="0" cellpadding="2" border="0">
    <tr>
    <td>... content here</td>
    </tr>
    </table>

    </body>
    </html>[/code]
  • Solution 2
    [code filename="index.html"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>

    <body>

    <div id="wrap">
    ... content here
    </div>

    </body>
    </html>[/code]
    [code filename="style.css"]body {
    text-align: center;
    }
    #wrap {
    position: relative;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 750px;
    }[/code]
High Velocity Media - Accelerated Internet Solutions
http://hvmdesign.com | contact[at]hvmdesign[dot]com
User avatar
Disturbed One
Moderator
Moderator
 
Posts: 2106
Joined: Sat Oct 09, 2004 8:12 pm
Location: Right behind you...

Return to Styles FAQ

Who is online

Users browsing this forum: No registered users and 1 guest

cron