The 'three column centered with left and top navigation' template.
Highlight the code and copy to place onto your clipboard or:
Download zip file of template, style sheet and images.
Go to XHTML: Templates selection page.
The code for the template:
Place in your template .htm file.
<!-- Template threeColumnLeftTopNaviCentered.htm -->
<!-- Use with style sheet threeColumnLeftTopNaviCentered.css -->
<!-- Source: http://www.justfigures.co.uk/ -->
<!-- Refer to source for XHTML tutorials -->
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<meta name="description" content="Write your phrase here." />
<meta name="keywords" content="key, words, here" />
<link rel="stylesheet" href="threeColumnLeftTopNaviCentered.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="siteName">Site Name</h1>
<img id="siteLogo" src="logoTemplate.jpg"
alt="Placeholder for site logo (500 X 50)" width="500" height="50" />
</div><!-- end header -->
<div id="navBarTop">
<div id="mainLinks">
<a href="#">Main Link</a>|<a href="#">Main Link</a>|
<a href="#">Main Link</a>|<a href="#">Main Link</a>|
<a href="#">Main Link</a>|<a href="#">Main Link</a>|
<a href="#">Main Link</a>
</div><!-- end mainLinks -->
</div><!-- end navBarTop -->
<div id="innerWrapper">
<div id="navBarSide">
<div id="siteLinks">
<h3>Site Links</h3>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
<a href="#">Site Link</a>
</div>
<div class="associatedLinks">
<h3>Associated Links</h3>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
</div>
<div class="associatedLinks">
<h3>Associated Links</h3>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
<a href="#">Associated Link</a>
</div>
</div><!--end navBarSide -->
<div id="content">
<h2 id="pageName">Page Name</h2>
<div class="subject">
<img src="spiderWeb.jpg" alt="image (200 X 200)" width="200" height="200" />
<h3>Subject Title </h3>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div><!--end content -->
<div id="rightDivision">
<div id="search">
<form name="frmSearch" id="frmSearch" method="get" action="#">
<input name="search" type="text" size="15" />
<input name="go" type="submit" value="Search" />
</form>
</div><!-- end search -->
<p>Right Division</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<div class="advert">
<img src="adImage.jpg" alt="ad image (180 X 200)" width="180" height="200" />
<br />
<h3>Advertising text.</h3>
<br />
</div><!-- end advert -->
</div><!-- end rightDivision -->
<div id="footer">
<a href="#">About Us</a> | <a href="#">Contact Us </a> |
<a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions
</a> | Copyright ©2007 Company Name
</div><!-- end footer -->
</div><!-- end innerWrapper -->
</div><!-- end wrapper -->
</body>
</html>
The code for the style sheet:
Place in a .css file called 'threeColumnLeftTopNaviCentered.css' in the same directory (folder) as your template file.
/***********************************************/
/* threeColumnLeftTopNaviCentered.css */
/* Use with template threeColumnLeftTopNaviCentered.htm */
/* Source: http://www.justfigures.co.uk/ */
/* Refer to source for CSS tutorials */
/***********************************************/
/* body, block-level and list styles */
body{
/* a fix will require us to center the body element, see wrapper division below */
text-align: center;
background: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 18px;
margin: 0px;
padding: 0px;
}
h1{
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
}
h2{
font-size: 20px;
font-style: italic;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
}
h3{
font-size: 18px;
font-style: normal;
color: #000000;
}
h4,h5,h6{
font-size: 18px;
font-style: normal;
color: #000000;
}
p,ul {
font-size: 18px;
font-weight: normal;
color: #000000;
}
/* list bullet style */
ul{
list-style-type: square;
}
/* link styles */
a:link{
color: #000099;
text-decoration: none;
}
a:visited{
color: #6666CC;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:active{
color: #FF0000;
text-decoration: none;
}
/* main layout divisions */
#wrapper {
/* and then setting back to left-align for the wrapper */
text-align: left;
margin-left: auto;
margin-right: auto;
background: #FFFFFF;
border: 2px solid #000000;
top:0px;
width:955px;
}
#header{
margin-bottom: 5px;
padding: 5px 0px 5px 0px;
border-bottom: 1px solid #000000;
width: 100%;
height: 60px;
background-color: #FF3366;
}
#navBarTop{
text-align: center;
margin-bottom: 5px;
padding: 5px 0px 5px 0px;
border: 0px solid #000000;
width: 100%;
height: 25px;
background-color: #CCCCCC;
}
/* add innerWrapper as a reference for aligning the top
of the 3 columns of the template */
#innerWrapper {
/* the use here of relative positioning does not take the division out
of the document flow but allows us to shift the division from its natural
position on the page if required */
/* in fact if we do not provide co-ordinates then the division will occupy its
natural position on the page */
/* however we will of created a position reference for the nested
divisions */
position: relative;
margin-top: 20px;
width: 100%;
}
#navBarSide{
float: left;
width: 200px;
background-color: #CC33FF;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#content{
width:500px;
/* add a margin to allow space for navBarSide */
margin-left: 215px;
background-color: #6699CC;
border: 2px solid #000000;
padding: 0px 10px 0px 10px;
}
#rightDivision {
position:absolute;
/* here we can position rightDivision to the top of the innerWrapper */
top: 0px;
/* use absolute positioning of 0px so that the rightDivision lines up
with the header and footer on the right-hand side */
right: 0px;
width: 200px;
background-color: #9999FF;
}
#footer{
text-align:center;
/* use clear to be sure that the footer appears below the 3 divisions */
clear: both;
border: 1px solid #CCCCCC;
font-size: 14px;
color: #CCCCCC;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}
/* site name and site logo styles */
#siteName{
float: left;
display: inline;
margin: 0px;
padding: 0px 10px 10px 10px;
}
#siteLogo{
float: right;
}
/* search form styles */
#search{
padding: 5px 1px 5px 1px;
border-bottom: 1px solid #CCCCCC;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
/* navigation bar link styles */
/* top navigation bar */
#mainLinks{
margin: 0px;
padding: 3px;
font-size: 18px;
}
#mainLinks a:link,#mainLinks a:visited {
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background-color: #CCCCCC;
font-weight: bold;
margin: 2px;
padding: 1px 3px 2px 3px;
color: #9900CC;
}
#mainLinks a:hover{
border-top: 1px solid #CCCCCC;
border-right: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
background-color: #6699CC;
font-weight: bold;
text-decoration: none;
}
/* navigation bar link styles */
/* side navigation bar */
#siteLinks{
margin: 0px;
padding: 3px;
border-bottom: 1px solid #CCCCCC;
font-size: 18px;
}
#siteLinks h3{
padding: 5px 0px 0px 5px;
}
#siteLinks a:link,#siteLinks a:visited {
display: block;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #CC99FF;
font-weight: bold;
margin: 2px;
padding: 1px 3px 2px 3px;
color: #9900CC;
}
#siteLinks a:hover{
border-top: 1px solid #CCCCCC;
border-right: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
background-color: #6699CC;
font-weight: bold;
text-decoration: none;
}
/* associated link styles */
.associatedLinks{
margin: 0px;
padding: 3px;
border-bottom: 1px solid #CCCCCC;
font-size: 18px;
}
.associatedLinks h3{
padding: 5px 0px 0px 5px;
}
.associatedLinks a:link,.associatedLinks a:visited{
display: block;
padding: 1px 3px 2px 3px;
}
/* advert styles */
.advert{
padding: 10px 0px 0px 10px;
font-size: 18px;
}
.advert img{
padding-top: 20px;
display: block;
}
/* page name styles */
#pageName{
padding: 5px 5px 5px 5px;
}
/* subject styles */
.subject{
padding: 10px 0px 0px 10px;
font-size: 18px;
}
.subject p{
padding: 0px 0px 10px 0px;
}
.subject img{
float: right;
padding: 0px 0px 0px 10px;
margin: 5px 5px 5px 5px;
}
/* story styles */
.story{
padding: 10px 0px 0px 10px;
font-size: 18px;
}
.story p{
padding: 0px 0px 10px 0px;
}
/* end of style sheet */
Back to top.
Copyright © 2006-2010 justfigures.co.uk