invision
<!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">
<head>
<title>Invision</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* = general = */
body {
background-image: url(tile.gif);
background-position: top;
background-repeat: repeat-x;
background-color: #f4f0e5;
font-size: 100.01%;
}
div#container {
width: 760px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "trebuchet ms", arial, sans-serif;
color: #008000;
font-weight: bold;
}
h2, h3, h4, h5, h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
}
h1 {
font-size: 2em;
line-height: 100px;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
strong, em em, b {
font-weight: bold;
}
em, i {
font-style: italic;
background: #ffc;
}
code {
color: #800;
}
/* 2 class for image floating */
img.imgright {
float: right;
margin-left: 1em;
}
img.imgleft {
float: left;
margin-right: 1em;
}
a:link { color: #24468c }
a:visited { color: #24468c }
a:active { color: #f00 }
a:hover { color: #ff8200 }
div#page ol, div#page ul {
margin-left: 3em;
margin-bottom: 1em;
}
div#page ul {
list-style: disc;
}
div#page ol {
list-style: decimal;
}
dl {
margin-bottom: 1em;
}
dt {
font-weight: bold;
}
dd {
margin-left: 2em;
}
/* = header = */
div#header {
height: 100px;
}
div#header h1 {
padding-left: 1em;
color: #fff;
}
div#header h1 a {
color: #fff;
text-decoration: none;
}
/* = main navigation = */
#navmain {
float: left;
width: 100%;
height: 39px;
font-size: 0.8em;
}
#navmain ul {
margin: 0;
padding: 0 0 0 20px;
list-style: none;
}
#navmain li {
display: inline;
margin: 0;
line-height: 30px;
}
#navmain a {
float: left;
background: url("tab_right_both.gif") no-repeat 100% 0;
margin: 0;
padding: 0;
text-decoration: none;
}
#navmain a span {
float: left;
display: block;
background: url("tab_left_both.gif") no-repeat 0 0;
padding: 0px 20px 9px 20px;
font-weight: bold;
color: #ddd;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navmain a span { float: none; }
/* End IE5-Mac hack */
#navmain a:hover span {
color: #333;
}
#navmain a:hover {
background: url("tab_right_both.gif") no-repeat 100% -39px;
}
#navmain a:hover span {
background: url("tab_left_both.gif") no-repeat 0 -39px;
}
/* = main page = */
div#page div.inner {
padding: 2em 3em 1em 3em;
background-image: url(page_top.gif);
background-position: top left;
background-repeat: no-repeat;
font-size: 0.8em;
}
div#page div.inner p {
margin-bottom: 1em;
}
div#page {
line-height: 1.2em;
background-color: #fff;
background-image: url(page_back.gif);
background-repeat: repeat-y;
margin-top: 10px;
}
/* = footer = */
div#footer {
text-align: center;
font-style: italic;
background-image: url(page_bottom.gif);
background-position: bottom;
background-repeat: no-repeat;
padding-top: 1em;
padding-bottom: 2em;
font-size: smaller;
color: #555;
}
/* = right navigation = */
div#nav {
font-size: 0.8em;
margin-top: 10px;
}
div#nav div.inner {
padding: 1em;
}
div#nav ul {
margin-left: 0.5em;
}
div#nav p {
margin-bottom: 0.2em;
margin-top: 0.6em;
}
div#nav div.inner ul.menu li {
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
margin-bottom: 0;
margin-top: 0;
}
div#nav div.inner ul.menu a {
display: block;
width: 95%;
padding-left: 5px;
/*background-color: #fff;*/
/*color: #000;*/
border-bottom: 1px solid #ddd;
margin: 0;
text-decoration: none;
}
div#nav div.inner ul.menu a:link,
div#nav div.inner ul.menu a:visited,
div#nav div.inner ul.menu a:hover {
text-decoration: none;
}
div#nav div.inner ul.menu a:hover {
background-color: #24468c;
color: #fff;
}
/* = tables = */
table {
margin-bottom: 2em;
}
table caption{
background: #F6F4F1;
color: #110;
border: 1px solid #F2EDDA;
font-size: 110%;
letter-spacing: .1em;
padding: .5em;
}
td, th {
text-align: center;
}
th{
background: #A58F6C;
border: 1px solid #F2EDDA;
color: #F5F4F0;
font-weight: bold;
padding: .4em;
text-transform: capitalize;
}
th a:link, th a:visited {
color: #fffe80;
}
th a:hover {
color: #ff8200
}
tr.head th {
background: #110;
}
tr.head th a:link,
tfoot td a:link,
tfoot td a:visited,
tr.head th a:visited {
color: #A0C1F8;
}
tr.head th a:hover,
tfoot td a:hover {
color: #ff8200
}
td{
/* background: #fff; */
color: #110;
border: 1px solid #F2EDDA;
padding: .4em;
}
tr.odd td, td.odd, .odd {
background: #F6F4F1;
}
tfoot th, tfoot td{
background: #666 !important;
color: #F5F4F1;
}
</style>
<link rel="stylesheet" type="text/css" href="template/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="template/print.css" media="print" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="template/micro-ie.css" media="screen" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.free-css.com/">Invision Template</a></h1>
</div>
<div id="navmain">
<ul>
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/"><span>Contacts</span></a></li>
<li><a href="http://www.free-css.com/"><span>Terms of Service</span></a></li>
<li><a href="http://www.free-css.com/"><span>Acceptable Use Policy</span></a></li>
<li><a href="http://www.free-css.com/"><span>Service Level Agreement</span></a></li>
</ul>
</div>
<div class="wrap" id="main">
<div class="left75" id="page">
<div class="inner">
<h2>A template with some µ</h2>
<p><img class="imgright" src="invision-images/world.png" width="128" height="128" alt="" /> This template was designed for a hosting service provider, but it never goes live (<strong>hi Chris!</strong>). So I have this layout landing around, orphan, and I decide to release it to the community. The source is valid <strong>XHTML 1.0 Strict</strong> tested with Internet Explorer 6, Opera 9.23 and Firefox 2.</p>
<p>The template is the first <em>public</em> implementation of a very simple and flexible CSS framework I relized for my works named <strong>microCSS</strong>.</p>
<h3>A note on microCSS</h3>
<p>The only purpose of microCSS is to permit a rapid development of a layout, that issplit the space in a ipothetical <em>grid</em>. If you are interested, I wrote an article, MicroCSS, a minimalist framework, explaining the basics behind it.</p>
<h3>Print with style</h3>
<p>It's included a stylesheet for printing. You can see the result making a <em>print preview</em> of this page. I'm a bit in doubt to use a sans-serif
font for the print style, but it's easily cusomizable in <code>print.css</code></p>
<h3>Tables for all</h3>
<p>Due to the original scope of this template, in the CSS there are some rules for
render good looking tables. Below there is an example. </p>
<table>
<caption>
Caption of table
</caption>
<colgroup>
<col />
<col />
<col class="odd" />
<col />
<col class="odd" />
</colgroup>
<thead>
<tr class="head">
<th> </th>
<th><a href="http://www.free-css.com/">Lorem ipsum</a></th>
<th>Dolor sit amet</th>
<th>Consectetuer</th>
<th>Adipiscing elit</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<td>This row is</td>
<td><a href="http://www.free-css.com/">the footer</a></td>
<td>Use it with</td>
<td>the tfoot tag</td>
</tr>
</tfoot>
<tbody>
<tr>
<th><a href="http://www.free-css.com/"><b>A link</b></a></th>
<td>Lorem</td>
<td>ipsum</td>
<td><img src="invision-images/yes.gif" width="20" height="20" alt="" /></td>
<td>dolor</td>
</tr>
<tr>
<th>Head row</th>
<td><a href="http://www.free-css.com/">sit amet</a></td>
<td>consectetuer</td>
<td>adipiscing</td>
<td><img src="invision-images/yes.gif" width="20" height="20" alt="" /></td>
</tr>
<tr>
<th>Like label</th>
<td>elit</td>
<td><a href="http://www.free-css.com/">adipiscing</a></td>
<td>Lorem ipsum</td>
<td><img src="invision-images/yes.gif" width="20" height="20" alt="" /></td>
</tr>
</tbody>
</table>
</div>
<div id="footer">
<p>web template by <a href="http://www.scaracco.net">Scaracco</a></p>
</div>
</div>
<div class="right25" id="nav">
<div class="inner">
<p><strong>Hosting</strong></p>
<ul class="menu">
<li><a href="http://www.free-css.com/">Shared Hosting</a></li>
<li><a href="http://www.free-css.com/">Reseller Hosting</a></li>
<li><a href="http://www.free-css.com/">Virtual Private Servers</a></li>
<li><a href="http://www.free-css.com/">Dedicated Servers</a></li>
</ul>
<p><strong>Services</strong></p>
<ul class="menu">
<li><a href="http://www.free-css.com/">Server Management</a></li>
<li><a href="http://www.free-css.com/">Remote Backup</a></li>
<li><a href="http://www.free-css.com/">Turnkey eCommerce</a></li>
<li><a href="http://www.free-css.com/">Secure</a></li>
<li><a href="http://www.free-css.com/">Website Mirror</a></li>
<li><a href="http://www.free-css.com/">Monitor</a></li>
<li><a href="http://www.free-css.com/">Outsource Services</a></li>
</ul>
<p><strong>Central</strong></p>
<ul class="menu">
<li><a href="http://www.free-css.com/">Service Policies</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
<li><a href="http://www.free-css.com/">The Difference</a></li>
<li><a href="http://www.free-css.com/">Referral Program</a></li>
<li><a href="http://www.free-css.com/">Projects</a></li>
</ul>
<p><strong>Support Center</strong></p>
<ul class="menu">
<li><a href="http://www.free-css.com/">Support Tickets</a></li>
<li><a href="http://www.free-css.com/">Support Forums</a></li>
<li><a href="http://www.free-css.com/">Knowledgebase</a></li>
<li><a href="http://www.free-css.com/">QuickFAQ</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category