falling-away
<!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" xml:lang="en" lang="en">
<head>
<title>Falling Away</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/**************************************************************
AUTHOR: Pat Heard (fullahead.org)
DATE: 2007.11.08
PURPOSE: Controls the site layout
**************************************************************/
/**************************************************************
Header: holds title box, menu, main image and top actions
**************************************************************/
#header {
margin-top: 25px;
background: #D1FFFE url(falling-away-img/bg/branch.jpg) no-repeat bottom right;
}
/**************************************************************
#title: Red block with leaves, title and tagline
**************************************************************/
#header #title {
color: #FFF;
background: #c02b0e url(falling-away-img/bg/title.gif) repeat-x top left;
border-bottom: 1px solid #9a2116;
}
#header #title h1 {
padding-top: 60px;
color: #FFF;
background: url(falling-away-img/bg/title_leaves.gif) no-repeat top right;
}
#header #title a {
color: #FFF5BD;
}
#header #title a:hover {
border-color: #FFF5BD;
}
/**************************************************************
#menu: Main site menu
**************************************************************/
#header #menu {
margin: 0;
padding: 0;
list-style: none;
}
#header #menu li {
margin: 0;
padding: 0;
display: inline;
}
#header #menu li a {
display: block;
padding: 5px 12px;
font: 1.4em arial, serif;
letter-spacing: -0.05em;
text-decoration: none;
color: #bf9a82;
background-color: #5F371C;
border-top: 6px solid #FFF;
border-bottom: 1px solid #361703;
}
#header #menu li a:hover {
color: #FFF;
background: #40200A url(falling-away-img/bg/menu_arrow.gif) no-repeat center left;
}
#header #menu li ul {
display: none;
}
#header #menu li.here {
display: block;
padding: 5px 0 3px 0;
background: #401F09 url(falling-away-img/bg/menu_active.gif) repeat-x top left;
border-top: 6px solid #FFF;
}
#header #menu li.here a {
display: inline;
padding: 0 12px;
color: #FFF;
background: url(falling-away-img/bg/menu_arrow.gif) no-repeat center left;
border: 0;
}
#header #menu li.here ul {
display: block;
padding: 0;
margin: 5px 0;
}
#header #menu li.here ul li {
display: inline;
}
#header #menu li.here ul li a {
display: block;
margin: 0 7px;
padding: 2px 5px;
font-size: 1em;
letter-spacing: 0em;
background: none;
}
#header #menu li.here ul li a:hover {
background: #381B08;
}
/**************************************************************
#subMenu: Search field and sub menu items
**************************************************************/
#header #subMenu {
font-size: 0.85em;
background: #c6f7f8 url(falling-away-img/bg/subMenu.gif) repeat-x bottom left;
}
#header #subMenu form {
margin: 0;
}
#header #subMenu ul {
float: right;
margin: 0;
padding: 5px;
list-style: none;
}
#header #subMenu ul li {
margin: 0;
padding: 0;
display: inline;
}
#header #subMenu ul li a {
margin-right: 20px;
text-decoration: none;
}
#header #subMenu ul li a.iconRSS,
#header #subMenu ul li a:hover.iconRSS{
margin-right: 0;
padding-right: 20px;
background: url(falling-away-img/icons/rss.gif) no-repeat 90% 50%;
}
#header #subMenu ul li a:hover {
border-color: #62c1c1;
}
#header #subMenu form {
float: left;
padding: 5px;
}
/* Hidden, but present for accessibility */
#header #subMenu label,
#header #subMenu input.button {
display: none;
}
#header #subMenu input {
color: #3ca2a2;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #64d5d5;
}
#header #subMenu input:focus {
color: #42210B;
}
/**************************************************************
#content: Main content section (holds columns)
**************************************************************/
#content {
clear: both;
}
/**************************************************************
#footer: Holds bottom menu and copyright info
**************************************************************/
#footer {
font-size: 0.85em;
color: #BF9A82;
background: #3F1F09 url(falling-away-img/bg/footer.gif) repeat-x top left;
/* Force all browsers to respect space underneath footer - margins are inconsistent */
border-top: 25px solid #FFF;
border-bottom: 25px solid #FFF;
}
#footer a {
color: #FFF;
}
#footer a:hover {
border-color: #7f563a;
}
#footer p {
padding: 10px 12px;
}
#footer ul {
margin: 0;
padding: 10px 12px 60px 12px;
list-style: none;
}
#footer ul li {
margin: 0;
padding: 0 8px;
display: inline;
border-left: 1px solid #7F563A;
}
#footer ul li.first {
padding-left: 0;
border: 0;
}
/**************************************************************
A post item: blue meta column stretches height of the post.
**************************************************************/
.post {
margin-bottom: 20px;
background: #b7fffc url(falling-away-img/bg/meta.gif) repeat-x bottom left;
}
.post .meta {
border-top: 20px solid #FFF;
}
.post .meta .thumb {
position: relative;
display: block;
margin: 6px;
text-decoration: none;
}
.post .meta a:hover.thumb {
border: 0;
}
.post .text {
padding-bottom: 1px;
background: #FFF;
border-left: 6px solid #FFF;
}
/**************************************************************
Big Links
**************************************************************/
ul.bigLinks {
margin: 10px 0;
padding: 0;
list-style: none;
}
ul.bigLinks li {
display: inline;
margin: 0;
padding: 0;
background: none;
}
ul.bigLinks li a,
ul.bigLinks li a:visited {
display: block;
margin: 10px 0;
padding: 5px 12px;
text-decoration: none;
border: 0;
}
ul.bigLinks li a:hover {
background: #b7fffc url(falling-away-img/bg/meta.gif) repeat-x bottom left;
border: 0;
}
ul.bigLinks li a span.title {
font: bold 0.9em arial, sans-serif;
text-transform: uppercase;
color: #3ca2a2;
}
ul.bigLinks li a span.desc {
display: block;
color: #42210B;
}
/**************************************************************
Global width classes
**************************************************************/
.width25 {
width: 244px;
}
.width50 {
width: 494px;
}
.width75 {
width: 744px;
}
.width100 {
width: 994px;
margin: 0 auto;
text-align: left;
}
.rightMargin {
margin-right: 6px;
}
.rightBorder {
border-right: 6px solid #FFF;
}
/**************************************************************
Utility Classes
**************************************************************/
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
.block {
display: block;
}
.alignRight {
text-align: right;
}
.alignJustify {
text-align: justify;
}
.small {
font-size: 0.8em;
}
.highlight {
background: #fffdcd;
border-bottom: 1px solid #ffd909;
}
.highlight a {
color: #FFA509;
}
.highlight a:hover {
border-color: #fdce72;
}
</style>
<link rel="stylesheet" type="text/css" media="screen, tv, projection" href="css/layout.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen, tv, projection" />
<![endif]-->
</head>
<body>
<div class="width100">
<div id="header" class="floatLeft width100">
<div class="floatLeft width25 rightBorder">
<div id="title">
<h1>Falling Away</h1>
<p> A tableless XHTML Strict 1.0 web template released under the <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons</a> license. </p>
</div>
<ul id="menu">
<li class="here"> <a href="http://www.free-css.com/">The Template</a>
<ul>
<li><a href="index.html#inspiration">Inspiration</a></li>
<li><a href="index.html#coding">Coding</a></li>
</ul>
</li>
<li> <a href="style.html">Style Demo</a>
<ul>
<li><a href="style.html#tables">Tables & Forms</a></li>
<li><a href="style.html#layout">Column Layout</a></li>
</ul>
</li>
<li> <a href="http://www.free-css.com/">Photos</a> </li>
<li> <a href="http://www.free-css.com/">Contact Me</a> </li>
</ul>
</div>
<div id="subMenu" class="floatRight width50">
<!-- Search Form: <label> and <input type="submit"> are for accessibility and are hidden by CSS -->
<form action="http://www.free-css.com/" method="get" id="search">
<div>
<label for="searchTerm">Search Term:</label>
<input type="text" value="Search..." name="searchTerm" id="searchTerm" title="Start typing and hit ENTER" class="width25"/>
<input type="submit" value="Submit" title="Submit your search term" class="button"/>
</div>
</form>
<ul>
<li> <a href="http://www.free-css.com/">Register/Login</a> </li>
<li> <a href="http://www.free-css.com/">Need Help?</a> </li>
<li> <a href="http://www.free-css.com/" class="iconRSS">Feed</a> </li>
</ul>
</div>
</div>
<div id="content">
<div class="floatLeft width25 rightMargin">
<h1>The Template</h1>
<p> This template is valid <acronym title="Cascading Style Sheets">CSS</acronym> and <acronym title="eXtensible Hyper Text Markup Language">XHTML</acronym> Strict 1.0 that has been tested in Firefox, Netscape, Opera, Safari, IE6 and IE7. </p>
<blockquote>
<p> The layout is coded using generic CSS classes, so like lazydays, it's easy to customize. </p>
</blockquote>
<h1>Grid Layout</h1>
<p> The layout is based on a four column grid, each column weighing in at 244px. <a href="style.html#layout">Columns can be combined</a> so it's easy to come up with the layout you want. </p>
<p> Total width of the template is just under 1024px, but below that, it will still maintain its layout correctly. </p>
</div>
<div class="floatLeft width75">
<div class="post floatLeft">
<div class="meta floatLeft width25"> <a href="http://www.free-css.com/" class="thumb"> <img src="falling-away-img/thumbs/01.jpg" alt="" /> </a>
<p> An example of the meta format that could be used for a post. </p>
<dl>
<dt><span>Author</span></dt>
<dd>Pat Heard</dd>
<dt><span>Date</span></dt>
<dd>December 10th, 2007</dd>
<dt><span>Comments</span></dt>
<dd><a href="http://www.free-css.com/">7 (read)</a></dd>
</dl>
</div>
<div class="text floatRight width50"> <a name="inspiration"></a>
<h1>Inspiration</h1>
<p> For this template I decided to create something that could be used for a blog or portfolio site. The idea behind the 25% width blue column is that it can provide meta information on the item it is associated with. This way visitors can quickly scan an item and decide if they want more detail. </p>
<p> The design inspiration came from the fall, which is really a beautiful season here in Canada. The only downside is that it's followed by winter. </p>
<h2>Template Use</h2>
<p> The header image was taken by Claudia Meyer, who has some great shots available on sxc.hu. If you use it for your site, you should give her credit in the footer. On that note, the template is released under the <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons</a> license, which means you can do as you want with it, but you need to credit me. </p>
</div>
</div>
<div class="post floatLeft">
<div class="meta floatLeft width25"> <a href="http://www.free-css.com/" class="thumb"> <img src="falling-away-img/thumbs/01.jpg" alt="" /> </a>
<dl>
<dt><span>Author</span></dt>
<dd>Pat Heard</dd>
<dt><span>Date</span></dt>
<dd>December 9th, 2007</dd>
<dt><span>Comments</span></dt>
<dd><a href="http://www.free-css.com/">0 (post)</a></dd>
</dl>
</div>
<div class="text floatRight width50"> <a name="coding"></a>
<h1>Coding</h1>
<h2>Column Layout</h2>
<p> This template makes heavy use of generic CSS classes, so it's very easy to customize to your needs. The basic layout elements are width and float classes: </p>
<ul class="arrow">
<li><strong>Width:</strong> .width25, .width50, .width75 and .width100</li>
<li><strong>Float:</strong> .floatRight and .floatLeft</li>
</ul>
<p> These are used together to create all the different column layouts. For examples of this check out the <a href="style.html#layout">style page</a>. The one catch with using them is that you must make sure that together, your column widths don't add up to over 100%. Otherwise the rightmost column will be pushed down. </p>
<p> Element padding within the columns is handled by the contained elements. The reason for this is because when you apply padding to a container with a defined width, browsers will apply this inconsistently. </p>
<h2>Images</h2>
<p> <a href="http://getfirefox.com" class="border"><img src="falling-away-img/thumbs/firefox.jpg" alt="" class="floatLeft"/></a> To position images inline with the text, the same generic .floatRight and .floatLeft classes can be used. The top level headings all have clearing applied to them, so images won't "escape" their sections. </p>
<h2>Header Image</h2>
<p> The header image is defined as a background, so it'll expand and contract as needed to accomodate the menu. Because of this, you should choose an image with a lot of room to grow vertically. </p>
</div>
</div>
</div>
</div>
<div id="footer" class="floatRight width50">
<ul>
<li class="first"> <a href="http://www.free-css.com/">The Template</a> </li>
<li> <a href="style.html">Style Demo</a> </li>
<li> <a href="http://www.free-css.com/">Photos</a> </li>
<li> <a href="http://www.free-css.com/">Contact Me</a> </li>
</ul>
<p> Released under the <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons License</a>. Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a target="_blank" href="http://jigsaw.w3.org/css-validator">CSS</a>.<br/>
Design by <a href="http://fullahead.org">FullAhead</a>. Photo by <a href="http://www.sxc.hu/profile/claudmey">Claudia Meyer</a>. </p>
</div>
</div>
</body>
</html>
Related examples in the same category