mouse
<!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" lang="en" xml:lang="en">
<head>
<title>Mouse</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body
{ background: #eee url(mouse-images/bg.gif) top left no-repeat;
font-family: Arial,Verdana,Sans-serif;
color: #999;
font-size: 8pt;
text-align:center;}
h1
{ background-color: #FFF;
color:#FF9900;
font-size:12pt;
font-weight:bold;
margin-top:0;
margin-bottom:10px;}
h2
{ background-color: #fff;
color:#FF9900;
font-size:10pt;
font-weight:normal;
margin-top:0;
margin-bottom:0;}
ul
{ list-style:none;
margin:0 5px;
padding:0;}
li
{ padding:0 4px 8px 10px;
background: url(mouse-images/arw.gif) 0 3px no-repeat;}
a:link, a:visited, a:active
{ background-color: #fff; text-decoration: none; color:#FF9900;}
a:hover
{ background-color: #fff; text-decoration: underline; color:#FFCC99;}
#header
{ height:100px;
width:750px;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
background-color:#FFF;
color:#FF9900;}
#main
{ width: 750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
background-color: #FFF;
font-size:9pt;
color:#666;}
#content
{ width:510px;
float:left;
padding:20px;
text-align:justify;}
#nav
{ width:180px;
float:left;
margin-right:5px;
margin-top:20px;}
#footer
{ height:30px;
width:750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:10px 0;
border:#ccc 1px solid;
background-color: #fff;
font-size:8pt;
color:#999;
text-align:center;}
#footer a:link, #footer a:visited, #footer a:active
{ background-color: #fff; text-decoration: none; color:#999;}
#footer A:hover
{ background-color: #fff; text-decoration: none; color:#ff9900;}
.footer
{ clear: both;
background:#fff;
color:inherit;
height:1px;}
.logo
{ width:200px;
float:left;
text-align:left;
padding:15px 0 10px 15px;
overflow: hidden;}
.menu
{ width:auto;
text-align:right;
font-weight:bold;
font-size:12pt;
padding:35px 15px 0 0;
float: right;
overflow: hidden;}
.left
{ width:250px;
float:left;
margin:10px 15px 10px 0;
text-align:justify;
overflow: hidden;}
.mid
{ width:auto;
padding:10px 0 0 10px;
margin-left:auto;
margin-top:0;
overflow: hidden;}
.navhead
{ width:170px;
height:18px;
padding: 3px 3px 0 5px;
border:#ddd 1px solid;
text-align: left;
font-size:8pt;
background-color:#eee;
color:#666;}
.navitem
{ width:172px;
padding: 15px 3px 0 3px;
border-bottom:#ddd 1px solid;
border-right:#ddd 1px solid;
border-left:#ddd 1px solid;
font-size:8pt;
font-weight: normal;
text-align:justify;}
.img
{ border:0;}
</style>
</head>
<body>
<div id="header">
<div class="logo"> MLP Design Template Ver 2.0<br />
<img class="img" src="mouse-images/logo.gif" alt="Your Logo" /></div>
<div class="menu"><a href="http://www.free-css.com/">Home</a> |<a href="http://www.free-css.com/"> Services</a> | <a href="http://www.free-css.com/" title="Portfolio"> Portfolio</a> |<a href="http://www.free-css.com/"> Contact</a></div>
</div>
<div id="main">
<div id="content">
<h1>header-Using h1</h1>
<h2>Sub header-Using h2</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce at velit ac neque scelerisque blandit.
Aenean malesuada. Suspendisse vestibulum orci. Quisque posuere vehicula justo. Integer sollicitudin ligula vitae tellus.
Vestibulum a nibh vel quam molestie hendrerit. Proin posuere magna vitae neque. Maecenas id ante. Etiam nec ante. Morbi
ultrices magna et neque. In hac habitasse platea dictumst. Quisque vehicula ultricies neque. Aenean volutpat varius lectus.
Morbi tempor justo at ante. Ut ac pede. Donec metus libero, aliquet id, dictum at, pharetra vel, odio. Maecenas ut erat. Nullam
urna ante, laoreet at, ornare vel, pulvinar ut, velit.
<div class="left">
<h2>Sub Header</h2>
In ullamcorper blandit nisl. Integer tempus rutrum mi. Donec nec risus. Duis accumsan. Vivamus id risus ut
metus interdum tempus. Curabitur orci nulla, vulputate vitae, vestibulum at, aliquam id, risus. Sed placerat blandit sem. Cras
lacinia, magna non facilisis congue, turpis massa vestibulum nibh, at tempor elit leo quis arcu. Duis ligula nulla, hendrerit eget,
dapibus et, placerat vitae, urna. Maecenas interdum, augue ac pellentesque laoreet, lorem dui tempor ipsum, quis porta eros
enim et erat. Nam a arcu sit amet dui iaculis tincidunt. Pellentesque vulputate nisi. Sed ligula velit, eleifend non, dapibus vitae,
pretium eu, metus. </div>
<div class="mid">
<h2>Sub Header</h2>
Suspendisse posuere vulputate lacus. Sed congue, est quis malesuada condimentum, ante massa faucibus
erat, a imperdiet ipsum nibh sed augue. Fusce quis mi. Nam faucibus, lacus non posuere porttitor, enim quam rutrum dolor, vitae
convallis nulla velit ut enim. Aenean vitae nibh et felis aliquam adipiscing. Suspendisse eget est. Vestibulum feugiat. Pellentesque
feugiat malesuada turpis. Aliquam id lacus. Ut nonummy sapien. Maecenas pede risus, ultricies eget, congue sed, ullamcorper ac,
massa. Morbi venenatis. Proin sapien leo, iaculis a, hendrerit vitae, tempus eget, nisl. Vestibulum
condimentum. Proin leo mi, sodales ac, placerat porttitor, pharetra vitae, pede. </div>
<h1>Another Header</h1>
<p>Etiam dapibus, tortor vitae dapibus nonummy, ante elit mollis ligula, sit amet pretium tellus eros ac lacus. Praesent enim risus,
feugiat in, viverra non, egestas pharetra, quam. Cras dolor eros, congue non, aliquet et, aliquam et, metus. Donec eros augue, faucibus
hendrerit, pharetra sed, viverra a, tortor. Integer malesuada nisi.</p>
<p>Cras lobortis dolor ut purus. Phasellus nunc elit, laoreet vitae,
accumsan quis, lobortis venenatis, elit. Nam lobortis sapien. Vivamus hendrerit. Quisque non felis ultricies odio venenatis vestibulum.
Sed interdum ultricies purus. Quisque pharetra. Curabitur ut enim in purus mollis venenatis.</p>
</div>
<div id="nav">
<div class="navhead">NEWS & UPDATES</div>
<div class="navitem">
<ul>
<li>09.15.06 News item here. Curabitur ut erat nec augue suscipit placerat.</li>
<li>09.01.06 Etiam eu ipsum. Quisque commodo tempor nisi.</li>
<li>08.30.06 Cras lobortis dolor ut purus. Phasellus nunc elit, laoreet vitae, accumsan quis, lobortis venenatis, elit.
Nam lobortis sapien.</li>
<li>08.26.06 Fusce a purus id mi condimentum nonummy. Duis sed sem ac nulla tempor tincidunt.</li>
<li>08.25.06 Etiam tincidunt arcu non nunc. Donec elementum massa non purus. Duis ullamcorper lorem in mauris</li>
</ul>
</div>
<p></p>
<div class="navhead">SITE DETAILS</div>
<div class="navitem">
<ul>
<li>Please retain the "Template Design by MLP Design" tag and link when you use this template. Thank you.</li>
</ul>
</div>
</div>
<div class="footer"></div>
</div>
<div id="footer"> Copyright © 2006 Your Company Name. All Rights Reserved. <br />
Template Design by <a href="http://www.mlpDesign.net">MLP Design</a>. <a href="http://validator.w3.org/check?uri=referer" title="XHTML 1.0 Strict"> XHTML 1.0 Strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS!"> Valid CSS!</a> </div>
</body>
</html>
Related examples in the same category