You can check a simple site I did here - www.leacys.com - here's the page.ss markup:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<% base_tag %>
$MetaTags
<title>$Title</title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body class="index_body">
<div id="container">
<div id="header">
<p> </p>
<div id="menu_container">
<% include Navigation %>
<!-- end #menu_container --></div>
<!-- end #header --></div>
<div id="mainContent">
$Layout
<!-- end #mainContent--></div>
<div id="footer"><div id="footertext">
<p>© 2008 Leacy's Clothes Shop | 75 Main Street Gorey, Co. Wexford | Website by <a href="http://www.divinemonkey.co.uk">Divine Monkey</a></p>
<!-- end #footertext --></div><!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Here's the
includes/Navigation.ss:
<ul id="tabs1">
<% control Menu(1) %>
<li><a class="$LinkingMode" href="$Link" title="Go to the $Title.XML page"><span>$MenuTitle</span></a></li>
<% end_control %>
</ul>
And then the
Layout.css:
@charset "utf-8";
/* -------------------- Web design by www.divinemonkey.co.uk ---------------------------------*/
/* This first part is to reset all margins etc so all browsers start from same blank page */
/* ------------------------------------ START undo_html.css ----------------------------------*/
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
/* ------------------------------------ END undo_html.css ----------------------------------*/
/* ----------------------------------- Start Standard CSS ---------------------------------- */
html {
overflow: auto;
}
body {
font: 80% Arial, Verdana, sans-serif;
background:#282828 url(../images/bg.jpg) left top repeat-x;
margin-top: 0;
padding: 0;
text-align: center;
color: #ffffff;
}
/* ----- Text Stylings ----- */
h1{
font-size:150%;
font-weight:bold;
color: #ffffff;
}
h2{
background: url(../images/h2bg.jpg) left top repeat-x;
font-size:11px;
color: #666666;
letter-spacing: 1px;
text-transform:uppercase;
margin-bottom: 15px;
padding: 9px 0px 10px 12px;
}
h3{
font-size:120%;
font-weight:bold;
color: #0885AE;
}
.style1 {
font-weight: bold;
}
.style2 {
font-style: italic;
}
.style3 {
color: #0F5166;
}
a:link, a:visited {
color: #0885AE;
text-decoration: none;
}
a:hover {
color: #0885AE;
text-decoration: underline;
}
#footer a:link, a:visited {
color: #999999;
text-decoration: underline;
}
#footer a:hover {
color: #666666;
text-decoration: underline;
}
ul li a:link, a:visited, a:hover {
text-decoration: none;
}
/* ------------------------------------- Start Divs ---------------------------------------- */
#container {
width: 780px;
margin: 0 auto;
margin-top: 0px;
border: 0px solid #000000;
text-align: left;
}
#header {
background: url(../images/logo.jpg) center top no-repeat;
height: 175px;
color: #666666;
padding: 0px 0px 0px 0px; /* top right bottom left */
}
#menu_container {
margin-top: 105px;
margin-bottom: -10px;
height: 40px;
padding: 0px 0px 0px 35px;
bottom: 0px;
}
#mainContent {
padding: 0px 45px 20px 45px;
height: 100%;
}
#footer {
width: 780px;
height: 100px;
margin: 10px 0px 0px 0px;
background:url(../images/footer.jpg) no-repeat center bottom;
}
#footertext {
text-align: center;
padding: 43px 20px 0px 20px;
font-size: 85%;
color: #999999;
}
.leftAlone {
padding: 0px 0px 15px 0px;
}
.left {
padding: 0px 0px 15px 0px;
}
/* ------------------------------------- Menu Style ---------------------------------------- */
#tabs1 {
width: 770px;
text-align: right;
font-size: small; /* could be specified at a higher level */
margin: 0;
border-bottom: 0px solid #696;
position:relative;
z-index:2;
}
#tabs1 li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style: none;
position:relative;
}
#tabs1 a {
float: left;
font-size: 11px;
font-family: Arial;
line-height: 20px;
padding: 6px 15px 6px 15px;
letter-spacing: 2px;
text-transform:uppercase;
text-decoration: none;
color: #cccccc;
}
#tabs1 a.current, #tabs1 a.current:hover {
background: url(../images/menuselected.jpg) left top repeat-x;
float: left;
font-size: 11px;
font-family: Arial;
line-height: 20px;
letter-spacing: 2px;
text-transform:uppercase;
text-decoration: none;
color: #ffffff;
cursor: default;
}
#tabs1 a:hover {
background: url(../images/menuhover.jpg) left top repeat-x;
float: left;
font-size: 11px;
font-family: Arial;
line-height: 20px;
letter-spacing: 2px;
text-transform:uppercase;
color: #cccccc;
}