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>
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>
- Code: Select all
<div id="wrap">
- Code: Select all
</body>
- 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]
