The 'two column with left 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 twoColumnLeftNavi.htm -->
<!-- Use with style sheet twoColumnLeftNavi.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="twoColumnLeftNavi.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="siteName">Site Name</h1>
<img id="siteLogo" src="" alt="Site logo" width="500" height="50" />
</div><!-- end masthead -->
<div id="navBar">
<div id="search">
<form name="frmSearch" id="frmSearch" method="get" action="#">
<input name="search" type="text" size="20" />
<input name="go" type="submit" value="Search" />
</form>
</div>
<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 class="advert">
<img src="" alt="Ad image" width="200" height="200" />
<br />
<h3>Advertising text.</h3>
<br />
</div>
</div><!--end navbar -->
<div id="content">
<h2 id="pageName">Page Name</h2>
<div class="subject">
<img src="" alt="Image" width="280" height="280" />
<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>
<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>
<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>
<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="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>
<br />
</div>
</body>
</html>
The code for the style sheet:
Place in a .css file called 'twoColumnLeftNavi.css' in the same directory (folder) as your template file.
/***********************************************/
/* twoColumnLeftNavi.css */
/* Use with template twoColumnLeftNavi.htm */
/* Source: http://www.justfigures.co.uk/ */
/* Refer to source for CSS tutorials */
/***********************************************/
/* body, block-level and list styles */
body{
background: #FFFFFF;
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 {
position: absolute;
top: 0px;
left: 2px;
width: 955px;
}
#header{
margin-bottom: 5px;
padding: 5px 0px 5px 0px;
border-bottom: 1px solid #000000;
width: 100%;
height: 60px;
background-color: #FF3366;
}
#navBar{
float: left;
width: 220px;
background-color: #CC33FF;
border: 1px solid #000000;
}
#content{
/* use float so that the content lines up with
the header and footer on the right-hand side */
float: right;
width: 700px;
background-color: #6699CC;
border: 2px solid #000000;
padding: 0px 10px 0px 10px;
}
#footer{
/* use clear so that the footer appears below the content */
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 0px 5px 10px;
border-bottom: 1px solid #CCCCCC;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
/* navigation bar link styles */
#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{
/* use clear so that the story does not wrap to subject image */
clear: both;
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