Medieval
<!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>
<title>Medieval</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if IE]>
<style type="text/css">
body { width expression(document.body.clientWidth > 1003 ? "1003px" : "779px"); }
</style>
<![endif]-->
<style type='text/css'>
* {margin: 0; padding: 0;}
body { min-width:779px; max-width: 1003px; margin: 40px 0; padding: 0; font-family: "Book Antiqua", Georgia, Serif; font-size: 90%; background-color: #041940; color: #E6CDA5 }
#page { width: 90%; margin-left: auto; margin-right: auto; padding: 10px; background:#041940 url(Medieval-images/93.jpg) repeat center center; color:#E6CDA5 }
#wrap { width: 90%; margin: 40px auto; padding: 0; background:#E6CDA5 url(Medieval-images/bg18.jpg) repeat; color: #000; }
#head { position: relative; height: 160px; margin: 0; padding: 0; background: transparent url(Medieval-images/sword.gif) no-repeat 70% top; color: #041940 }
#title { padding: 25px 0 0 0; font-family: "Book Antiqua", Georgia, Serif; font-size: 1.9em; text-align: center; color: #020201; background-color: transparent }
#title a:link, #title a:visited { color: #020201; text-decoration: none; background-color: transparent }
#title a:hover { color: #796307; background-color: transparent }
#desc { padding: 15px 20px 0px 20px; text-align: center; font-style: italic; }
#left { float: left; width: 30%; margin: 0px; padding: 0 0 0 10px; background: transparent; color: #000; }
#left h2 { margin: 0px; padding: 0px 5px 5px 5px; font-size: 1.2em; background-color: transparent; color: #000 }
#left a:link, #left a:visited { color: #041940; background-color: transparent; }
#left a:hover { color: #796307; background-color: transparent; }
#left .menu { width: 30%; margin: 0px; padding: 10px 5px 30px 10px; }
#left ul { margin: 0px; padding: 0 5px 0 0; }
#left ul li { list-style-type: none; margin: 0px; padding: 0px 5px 30px 0px; }
#left ul ul li { list-style-type: none; background: transparent; color: #020201; margin: 0px 15px 0px 5px; padding: 0px 5px 5px 5px; }
#left ul.children { margin: 0px; padding: 5px 5px 0px 0px; }
#left ul.children li { margin: 0px; padding: 0px 5px 5px 12px; }
#content { float: right; width: 65%; margin: 0; padding: 0px 10px 0px 10px; }
#content .post { margin: 0px; padding: 10px 0px 10px 0px; line-height: 20px; background: transparent; }
#content p {margin-bottom: 10px;}
#content .post blockquote { padding-top: 0px; padding-bottom: 0px; }
#content .post blockquote p { text-indent: 0; margin: 5px 0 0 0; padding: 10px 0px 20px 5px; }
#content ul { margin: 0px; padding: 0 5px 0 20px; }
#content li { list-style-type: circle; color: #020201; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }
#content ol { margin: 0px; padding: 0 5px 0 20px; }
#content ol li { list-style-type: decimal; color: #020201; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }
#foot { clear: both; height: 30px; text-align: center; padding: 20px 0 0 0 }
#commentlist { margin: 0px; padding: 0px; }
#commentlist ol { padding: 0!important; }
#commentlist li { list-style-type: none!important; margin: 10px 0px 10px 0px; padding: 5px 15px 0px 15px; border: 1px solid #83745D; background-color: #E9D3AF; color: #041940; }
#commentlist p { margin: 0px; padding: 10px 5px; }
#commentlist .commentmeta { font-weight: bold; margin-bottom: 10px; }
#commentlist .alt { background-color: #E7CBA2; border-color: #020201; color: #000; }
#commentlist blockquote { background-color: #E9D3AF; border: 1px solid #83745D; color: #000; }
#commentlist .alt blockquote { border-color: #020201; }
#commentform p { margin: 10px 0px 0px 0px; padding: 0px; }
#commentform textarea { width: 350px; }
.meta { margin: 2px 0px 0px 0px; padding: 0px 20px 5px 0; font-size: 0.75em; font-weight: bold; }
.postmetadata { font-size: 0.75em; font-weight: bold; }
a:link, a:visited { color: #041940; background-color: transparent }
a:hover { color: #796307; }
blockquote { background-color: transparent; color: #000; margin-left: 10px; margin-right: 15px; padding: 10px 20px 10px 30px; font-style: italic; }
h1 { margin: 0px; padding: 2px 0 2px 0; background: transparent; color:#020201; font-size: 1.5em; }
h1 a { text-decoration: none; }
h1 a:link, h1 a:visited { color: #041940; background-color: transparent;}
h1 a:hover { color: #796307; background-color: transparent; }
h2 { background-color: transparent; color:#020201; font-size: 1.3em; }
h3 { background-color: transparent; color:#020201; font-size: 1.2em; }
h4 { background-color: transparent; color:#020201; font-size: 1.0em; }
form { margin: 0px; padding: 0px; }
form input, form textarea, form submit { border: 1px solid #020201; background-color:#E9D3AF; }
img.centered {display:block; margin: 0 auto 5px auto; border:1px solid #83745D; padding:2px; }
img.alignright { display: inline; border:1px solid #83745D; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }
img.alignleft { display: inline; border:1px solid #83745D; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }
img.border { border:1px solid #83745D; padding:2px; }
.alignleft { float:left; text-align:left; }
.alignright { float:right; text-align:right; }
acronym { cursor: help; border-bottom: 1px dotted #796307 }
.clearleft { clear: left; }
</style>
</head>
<body>
<div id="page">
<div id="wrap">
<!-- header -->
<div id="head">
<div id="title"><a href="index.html">Medieval</a></div>
<div id="desc">A sub-title</div>
</div>
<!-- end header -->
<!-- begin content -->
<div id="content">
<!-- post 1 -->
<div class="post" id="post-1">
<h1><a href="index.html">About This Template</a></h1>
<p class="meta">Posted by Karen on January 11, 2008</p>
<p>This template is a fluid 2 column style which will stretch to a maximum of 1003 pixels. It has been tested in the latest version of Firefox, IE7, and Opera.</p>
<p>In addition, I've designed a <strong>WordPress theme</strong> from this template which can be downloaded <a href="http://karenblundell.com/download/themes/Medieval.zip">here</a>.</p>
<p>I'm releasing this under the Public Domain so do with it what you please and enjoy! I would, however, love to <a href="http://karenblundell.com/contact-karen/">hear from you</a> if you do decide to use it.</p>
<p class="postmetadata">Posted in <a href="index.html" title="#" rel="category tag">General</a>- <a href="index.html" title="#">2 Comments</a></p>
</div>
<!-- end post 1 -->
<!-- post 2 -->
<div class="post" id="post-2">
<h1><a href="index.html">A Blockquote</a></h1>
<p class="meta">Posted by Karen on January 11, 2008</p>
<blockquote><p>The only medieval music which can be studied is that which was written down, and survived. Since creating musical manuscripts was very expensive, due to the expense of parchment, and the huge amount of time necessary for a scribe to copy it all down, only wealthy institutions were able to create manuscripts which have survived to the present time.</p></blockquote><p class="postmetadata">Posted in <a href="index.html" title="#" rel="category tag">General</a>- <a href="index.html" title="#">0 Comments</a></p>
</div>
<!-- end post 2 -->
<!-- post 3 -->
<div class="post" id="post-3">
<h1><a href="index.html">Heading Styles</a></h1>
<p class="meta">Posted by Karen on January 11, 2008</p>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<p class="postmetadata">Posted in <a href="index.html" title="#" rel="category tag">General</a>- <a href="index.html" title="#">0 Comments</a></p>
</div>
<!-- end post 3 -->
<!-- post 4 -->
<div class="post" id="post-4">
<h1><a href="index.html">List Styles</a></h1>
<p class="meta">Posted by Karen on January 11, 2008</p>
<p>An unordered list:</p>
<ul><li>Item One</li>
<li>Item Two</li>
<li>Item Three</li></ul>
<p>An ordered list:</p>
<ol><li>Item One</li>
<li>Item Two</li>
<li>Item Three</li></ol>
<p class="postmetadata">Posted in <a href="index.html" title="#" rel="category tag">General</a>- <a href="index.html" title="#">0 Comments</a></p>
</div>
<!-- end post 4 -->
<!-- post 5 -->
<div class="post" id="post-5">
<h1><a href="index.html">Image Styles</a></h1>
<p class="meta">Posted by Karen on September 25, 2006</p>
<p><img class="alignleft" src="Medieval-images/93.jpg" alt="93" />An example of a left-aligned image. Image classes are "alignleft", "alignright", and "centered" and can be changed according to your needs. </p>
<div class="clearleft">
<p class="postmetadata">Posted in <a href="index.html" title="#" rel="category tag">General</a>- <a href="index.html" title="#">0 Comments</a></p></div>
</div>
<!-- end post 5 -->
</div>
<!-- end content -->
<!-- sidebar -->
<div id="left">
<ul>
<li><h2>Search:</h2>
<ul>
<li>
<form id="searchform" method="get" action="index.html">
<div>
<input type="text" name="s" id="s" size="15" alt="enter search text" />
<input type="submit" value="Go" />
</div>
</form>
</li></ul>
</li>
<li><h2>Medieval Music</h2>
<ul>
<li><a href="index.html">Styles and Trends</a></li>
<li><a href="index.html">Instruments</a></li>
<li><a href="index.html">Genres</a></li>
</ul>
</li>
<li><h2>Medieval History</h2>
<ul>
<li><a href="index.html">The Dark Ages</a></li>
<li><a href="index.html">The Crusades</a></li>
<li><a href="index.html">The Hundred Years War</a></li>
</ul>
</li>
<li><h2>Medieval Literature</h2>
<ul>
<li><a href="index.html">Monks</a></li>
<li><a href="index.html">Troubadours</a></li>
<li><a href="index.html">Early Work</a></li>
<li><a href="index.html">Masterpieces</a></li>
<li><a href="index.html">Printing</a></li>
</ul></li>
<li><h2>Medieval Tidbits</h2>
<ul><li><a href="index.html">Food</a></li>
<li><a href="index.html">Romance</a></li>
<li><a href="index.html">Chivalry</a></li>
<li><a href="index.html">Clothing</a></li>
<li><a href="index.html">Names</a></li>
<li><a href="index.html">Art</a></li>
<li><a href="index.html">Weapons</a></li>
</ul></li>
</ul>
</div>
<!-- end sidebar -->
<!-- footer -->
<div id="foot">XHTML Template created by <a href="http://karenblundell.com">Karen Blundell (aka arwen54)</a></div>
</div>
</div>
</body>
</html>
<!-- end footer -->
Related examples in the same category