Nautica02Liquid
<!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>Nautica2.2 Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Studio7designs - Professional Photography and Graphic Designs, Victoria BC Canada" />
<meta name="keywords" content="Studio7designs" />
<meta name="author" content="Aran / Original design: Aran Down - http://www.studio7designs.com" />
<style type='text/css'>
/* Css originally by mejobloggs Design by Aran @ stuio7designs.com Please email me if you use this, as I would love to see how it is being used, also you can join my linkshare to help you with your google ranking */
body {
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 90%;
color: #888;
background-color: white;
line-height: 180%;
margin: 0;
padding: 0;
text-align: center;
}
/* Set the page width */
#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {
width: 85%;
margin: 0 auto;
text-align: left;
}
#wrapper-menu-top {
background: white url('Nautica02Liquid-images/bg02-white-left.png') no-repeat left top;
}
#menu-top {
background: transparent url('Nautica02Liquid-images/bg02-white-right.png') no-repeat right top;
overflow: hidden; /* no idea why this works, but it fixes a FF problem */
}
#menu-top ul {
margin: 0 20px;
padding: 1em 0 0 0;
list-style: none;
font-size: 85%;
float: left;
}
#menu-top li {
display: inline;
float: left;
}
#menu-top a {
float: left;
background:url(Nautica02Liquid-images/menuleft.png) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
line-height: 1.5em;
}
#menu-top a span {
background: transparent url(Nautica02Liquid-images/menuright.png) no-repeat right top;
padding:5px 15px 4px 6px;
color:#5b8fbe;
display: block;
float: left;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}
#menu-top a:hover { background-position:0% -42px; }
#menu-top a:hover span { background-position:100% -42px; }
#wrapper-header {
background: transparent url('Nautica02Liquid-images/bg.png') top center repeat-x;
}
#header {
background: #eee url('Nautica02Liquid-images/banner_mountains.jpg') no-repeat center top;
}
#wrapper-header2 {
background: transparent url('Nautica02Liquid-images/bg02-blue-left.png') top left no-repeat;
}
#wrapper-header3 {
background: transparent url('Nautica02Liquid-images/bg02-blue-right.png') top right no-repeat;
}
#header h1 {
margin: 0 20px;
padding: 0;
height: 192px;
line-height: 3em;
color: #ccc;
font-size: 130%;
}
#wrapper-content {
background: white url('Nautica02Liquid-images/bg02-white-left.png') no-repeat left top;
}
* html #wrapper-content { height: 1%; }
#content {
background: transparent url('Nautica02Liquid-images/bg02-white-right.png') no-repeat right top;
padding: 5px 245px 5px 40px;
}
#wrapper-menu-page {
float: right;
width:180px;
margin: 20px 30px 3em 2em;
background: transparent url('Nautica02Liquid-images/menu.png') no-repeat;
text-align: center;
line-height: 140%;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
}
* html #wrapper-menu-page { margin-right: 15px; }
#menu-page { padding-top: 5px; }
#menu-page ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 90%;
}
#menu-page h3 {
font-size: 75%;
text-transform: uppercase;
margin: 1em 0 0.3em 0;
color: #5b8fbe;
font-weight: normal;
letter-spacing: 0.15em;
}
#menu-page a:link, #menu-page a:visited { color: #888; }
#menu-page a:hover { color: #5b8fbe; }
#wrapper-footer {
margin-top: 1em;
text-align: center;
}
#footer {
margin: 0 20px;
background-color: #e5f0fc;
border: 1px solid #ccc;
border-bottom: 0;
clear: both;
}
h2 { font-size: 110%; }
h3 { font-size: 100%; }
a:link, a:visited { color: #5b8fbe; text-decoration: none; }
a:hover{ color: #666; text-decoration: none; }
</style>
</head>
<body>
<div id="wrapper-menu-top">
<div id="menu-top">
<ul>
<li><a href="#" title="Downloads"><span>Downloads</span></a></li>
<li><a href="#" title="Gallery"><span>Gallery</span></a></li>
<li><a href="#" title="Links"><span>Links</span></a></li>
<li><a href="#" title="Links"><span>Links</span></a></li>
<li><a href="#" title="Links"><span>Links</span></a></li>
<li><a href="#" title="Links"><span>Links</span></a></li>
</ul>
</div><!--menu-top-->
</div><!--wrapper-menu-top-->
<div id="wrapper-header">
<div id="header">
<div id="wrapper-header2">
<div id="wrapper-header3">
<h1>Nautica 2.2 Liquid</h1>
</div>
</div>
</div>
</div>
<div id="wrapper-content">
<div id="wrapper-menu-page">
<div id="menu-page">
<h3>Page navigation</h3>
<ul>
<li><a href="#">Example Link 1</a></li>
<li><a href="#">Example Link 2</a></li>
<li><a href="#">Example Link 3</a></li>
<li><a href="#">Example Link 4</a></li>
</ul>
<h3>sub page menu</h3>
<ul>
<li><a href="#">Example Link 1</a></li>
<li><a href="#">Example Link 2</a></li>
<li><a href="#">Example Link 3</a></li>
<li><a href="#">Example Link 4</a></li>
</ul>
<p><img src="Nautica02Liquid-images/logo.png" width="165" height="80" alt="" /></p>
</div><!--menu-page-->
</div>
<div id="content">
<h2>Nautica2.2 Liquid</h2>
<p>Design by: <a href="http://www.studio7designs.com">Nautica</a><br />
Coding by: <a href="http://www.openwebdesign.org/userinfo.phtml?user=mejobloggs" title="Go to mejobloggs' OWD user page">mejobloggs</a></p>
<p><a href="http://www.openwebdesign.org/userinfo.phtml?user=mejobloggs">mejobloggs </a>- " This is where I describe all the good things, such as the liquid
layout,
font
resize
friendly
(try
it),
slightly
darker
font
for increased readability, slightly larger font too. Want it wider/narrower?
Check out line 14 in the css. At 80% width, this design can manage a modest
1920px wide. Tested and great in 800x600+, IE5.5, IE6, FF 1.51, Opera 8.53...What?
You are still here? Go download it already! <br />
Oh, and bugs... We definitely want to know if you find any.</p>
<p>Over to you Nautica..."</p>
<p><a href="http://www.studio7designs.com">Nautica </a>- " First off this design was a great collaboration, I worked with the layout and colors etc and mejobloggs did an amazing job of totally rewriting the original Nautica02.2 into a liquid design that is about as standard compliant as you can get! <br />
We are both super busy right now, but we will be working on this design more, and also a few other designs so keep your eyes out for some fun designs in the next while. You can see the ' latest and greatest ' updates to this template at <a href="http://www.studio7designs.com/">www.studio7designs.com</a> " </p>
</div>
</div>
<div id="wrapper-footer">
<div id="footer">
Design by <a href="http://www.studio7designs.com">studio7designs</a> | copyright 2006 your name
</div>
</div>
</body>
</html>
Related examples in the same category