optimistic
<!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>
<title>Optimistic</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {margin: 0; padding: 0; border: none; text-decoration: none;}
html {
background: url(optimistic-images/bg1.gif) #ddddae center;
text-align: center;
font: small "Georgia", "Palatino Linotype", "Times New Roman", serif;
color: #444;
}
body {
background: url(optimistic-images/bg2.jpg) center top repeat-x;
}
p, ul, ol {
padding: 5px 0;
line-height: 150%;
}
ol {list-style-type: upper-roman;}
ul {list-style-type: circle;}
li {margin-left: 1.5em;}
a:link {border-bottom: 1px dashed; font-weight: bold;}
a:visited {border: none; font-weight: normal;}
code {color: #f5f5f5; font-size: 100%;}
blockquote, .box {
border-left: 5px solid #0b1207;
background: url(optimistic-images/quote.gif) #2a451a top left no-repeat !important;
background-position: .1cm 0;
margin: 10px 0;
padding: 0 10px 0 20px;
font-style: italic;
color: #b6cf9b;
}
#container {
width: 757px;
margin: 0 auto;
text-align: left;
background: url(optimistic-images/header.jpg) left top no-repeat;
padding-right: 13px !important;
padding-right: 12px;
}
#header {
height: 123px;
position: relative;
}
#content {
width: 445px;
float: right;
background: url(optimistic-images/bg_content-top.jpg) #365921 left top no-repeat;
color: #ffedaf;
position: relative;
}
#content div {
background: url(optimistic-images/bg_content-bottom.gif) left bottom no-repeat;
padding: 20px;
position: relative;
}
#content div div {background: none; padding: 0;}
#column {
width: 230px;
background: url(optimistic-images/bg3.gif) left top repeat-y;
float: right;
margin: 384px 52px 0 0;
}
#column div {
margin-top: -220px;
background: url(optimistic-images/credit.gif) left bottom no-repeat;
padding: 0 20px;
position: relative;
}
#column div div {
margin: 0;
padding: 0;
background: none;
}
#footer {
clear: both;
text-align: center;
font-size: 85%;
color: #7ca758;
}
#footer a:link, #footer a:visited {
color: #7ca758;
border: none;
font-weight: bold;
}
#footer a:hover {color: #345620;}
#column h2, #column h3 {color: #1b300f;}
#column ul.menu {padding-bottom: 10px;}
#column ul.menu li {
display: inline;
margin:0;
list-style: none;
}
#container #column ul.menu li a {
display: block;
margin: 3px 0;
background: #b3c46c;
border-bottom: 1px solid #99ab3c;
padding: .2em .3em;
color: #365921;
position: relative;
font-weight: normal;
}
#container #column ul.menu li a:hover {
color: #000;
background: url(optimistic-images/sidemenu_hover.gif) #b3c46c right center no-repeat;
}
h1 {
color: #a9c57f;
font: italic normal 3em "Times New Roman", "Georgia", sans-serif;
padding: 10px 0 0 270px;
}
#content h2 {
background: url(optimistic-images/bg_title.gif) right top no-repeat;
color: #f4d547;
margin: 0 -20px;
font: italic normal 1.6em "Times New Roman", "Georgia", sans-serif;
padding: 22px 10px 20px 90px;
}
h3 {
padding-top: .3em;
font: italic bold 1.6em "Times New Roman", "Georgia", sans-serif;
}
#content h3 {
font-size: 1.3em;
color: #e5cb5d;
border-bottom: 3px solid #2d4f18;
}
#content p, #content li {text-align: justify;}
#column a:link, #column a:visited {
color: #697f0f;
border-color: #99ab3c;
}
#content a:link, #content a:visited {
color: #b3c46c;
border-color: #58803a;
}
#column a:hover {color: #ffedaf;}
#content a:hover {color: #fadb7e;}
#container #column a.credit {
display: block;
height: 30px;
text-indent: -9999px;
border: none;
}
#mainmenu {
position: absolute;
left: 295px;
bottom: 1px !important;
bottom: 0;
list-style: none;
}
#mainmenu li {
width: auto;
float: left;
margin-left: 5px;
}
#container #mainmenu li a {
display: block;
border: none;
color: #a9c57f;
padding: 0 9px;
font: italic bold 1.5em "Times New Roman", "Georgia", sans-serif;
}
#container #mainmenu li a span {
display: block;
padding: 5px 0;
}
#mainmenu li:hover, #mainmenu li.over, #mainmenu .active {
background: url(optimistic-images/menu_hover-left.gif) top left no-repeat;
}
#container #mainmenu li:hover a, #container #mainmenu li.over a, #mainmenu .active a {
background: url(optimistic-images/menu_hover-right.gif) top right no-repeat;
}
#container #mainmenu li:hover a span, #container #mainmenu li.over a span {
background: #000;
}
#container #mainmenu li a:hover {
color: #f2ff7f;
}
#container #mainmenu .active a span {
background: #000;
color: #a9c57f;
}
#content, #column div {
overflow: visible !important;
overflow: hidden;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript" src="iehover.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>
<!-- YOUR WEBSITE NAME -->
Your website name
<!-- YOUR WEBSITE NAME END -->
</h1>
<!-- TOP MENU -->
<ul id="mainmenu">
<li class="active"><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/"><span>About</span></a></li>
<li><a href="http://www.free-css.com/"><span>Contact</span></a></li>
<li><a href="http://www.free-css.com/"><span>Guestbook</span></a></li>
<li><a href="http://www.free-css.com/"><span>Links</span></a></li>
</ul>
<!-- TOP MENU END -->
</div>
<div id="content">
<div>
<!-- CONTENT START -->
<h2>About the Template</h2>
<p>This design is featuring my drawing. Some of my brushes were used as well.</p>
<h3>Technical information</h3>
<p>The layout is entirely formatted using <acronym title="Cascading Style Sheets">CSS</acronym>,
so I strongly advise you not to change it, otherwise the layout might break.
Editing the content should be easy, just don't delete anything outside areas marked with comments.</p>
<p>Since the <acronym>OSWD</acronym> rules forbid the use of JavaScript, Internet Explorer 6 (and lower) users
won't see the rounded edges hover effect on the main menu because of poor CSS support of the said browser.
You can get the working version at my website. If you don't need the top menu, just delete everything between <code><!-- TOP MENU --></code> and <code><!-- TOP MENU END --></code> —
To make a link appear highlighted (like <i>"Home"</i> shown here) add a class <code>"active"</code> to the list item (<code>li</code> tag).</p>
<blockquote>
<p>To make text appear in this box, use the <code>blockquote</code> tag, or add a class <code>"box"</code> to any element.</p>
<p>To keep the template looking exactly as you see it, use tags and classes provided in this example.</p>
</blockquote>
<p>It's tested in <a href="http://www.free-css.com/">Mozilla Firefox 1.5</a>, <a href="http://www.free-css.com/">Internet Explorer 6</a>, <a href="http://www.free-css.com/">Opera 8</a>, and <a href="http://www.free-css.com/">Netscape 7.2</a>,
on resolution 800x600 and
1024x768, and works good in each of the mentioned. It is also validated <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </p>
<h2>Terms of Service</h2>
<ol>
<li>Leave the credit and link back to http://inobscuro.com/ visible.</li>
<li>Do not redistribute.</li>
<li>Personal, non-profit use only.</li>
<li>Derivative work prohibited.</li>
</ol>
<h2>Instructions for Installation</h2>
<ul>
<li>Download the .ZIP file containing the entire template;</li>
<li>Unzip the file. Use software like <a href="http://www.free-css.com/">WinRAR</a>, <a href="http://www.free-css.com/">WinZIP</a>, <a href="http://www.free-css.com/">StuffIt</a> etc.
(If you have Windows XP then you don't need to download any additional software);</li>
<li>Open the file <strong>index.html</strong> in your text editor (Notepad) and edit the website title, content
and links in the navigation area. (Those areas are marked with comments.)
Save edited files under corresponding names (for example <i>about.html</i>, <i>links.html</i>...);</li>
<li>Upload all the files and folders to your server.</li>
</ul>
<p> For detailed information on istalling this layout, please refer to my tutorial <a href="http://www.free-css.com/">Installing premade templates</a>. </p>
<p>Have fun and enjoy :)</p>
<!-- CONTENT END -->
</div>
</div>
<div id="column">
<div>
<!-- NAVIGATION START -->
<h3>About...</h3>
<p>You can write something here if you like. Or put a cam, or shoutbox. <a href="http://www.free-css.com/">A link</a>.</p>
<h3>Network</h3>
<ul class="menu">
<li><a href="http://www.free-css.com/">Website Link Here</a></li>
<li><a href="http://www.free-css.com/">Website Link Here</a></li>
<li><a href="http://www.free-css.com/">Website Link Here</a></li>
</ul>
<h3>Affiliates</h3>
<ul class="menu">
<li><a href="http://www.free-css.com/">Affiliate Link Here</a></li>
<li><a href="http://www.free-css.com/">Affiliate Link Here</a></li>
<li><a href="http://www.free-css.com/">Affiliate Link Here</a></li>
<li><a href="http://www.free-css.com/">Affiliate Link Here</a></li>
<li><a href="http://www.free-css.com/">Affiliate Link Here</a></li>
</ul>
<!-- NAVIGATION END -->
</div>
</div>
<div id="footer">
<p>
<!-- COPYRIGHT INOFRMATION -->
Content © 2006 <a href="http://www.free-css.com/">Your Name</a>.
<!-- COPYRIGHT INOFRMATION END -->
Design © <a href="http://inobscuro.com/">nel`chee</a>. <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/">Creative Commons Licence</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category