didactic
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Didatic | Intending to Instruct</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
* { margin: 0; padding: 0; }
html
{
color: #999999;
background-color: #2e333b;
font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Sans-Serif;
}
/* Links */
a { text-decoration: none; font-weight: bold; border-bottom: 1px dotted #333333; }
a:link { color: #1f67b1; border-bottom-color: #1f67b1; }
a:visited { color: #333333; border-bottom-color: #333333; }
a:hover, a:active { color: #ad0004; border-bottom-color: #ad0004; border-bottom-style: solid; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.2em; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4, h5, h6 { font-size: 20px; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: normal; border-bottom-width: 0; }
/* Lists */
ul, ol
{
margin: 1em 0;
line-height: 1.8em;
}
ol li { margin-left: 2.5em; }
ul { padding-left: 2em; list-style-type: square; }
/* Images */
.drop-shadow
{
float: left;
position: relative;
margin: 10px 3px 0 10px !important;
margin: 10px 3px 0 5px;
background: transparent url(didactic-images/drop_shadow.png) bottom right no-repeat !important;
background: transparent url(didactic-images/drop_shadow_ie.gif) bottom right no-repeat;
}
.drop-shadow img
{
padding: 4px;
display: block;
position: relative;
margin: -6px 6px 6px -6px;
background-color: #ffffff;
border: 1px solid #a9a9a9;
}
.drop-shadow p
{
right: 11px;
bottom: 0px;
color: #eeeeee;
padding: 5px 10px;
position: absolute;
background-color: #2e333b;
border-top: 1px solid #111111;
}
/* Other Html Elements */
blockquote
{
clear: both;
padding: 1em;
margin: 2em 3em;
font-size: 0.9em;
line-height: 1.7em;
background-color: #eeeeee;
border: 1px solid #a9a9a9;
background: #eeeeee url(didactic-images/right_quotes.png) 95% 85% no-repeat;
}
code { font-family: Consolas, Monaco, Verdana, "Courier New"; font-size: .93em; }
abbr, acronym, cite { border-bottom: 1px dotted #333333; cursor: help; }
ins, del
{
padding-left: 18px;
background-repeat: no-repeat;
background-position: left center;
}
ins { font-weight: bold; text-decoration: none; background-image: url(didactic-images/add.gif); }
del { background-image: url(didactic-images/delete.gif); }
/* Structure */
body
{
width: 850px;
color: #333333;
margin: 0 auto;
background-color: #c6c6c6;
}
#header
{
float: left;
clear: both;
width: 100%;
background-color: #4f555d;
}
#wrapper
{
float: left;
width: 100%;
clear: both;
line-height: 1.6em;
background: #c5c5c5 url(didactic-images/wrapper_bg.png) top left repeat-y;
}
#content
{
float: left;
width: 450px;
overflow: hidden;
}
#sidebar
{
float: left;
width: 150px;
padding: 10px 0;
overflow: hidden;
background-color: #dddddd;
}
#sidenotes
{
float: left;
width: 250px;
overflow: hidden;
padding: 10px 0 0;
background-color: #eeeeee;
}
#footer
{
clear: both;
float: left;
width: 100%;
color: #999999;
background-color: #4f555d;
}
/* Header */
#header h1
{
width: 30%;
float: left;
color: #ffffff;
margin: 0 15px;
padding: 15px 0;
font-size: 1.1em;
text-indent: -9999px;
text-transform: lowercase;
background: transparent url(didactic-images/logo.gif) left center no-repeat;
}
/* Navigation */
#header ul { list-style-type: none; margin: 0 10px; padding: 0; float: right; }
#header li { float: left; }
#header a
{
float: left;
color: #dddddd;
display: block;
padding: 10px 8px 0;
border-bottom-width: 0;
}
#header a:hover { color: #ffffff; }
#header li.active a
{
color: #ffffff;
text-decoration: underline;
}
/* Content */
.post { padding: 10px 20px; }
h2.post-title { margin-bottom: 15px; }
.post-content p { margin-top: 10px; margin-bottom: 10px; }
p.post-footer
{
background-color: #dadada;
margin-bottom: 10px;
margin-top: 25px;
padding: 5px 10px;
color: #dadada;
}
p.post-footer strong { color: #333333; padding-right: 10px; border-right: 1px solid #a9a9a9; }
p.post-footer em { font-style: normal; padding-right: 10px; border-right: 1px solid #a9a9a9; }
p.post-footer a { border-bottom-width: 0; }
a.more { border-bottom-width: 0; }
/* Sidebar */
#sidebar h3 { padding: 0 10px; }
#sidebar ul { padding-left: 35px; line-height: 2.0em; }
#sidebar li { list-style-image: url(didactic-images/pushpin.gif); }
/* Sidenotes */
#sidenotes h3 { padding: 0 10px; }
#sidenotes ul { margin: 10px 0 0; padding: 0; list-style-type: none; }
#sidenotes a
{
display: block;
color: #333333;
margin-top: -1px;
padding: 5px 10px;
font-weight: normal;
border-top: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
}
#sidenotes a:hover { background-color: #f9f9f9; }
#sidenotes a strong
{
display: block;
}
#sidenotes a em
{
display: block;
}
/* Footer */
#footer .block { float: left; width: 210px; padding: 10px 0; }
#footer .block h3 { padding: 0 10px 5px 13px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
#footer .block ul { padding: 0 10px 20px; list-style-type: none; }
#footer .block ul a
{
display: block;
margin-top: -1px;
padding: 5px 10px;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
}
#footer .block ul a:hover, #footer .block ul a:active
{
background-color: #2e333b;
}
#footer p { padding: 0 15px; }
#footer .block p { margin: 15px 0; }
#footer a { color: #999999; border-bottom-color: #666666; }
#footer a:hover, #footer a:active { color: #c5c5c5; border-bottom-color: #999999; }
#footer p.copyright { clear: both; background-color: #3f444c; padding: 10px 15px; }
</style>
</head>
<body>
<div id="header">
<h1>Didatic</h1>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Commercial Templates</a></li>
<li class="active"><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div class="post">
<h2 class="post-title"><a href="#41" rel="bookmark" title="Read the rest of the entry">Images and Captions with Javascript</a></h2>
<div class="post-content">
<div class="drop-shadow"><img src="didactic-images/pic.jpg" width="330" height="221" alt="A Picture With Caption [Credit: ]" class="captionated" /></div>
<p>Most awesome stuff has been happening recently in the world. For example, Pluto got demoted to the status of a dwarf planet.</p>
<p>Then there's the unearthing of the 3.5 million-year-old skeleton of Lucy's sister Salem in Ethiopia.</p>
<ul>
<li>Dukedom</li>
<li>Earldom</li>
<li>Monte Cresto</li>
</ul>
<ol>
<li>Excellent</li>
<li>Ecletic</li>
<li>Grandiloquent</li>
<li>Bombast</li>
</ol>
<p>I'm another paragraph. I don't really need this but I just wanted to show it. I need to write more before the blockquote
goes down far enough to give me a clear understanding of how much space it leaves between itself and whatever comes before it.</p>
<blockquote>
<p>Say, I'm a blockquote. </p>
<p>And there's no reason we can't have two paragraphs in a blockquote.</p>
</blockquote>
<p>You want to show a caption for your image? Me too. It's a pity that we can't use
the <code><caption></code> element with an image. I thought about using a def.
list to associate the image with its caption, but I really didn't want to go to the
extra trouble every single time. So: I decided to go the javascript way. An <acronym
title="Acronym">acronym</acronym>, an <abbr title="Abbreviation">abbreviation</abbr>,
a <cite title="Citation">citation</cite> or two, some <ins>inserted text</ins>, some <code>code that doesn't look like code</code>, and some <del>deleted text</del> go to
a bar <a href="#35" class="more" title="Read the rest of the article →">[...]</a> </p>
</div>
<p class="post-footer"> <strong>03 Oct 2006</strong>, <em><a href="#36">Javascript</a></em>, <a href="#37" class="comments-link">48 comments</a> </p>
</div>
</div>
<div id="sidebar">
<h3>By Category</h3>
<ul>
<li><a href="#01">ASP .NET</a></li>
<li><a href="#02">C#</a></li>
<li><a href="#04">CSS</a></li>
<li><a href="#10">Doodling</a></li>
<li><a href="#05">Icons</a></li>
<li><a href="#07">Life</a></li>
<li><a href="#06">Microsoft</a></li>
<li><a href="#03">PHP</a></li>
<li><a href="#09">Procrastination</a></li>
<li><a href="#08">Writing</a></li>
</ul>
<h3>By Date</h3>
<ul>
<li><a href="#11">October 2006</a></li>
<li><a href="#12">September 2006</a></li>
<li><a href="#13">August 2006</a></li>
<li><a href="#14">July 2006</a></li>
<li><a href="#15">June 2006</a></li>
<li><a href="#16">May 2006</a></li>
<li><a href="#17">April 2006</a></li>
<li><a href="#18">March 2006</a></li>
<li><a href="#19">February 2006</a></li>
<li><a href="#20">January 2006</a></li>
</ul>
</div>
<div id="sidenotes">
<h3>Sidenotes</h3>
<ul>
<li> <a href="http://en.wikipedia.org/wiki/Alexander_of_Macedon"> <strong>Alexander the Great</strong> <em>10.03.2006</em> Alexander the Great, aka, Megas Alexandros, aka Alexander III. A brilliant
military strategist. </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Philip_III_of_Macedon"> <strong>Philip III Arrhidaeus</strong> <em>10.01.2006</em> Illegitimate son of Philip II, making him the half-brother of Alexander the
Great. </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Arsaces_II_of_Parthia"> <strong>Arsaces II of Parthia</strong> <em>09.30.2006</em> Known as "Artabanus" by early scholars but currently goes by the name "Arsaces." </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Balash_of_Persia"> <strong>Balash</strong> <em>09.30.2006</em> "Balash [...] was the brother and successor of Peroz I of Persia (457 – 484),
who had died in a battle against the Hephthalites (White Huns) who invalided Persia
from the east." Supposed to be new — that's new. ;-) </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Yazdegerd_II_of_Persia"> <strong>Yazdegerd II</strong> <em>09.28.2006</em> His name means "made by God," which unfortuantely didn't stop him from dying. He's
just except for his "strict religious policies..." So you mean he wasn't just? :p </a> </li>
</ul>
</div>
</div>
<div id="footer">
<div class="block">
<h3>Popular Posts</h3>
<ul>
<li><a href="#26">Duke and Duchess</a></li>
<li><a href="#27">Viscount and Viscountess</a></li>
<li><a href="#28">Earl and Countess</a></li>
<li><a href="#29">Baron and Baroness</a></li>
<li><a href="#30">Human and Chimpanzee</a></li>
<li><a href="#31">Boy and Girl</a></li>
</ul>
</div>
<div class="block">
<h3>Recent Posts</h3>
<ul>
<li><a href="#26">Empires That Rise</a></li>
<li><a href="#27">Kleenex is Great</a></li>
<li><a href="#28">One Word After Another</a></li>
<li><a href="#29">Step Right, Then Left</a></li>
<li><a href="#30">Dasani: Purified Water</a></li>
<li><a href="#31">Drawing Unleashed</a></li>
</ul>
</div>
<div class="block">
<h3>Info</h3>
<ul>
<li><a href="#21">Journal</a></li>
<li><a href="#22">Sidenotes</a></li>
</ul>
<ul>
<li><a href="#23">Digg It!</a></li>
<li><a href="#25">Make a comment</a></li>
<li><a href="#24">Bookmark it at del.icio.us</a></li>
<li><a href="#00" title="Trackback">Write a post about it</a></li>
</ul>
</div>
<div class="block">
<h3>About</h3>
<p>Didatic is a beautiful free template that adheres to web standards released under the <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons License</a>.
credit and link to me on each page. Also, don't use the templates on any site that's of
illegal or otherwise nasty nature.</p>
<p>If y(u want a personalied web site, don't hesitate to <a href="#contact/"> contact me</a>.</p>
<p>Enjoy!</p>
</div>
<p class="copyright">Design copyright © 2006 <a href="http://www.free-css.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | All Rights Reserved | <a href="http://validator.w3.org/check/referer" title="Xhtml 1.1 Strict">Xhtml Happy</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title=
"Css 2.0 Strict">CSS Happy</a></p>
</div>
</body>
</html>
Related examples in the same category