Topic: Site integration problem
I was wondering if someone can take a look at my layout and help me out a bit. I posted this over at PunRes but have been getting no responses there so I thought I would try here...
I have a base CSS layout for my site I am creating and I am trying to incorporate PunBB into it by editting the main.tpl file and using the Oxygen stylesheet as forum stylesheet and importing the main site stylesheet as well. The main site looks fine, passes validation but when I attempt to view the forums it is out of alignment. The header and main body fit fine, but the footer area doesn't appear correctly.
This is the main.tpl file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<link rel="stylesheet" type="text/css" href="http://www.uscivilwaronline.com/forums/style/Custom.css" />
<pun_head>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="http://www.uscivilwaronline.com/images/logo.gif" alt="logo" width="460" height="80" /></div>
<div id="menu" align="right"><a href="http://www.uscivilwaronline.com/index.php">home</a> <a href="http://www.uscivilwaronline.com/forums/">forums</a> <a href="http://www.uscivilwaronline.com/resources.php">resources</a> <a href="http://www.uscivilwaronline.com/timeline.php">timeline</a> <a href="http://www.uscivilwaronline.com/reenacting.php">reenacting </a></div>
<div id="body"></div>
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
<div id="brdheader" class="block">
<div class="box">
<div id="brdtitle" class="inbox">
</div>
<pun_navlinks>
<pun_status>
</div>
</div>
<pun_announcement>
<pun_main>
<pun_footer>
<br />
</div>
</div>
</div>
<div id="footer"><p><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" align="middle" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.uscivilwaronline.com/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" align="middle" style="border:0;width:88px;height:31px" />
</a>
<br />
©2006 Inotch.com</p>
</div>
</body>
</html>and this is the default.css (my websites CSS layout) file:
html {
margin: 0px;
height:100%;
}
h1 {
color: #535769;
font: bold 1.6em Arial, Verdana, Helvetica, sans-serif;
}
h2 {
color: #535769;
font: bold 1.4em Arial, Verdana, Helvetica, sans-serif;
}
body {
background: #6A6D7C;
text-align: center;
font: .7em Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height:100%;
}
#wrapper, #wrapper3col {
margin: 0px auto; /* to fix centering in Mozilla */
background: url('http://www.uscivilwaronline.com/images/background.gif') repeat-y;
text-align: left;
width: 749px; /* width should be the same as the background image */
height: 100%;
padding: 0px 17px 0px 17px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 715px;
}
html>body #wrapper, html>body #wrapper3col { width: 715px; }
#footer {
margin: 0px auto; /* to fix centering in Mozilla */
background: url('http://www.uscivilwaronline.com/images/contentbottom.gif') no-repeat;
width: 749px; /* width should be the same as the background image */
color: #B1B5C1;
padding: 10px 0px 10px 0px;
}
#header {
height: 82px;
background: #000000;
}
#menu {
background: url('http://www.uscivilwaronline.com/images/menubg.gif') #023A6A repeat-x;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
padding: 5px;
color: #fff;
font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
}
#menu ul {
list-style: none; /* removes list marker */
padding: 0px; /* removes left indent */
margin: 0px;
}
#menu ul li {
display: inline; /* sets list items to display in a row */
padding-left: 10px; /* puts space in between list items */
}
#menu a:link, #menu a:visited {
color: #fff;
text-decoration: none;
}
#menu a:active, #menu a:hover {
color: #EDDF7D;
text-decoration: none;
}
#leftcol {
width: 152px;
float: left;
padding: 10px 8px 8px 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 152px;
}
html>body #leftcol { width: 152px; }
#maincol {
width: 545px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 525px;
}
html>body #maincol { width: 525px; }
#centercol { /* basically a modification of "maincol" */
width: 395px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 375px;
}
html>body #centercol { width: 375px; }
#rightcol {
width: 150px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 130px;
}
html>body #rightcol { width: 130px; }
.clear { clear: both; }and finally here is the main website file:
<!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>US Civil War Online</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.gif" alt="logo" width="460" height="80" /></div>
<div id="menu" align="right"><a href="index.php">home</a> <a href="forums/">forums</a> <a href="resources.php">resources</a> <a href="timeline.php">timeline</a> <a href="reenacting.php">reenacting </a></div>
<div id="body">
<div id="leftcol">left</div>
<div id="maincol">
<p>Eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt quis nostrud exercitation qui officia deserunt.</p>
<p>Lorem ipsum dolor sit amet, duis aute irure dolor ut enim ad minim veniam. Ullamco laboris nisi ut labore et dolore magna aliqua. Sunt in culpa eu fugiat nulla pariatur. Qui officia deserunt excepteur sint occaecat sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi velit esse cillum dolore. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat lorem ipsum dolor sit amet, quis nostrud exercitation.</p>
<p>Consectetur adipisicing elit, ullamco laboris nisi sed do eiusmod tempor incididunt. Sunt in culpa ut labore et dolore magna aliqua. Cupidatat non proident, eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt velit esse cillum dolore.</p>
<p>Ut enim ad minim veniam, cupidatat non proident, quis nostrud exercitation. Lorem ipsum dolor sit amet, excepteur sint occaecat eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt sunt in culpa in reprehenderit in voluptate.</p>
</div>
<br class="clear" />
</div>
</div>
<div id="footer"><p><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" align="middle" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.uscivilwaronline.com/"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" align="middle" style="border:0;width:88px;height:31px" />
</a>
<br />
©2006 Inotch.com</p>
</div>
</body>
</html>Here is the link the site: http://www.uscivilwaronline.com
Any help with this is GREATLY appreciated.