nonzero
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>nonzero1.0</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
Nonzero1.0 by nodethirtythree design
http://www.nodethirtythree.com
missing in a maze
*/
/* This controls the width of the fluid width layouts */
div.fluid
{
width: 90% !important;
}
/* This controls the width of the fixed width layouts */
div.fixed
{
width: 950px !important;
}
/* Basic Stuff */
*
{
margin: 0em;
padding: 0em;
}
body
{
background-color: #fff;
color: #585858;
font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
letter-spacing: -1px;
text-transform: lowercase;
}
h3,h4,h5,h6
{
color: #66000F;
}
h1 span
{
font-weight: bold;
}
h3 span
{
font-weight: bold;
}
h4 span
{
font-weight: bold;
}
br.clear
{
clear: both;
}
img
{
padding: 3px;
border: solid 1px #e1e1e1;
}
img.floatTL
{
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
a
{
text-decoration: underline;
color: #D90000;
}
a:hover
{
text-decoration: none;
}
ul.links
{
list-style: none;
}
ul.links li
{
line-height: 2em;
}
ul.links li.first
{
}
p
{
line-height: 1.8em;
}
/* Header */
#header
{
width:100%;
height:122px;
background: #440000 url('images_red/n1.gif') repeat-x;
}
#header_inner
{
position: relative;
width: 950px;
height:122px;
margin: 0 auto;
}
/* Logo */
#logo
{
position: absolute;
bottom: 0.6em;
}
#logo h1
{
display: inline;
color: #fff;
font-size: 2.6em;
}
#logo h2
{
display: inline;
padding-left: 0.5em;
color: #E5CCD0;
font-size: 1.0em;
}
/* Menu */
#menu
{
position: absolute;
right: 0em;
bottom: 0em;
}
#menu ul
{
list-style: none;
}
#menu li
{
float: left;
}
#menu li a
{
margin-left: 0.5em;
display: block;
padding: 1.1em 1.4em 1.0em 1.4em;
background: #fff url('images_red/n4.gif') repeat-x;
border: solid 1px #fff;
color: #616161;
font-weight: bold;
font-size: 1.0em;
text-transform: lowercase;
text-decoration: none;
}
#menu li a.active
{
background: #CA2F2F url('images_red/n3.gif') repeat-x;
color: #fff;
border: solid 1px #A94B4B;
}
/* Main */
#main
{
background: #fff url('images_red/n2.gif') 0px 1px repeat-x;
}
#main_inner p
{
text-align: justify;
margin-bottom: 2.0em;
}
#main_inner ul
{
margin-bottom: 2.0em;
}
#main_inner
{
position: relative;
width: 950px;
margin: 0 auto;
padding-top: 3.5em;
}
#main_inner h3,h4
{
border-bottom: dotted 1px #E1E1E1;
position: relative;
}
#main_inner h3
{
font-size: 2.1em;
padding-bottom: 0.1em;
margin-bottom: 0.8em;
}
#main_inner h4
{
font-size: 1.2em;
padding-bottom: 0.175em;
margin-bottom: 1.4em;
margin-top: 0.95em;
}
#main_inner .post
{
position: relative;
}
#main_inner .post h3
{
position: relative;
font-size: 1.7em;
padding-bottom: 1.2em;
}
#main_inner .post ul.post_info
{
list-style: none;
position: absolute;
top: 3em;
font-size: 0.8em;
}
#main_inner .post ul.post_info li
{
background-position: 0em 0.2em;
background-repeat: no-repeat;
display: inline;
padding-left: 18px;
}
#main_inner .post ul.post_info li.date
{
background-image: url('images_red/n5.gif');
}
#main_inner .post ul.post_info li.comments
{
background-image: url('images_red/n6.gif');
margin-left: 1.1em;
}
/* Footer */
#footer
{
width: 950px;
margin: 0 auto;
text-align: center;
clear: both;
border-top: dotted 1px #E1E1E1;
margin-top: 1.0em;
margin-bottom: 1.0em;
padding-top: 1.0em;
text-transform: lowercase;
}
/* Search */
input.button
{
background: #CA2F2F url('images_red/n3.gif') repeat-x;
color: #fff;
border: solid 1px #A94B4B;
font-weight: bold;
text-transform: lowercase;
font-size: 0.8em;
height: 2.0em;
}
input.text
{
border: solid 1px #F1F1F1;
font-size: 1.0em;
padding: 0.25em 0.25em 0.25em 0.25em;
}
#search
{
position: relative;
width: 100%;
margin-bottom: 2.0em;
}
#search input.text
{
position: absolute;
top: 0em;
left: 0em;
width: 9.5em;
}
#search input.button
{
position: absolute;
top: 0em;
right: 0em;
min-width: 2.0em;
max-width: 2.5em;
}
/* LAYOUT - 3 COLUMNS */
/* Primary content */
#primaryContent_3columns
{
position: relative;
margin-right: 34em;
}
#columnA_3columns
{
position: relative;
float: left;
width: 100%;
margin-right: -34em;
padding-right: 2em;
}
/* Secondary Content */
#secondaryContent_3columns
{
float: right;
}
#columnB_3columns
{
width: 13.0em;
float: left;
padding: 0em 2em 0.5em 2em;
border-left: dotted 1px #E1E1E1;
}
#columnC_3columns
{
width: 13.0em;
float: left;
padding: 0em 0em 0.5em 2em;
border-left: dotted 1px #E1E1E1;
}
/* LAYOUT - 2 COLUMNS */
/* Primary content */
#primaryContent_2columns
{
position: relative;
margin-right: 17em;
}
#columnA_2columns
{
position: relative;
float: left;
width: 100%;
margin-right: -17em;
padding-right: 2em;
}
/* Secondary Content */
#secondaryContent_2columns
{
float: right;
}
#columnC_2columns
{
width: 13.0em;
float: left;
padding: 0em 0em 0.5em 2em;
border-left: dotted 1px #E1E1E1;
}
/* LAYOUT - COLUMNLESS */
/* Primary content */
#primaryContent_columnless
{
position: relative;
}
#columnA_columnless
{
position: relative;
width: 100%;
}
</style>
<link rel="alternate stylesheet" type="text/css" title="Blue" href="style_blue.css" />
<link rel="alternate stylesheet" type="text/css" title="Green" href="style_green.css" />
<link rel="alternate stylesheet" type="text/css" title="Brown" href="style_brown.css" />
<link rel="alternate stylesheet" type="text/css" title="Magenta" href="style_magenta.css" />
<script src="styleswitch.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div id="header_inner" class="fixed">
<div id="logo">
<h1><span>Nonzero</span>1.0</h1>
<h2>By NodeThirtyThree Design</h2>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="http://www.free-css.com/">About Me</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Resources</a></li>
<li><a href="http://www.free-css.com/">Contact Me</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="main_inner" class="fixed">
<div id="primaryContent_3columns">
<div id="columnA_3columns">
<h3>A free design by NodeThirtyThree</h3>
<img src="nonzero-images/pic.gif" class="floatTL" alt="Something scenic" />
<p> Nonzero<sup>1.0</sup> is a free, lightweight, tableless, fluid/fixed W3C-valid
website design by NodeThirtyThree Design.
The scenic photo to the left is from PDPhoto.
You're free to dissect, manipulate and use this design to your heart's content. We only ask
that you link back to our site in some
way. And if you find this design useful, feel free to let us know :) </p>
<p> You can find more of our free work at this site or our site,
or some of our commercial work on 4Templates.com,
a commercial website template site. </p>
<br class="clear" />
<div class="post">
<h3>Specifics about Nonzero1.0</h3>
<ul class="post_info">
<li class="date">Posted by <a href="http://www.free-css.com/">enks</a> on 11.14.2006</li>
<li class="comments"> <a href="http://www.free-css.com/">44 comments</a></li>
</ul>
<p> This design comes in the following low-sodium flavors: <a href="javascript:chooseStyle('Red');">red</a>, <a href="javascript:chooseStyle('Green');">green</a>, <a href="javascript:chooseStyle('Blue');">blue</a>, <a href="javascript:chooseStyle('Magenta');">magenta</a>, and <a href="javascript:chooseStyle('Brown');">brown</a>. Click on a color to see it in action (requires JavaScript). </p>
<p> It also includes several alternate page layouts: <a href="http://www.free-css.com/">home</a>, <a href="index_2column.html">two column (fixed width)</a>, <a href="index_columnless.html">columnless (fixed width)</a>, <a href="index_fluid.html">three column (fluid width)</a>, <a href="index_fluid_2column.html">two column (fluid width)</a>,
and <a href="index_fluid_columnless.html">columnless (fluid width)</a>.
You can also change the width of the fixed width layouts if needed. See the <em>style.css</em> file for more thought-provoking details. </p>
<p> And now for a profound quote by the great philosopher, <a href="http://www.free-css.com/">Lorem Ipsum</a>:
Mauris neque adipiscing lacus, ac hendrerit augue odio in mi. In ultrices enim. Curabitur a massa sed risus
viverra mollis. Proin dapibus mi porttitor nisi. Donec eget nibh dictum magna iaculis pharetra.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas at ligula. Donec tellus. Etiam sem.
Sed quis urna. Duis tempor elit ac nulla. And don't you forget it. </p>
</div>
</div>
</div>
<div id="secondaryContent_3columns">
<div id="columnB_3columns">
<h4><span>Search</span></h4>
<form method="post" action="#">
<div id="search">
<input type="text" class="text" name="keywords" />
<input type="submit" class="button" value="Go" />
<br class="clear" />
</div>
</form>
<h4><span>About</span> Me</h4>
<p><strong>Veroeros sed</strong> varius sollici, arcu. Vivamus et viverra. tor. Aenean felis. Quisque eros. <a href="http://www.free-css.com/">Lorem ipsum dolor</a>.</p>
<h4><span>Lorem</span> Ipsum</h4>
<ul class="links">
<li class="first"> <a href="http://www.free-css.com/">Fusce dui neque fringilla</a></li>
<li><a href="http://www.free-css.com/">Eget tempor eget nonummy</a></li>
<li><a href="http://www.free-css.com/">Nec metus sed donec</a></li>
<li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
<li><a href="http://www.free-css.com/">Consequat sed cursus</a></li>
<li><a href="http://www.free-css.com/">Nisi tempus nullam</a></li>
<li><a href="http://www.free-css.com/">Magna sed bibendum mauris</a></li>
<li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
<li><a href="http://www.free-css.com/">Consequat sed cursus</a></li>
<li><a href="http://www.free-css.com/">Id posuere metus sem</a></li>
<li><a href="http://www.free-css.com/">Eget tempor eget nullam</a></li>
<li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
<li><a href="http://www.free-css.com/">Consequat sed cursus</a></li>
</ul>
</div>
<div id="columnC_3columns">
<h4><span>Veroeros</span> Etiam</h4>
<ul class="links">
<li class="first"> <a href="http://www.free-css.com/">Velit molestie</a></li>
<li><a href="http://www.free-css.com/">Consequat cursus</a></li>
<li><a href="http://www.free-css.com/">Tempus nullam</a></li>
<li><a href="http://www.free-css.com/">Magna sed mauris</a></li>
<li><a href="http://www.free-css.com/">Semper molestie</a></li>
</ul>
<h4><span>Blandit</span> Consequat</h4>
<ul class="links">
<li class="first"> <a href="http://www.free-css.com/">Dui neque fringilla</a></li>
<li><a href="http://www.free-css.com/">Metus sed donec</a></li>
<li><a href="http://www.free-css.com/">Semper nisi molestie</a></li>
<li><a href="http://www.free-css.com/">Sed cursus</a></li>
<li><a href="http://www.free-css.com/">Tempus nullam</a></li>
<li><a href="http://www.free-css.com/">Semper nisi molestie</a></li>
<li><a href="http://www.free-css.com/">Sed bibendum mauris</a></li>
</ul>
<h4><span>Cool</span> Stuff</h4>
<ul class="links">
<li class="first"> <a href="http://www.free-css.com/">NodeThirtyThree</a></li>
<li><a href="http://www.free-css.com/">4Templates.com</a></li>
<li><a href="http://www.free-css.com/">WPThemePark</a></li>
<li><a href="http://www.free-css.com/">OpenWebDesign</a></li>
<li><a href="http://www.free-css.com/">Zeroweb.org</a></li>
</ul>
</div>
</div>
<br class="clear" />
</div>
</div>
<div id="footer" class="fixed"> Copyright © 2006 Your Website. All rights reserved. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree Design</a>. </div>
</body>
</html>
Related examples in the same category