Nautica02Liquid : Design « Templates « HTML / CSS

HTML / CSS » Templates » Design 
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: 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.pngno-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.pngno-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:hovercolor: #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>- &quot; 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...&quot;</p>
<p><a href="http://www.studio7designs.com">Nautica </a>- &quot; 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> &quot; </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
1.wcsst-10
2.wcsst-11
3.wcsst-12
4.wcsst-15
5.wcsst-16
6.wcsst-17
7.wcsst-18
8.wcsst-19
9.wcsst-2
10.wcsst-20
11.wcsst-21
12.wcsst-22
13.wcsst-23
14.wcsst-24
15.wcsst-25
16.wcsst-26
17.wcsst-3
18.wcsst-4
19.wcsst-5
20.wcsst-6
21.beez-design
22.metamorph_camomile
23.metamorph_champagne
24.metamorph_clover
25.metamorph_dao
26.metamorph_dna
27.metamorph_lilac
28.metamorph_lilium
29.metamorph_lime
30.metamorph_limemint_lt
31.metamorph_lionpride
32.metamorph_swallowtail-indexl
33.metamorph_synchronized_lt
34.metamorph_temple
35.metamorph_vectorart
36.metamorph_wow
37.wcsst-7
38.wcsst-9
39.bouquet
40.baseline
41.beautifulday
42.bedazzled
43.Beehives
44.beez
45.begeodan
46.cleo-studio
47.cloverleaf
48.CMS Style
49.dragonfly
50.nautica
51.Nautica022
52.Nautica03
53.Nautica04
54.nautica05
55.nautica05dark
56.nautica08
57.nauticax
58.soothing
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.