optimistic : Effect 2 « Templates « HTML / CSS

HTML / CSS » Templates » Effect 2 
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.jpgcenter 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: auto;
  text-align: left;
  background: url(optimistic-images/header.jpgleft 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.gifleft bottom no-repeat;
  padding: 20px;
  position: relative;
}
#content div div {background: none; padding: 0;}
#column {
  width: 230px;
  background: url(optimistic-images/bg3.gifleft top repeat-y;
  float: right;
  margin: 384px 52px 0 0;
}
#column div {
  margin-top: -220px;
  background: url(optimistic-images/credit.gifleft 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.gifright top no-repeat;
  color: #f4d547;
  margin: -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.giftop left no-repeat;
}
#container #mainmenu li:hover a, #container #mainmenu li.over a, #mainmenu .active a {
  background: url(optimistic-images/menu_hover-right.giftop 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 (and lowerusers
        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>&lt;!-- TOP MENU --&gt;</code> and <code>&lt;!-- TOP MENU END --&gt;</code> &#8212;
        To make a link appear highlighted (like <i>&quot;Home&quot;</i> shown hereadd a class <code>&quot;active&quot;</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>&quot;box&quot;</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 (Notepadand 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 &copy; 2006 <a href="http://www.free-css.com/">Your Name</a>.
      <!-- COPYRIGHT INOFRMATION END -->
      Design &copy; <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
1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
6.plain2
7.plastic-surgery
8.plastics
9.overdose
10.outlined
11.optimism
12.Modern_Theme
13.MultiStrangeColor
14.modern
15.minimalistic
16.primitive
17.sparkle
18.sparkling
19.spotlight
20.simplyfluid
21.slider
22.pragmatic
23.popular
24.primitif
25.pure-web-2.0
26.pure
27.reflection
28.reflections
29.royal-cyan
30.royal_policy
31.smalltown
32.smallwindow
33.smartdesign
34.smarttouch
35.splendid
36.workfire
37.webtile
38.Wide_Side
39.zionnarrow
40.zionnarrows
41.xtreme
42.ZEN
43.zenlike
44.wondrous
45.stonewalled
46.tattoopatt
47.tattoopattern
48.tastelessly
49.tasty
50.thebarn
51.tinfoil_helmet
52.tomato
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.