2
Notes:
- Valid XHTML 1.1 and CSS.
- The header is hidden to use a background image instead. To reveal the text, remove the line
text-indent: -9999px;
from the "#header h1" section of gottung.css.
- The obligatory link to the Etomite site is replicated in the footer section. In my site I removed it from the stock index.php for style reasons.
- Images go in assets/images/gottung and gottung.css goes in assets/site.
- Any suggestions for improvement would be welcome.
To see this template in action go to http://gottung.nlsmith.com. Feel free to copy any decoration graphics there. The page is not finished and undergoing development, but I think I've settled on the template. Enjoy.
The template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>[(site_name)] » [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
[[GetKeywords]]
<style type="text/css">
@import url('assets/site/gottung.css');
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="[~[(site_start)]~]">[(site_name)]</a></h1>
</div>
<div id="menu">
<p class="bgImage">
<img src="assets/images/gottung/menuborder-top.gif" alt="---" /></p>
[[ListMenu?LM_node=0]]
<p class="bgImage">
<img src="assets/images/gottung/menuborder-bottom.gif" alt="---" /></p>
</div>
<div id="content">
<h1>[*longtitle*]</h1>
[*content*]
</div>
<div id="footer">
<p>© 2005
<a href="http://www.nlsmith.com" onclick="window.open(this.href,'_blank');return false;">NL Smith</a><br />
Content managed by the <a href="http://etomite.com" onclick="window.open(this.href,'_blank');return false;">Etomite Content
Management System</a></p>
</div>
</div>
</body>
</html>
gottung.css:
body {
background-color: #CCCC99;
}
a, a:visited {
color: #333300;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#container {
color: #666633;
font: 14px serif;
text-transform: none;
margin: 10px auto;
padding: 5px;
margin-bottom: 50px;
}
#header {
margin-left: auto;
margin-right: auto;
width: 50em;
}
#header h1 {
text-align: center;
text-indent: -9999px;
width: 700px;
height: 150px;
background: url(../images/gottung/header.gif);
background-position: center;
margin: 0;
padding: 0;
}
#content {
width: 78%;
float: right;
margin-top: 10px;
margin-bottom: 10px;
}
#content h1, h2 {
text-decoration: none;
letter-spacing: 2px;
border-bottom: solid 1px #666633;
font-variant: small-caps;
}
#menu {
float: left;
text-align: left;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
border-right: 1px solid #666633;
width: 18%;
color: #666633;
}
#menu .bgImage {
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align: center;
}
#menu ul {
list-style-type: none;
}
#footer {
position: relative;
padding: 5px 0;
clear: both;
text-align: center;
color: #666633;
font: 10px serif;
text-transform: uppercase;
line-height: 10px;
border-top: solid 1px #666633;
}
fieldset {
border: solid 1px #666633;
padding: 5px;
}
/* image stuff */
.caption {
text-align: left;
text-transform: uppercase;
font: 10px serif;
}
#gavel {
float: right;
padding: 10px;
}
#grp-farm {
padding-top: 20px;
}
