softenedcells
<!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-AU">
<head>
<title>Softened Cells</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/***************************************************
AUTHOR: Pat Heard ( FullAhead.org )
TEMPLATE: Softened Cells
DATE: 2005.08.26
USE: Free use as long as this notice is
kept in place. If you would like
to remove it, please contact me at
http://fullahead.org/contact.html.
***************************************************/
/***************************************************
HTML Element Styles
***************************************************/
body {
margin: 20px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 0.62em;
color: #666;
background-color: #EEE;
}
h1 {
clear: both;
padding: 5px 0 12px 10px;
margin: 0;
font-size: 2em;
font-weight: normal;
letter-spacing: -1.5px;
}
#text h1 {
background: url(softenedcells-images/h1_bg.jpg) no-repeat bottom center;
}
h2 {
clear: both;
padding: 0 0 0 5px;
margin: 0 0 -10px 0;
font-size: 1.0em;
font-weight: normal;
text-transform: uppercase;
color: #BE0000;
}
p {
line-height: 20px;
padding: 8px 0 8px 5px;
margin: 5px 0 5px 0;
}
p:first-letter {
font-size: 1.2em;
}
#news p {
padding: 8px;
}
a {
color: #BE0000;
}
a:hover {
color: #111;
background-color: #DDD;
}
#news a:hover,
#footer a:hover {
background-color: #CCC;
}
ul, ol {
padding-bottom: 8px;
line-height: 20px;
}
ul {
list-style-image: url(softenedcells-images/li_bullet_dark.gif);
}
acronym {
border-bottom: 1px solid #BBB;
cursor: help;
}
/***************************************************
Site Layout Container:
-------------------------------------------
adjust width attribute if you would like to
make the site wider, but make sure to also
adjust either #news or #text widths as well.
***************************************************/
#siteBox {
width: 588px;
margin: 0px auto;
text-align: left;
}
/***************************************************
Header Styles
--------------------------------------------
Change main header image with #header
background attribute.
***************************************************/
#header {
height: 144px;
background: url(softenedcells-images/hdr_sunset.jpg) no-repeat top center;
}
#header .title {
padding: 10px 10px 0 10px;
text-align: right;
font-size: 2.5em;
line-height: 0.9em;
letter-spacing: -1.5px;
color: #EEE;
}
#header .subTitle {
padding: 0 10px 0 12px;
text-align: right;
color: #EEE;
}
#header .subTitle a {
text-decoration: none;
color: #EEE;
}
#header .subTitle a:hover {
color: #BBB;
background-color: transparent;
}
/***************************************************
Top Tabbed Menu Styles
***************************************************/
#menu {
text-align: center;
margin-bottom: 20px;
}
#menu a {
padding: 6px 20px 0 20px;
text-decoration: none;
text-transform: uppercase;
color: #666;
}
#menu a:hover, #menu a.active {
background: url(softenedcells-images/menu_tab_dark.gif) no-repeat top center;
}
/***************************************************
Left News Column
-------------------------------------------
1. Change to right side column by altering
#news float attribute
2. If you widen the #siteBox, also increase
#news or #text width attribute
***************************************************/
#news {
float: right;
width: 175px;
padding: 0 0 0 20px;
}
#news .block {
margin-bottom: 20px;
background: #DDD url(softenedcells-images/block_top.gif) no-repeat top center;
}
#news .block .bottom {
height: 28px;
background: #DDD url(softenedcells-images/block_bottom.gif) no-repeat bottom center;
}
#news .links {
margin: 10px 0 10px 0;
}
#news .links a {
display: block;
padding: 6px 0 6px 20px;
text-transform: uppercase;
text-decoration: none;
}
#news .links a:hover {
background: #DDD url(softenedcells-images/link_news.gif) no-repeat center center;
}
#news a img {
border: 0px;
}
/***************************************************
Right Content Column
-------------------------------------------
1. Change to left side column by altering
#text float attribute
2. If you widen the #siteBox, also increase
#news or #text width attribute
***************************************************/
#text {
float: left;
width: 375px;
}
/***************************************************
Footer Styles
***************************************************/
#footer {
height: 100px;
padding: 28px 3px 0 5px;
margin: 20px 0 20px 0;
background: url(softenedcells-images/footer.gif) no-repeat top right;
}
p#footer:first-letter {
font-size: 1.0em;
}
#footer img.right {
padding: 5px 2px 0 2px;
border: 0px;
}
/***************************************************
Large <ul> Link Styles
--------------------------------------------
Creates the large links blocks that can be
used in the #text section
***************************************************/
ul.links {
float: left;
padding: 0px;
margin: 0px;
}
ul.links li {
float: left;
list-style-type: none;
list-style: none;
}
ul.links li a {
float: left;
width: 370px;
padding-top: 5px;
margin: 0px;
cursor: pointer;
text-decoration: none;
}
ul.links li a:hover {
background: #DDD url(softenedcells-images/link_top.gif) no-repeat top center;
}
ul.links li a span.title {
display: block;
margin-left: 11px;
text-indent: 20px;
background: url(softenedcells-images/link_arrow.gif) no-repeat center left;
}
ul.links li a span.desc {
float: left;
width: 350px;
padding-right: 3px;
margin-left: 10px;
color: #666
}
ul.links li a span.bottom {
display: block;
height: 18px;
clear: both;
}
ul.links li a:hover span.bottom {
background: #EEE url(softenedcells-images/link_bottom.gif) no-repeat top center;
}
/***************************************************
Display Classes
***************************************************/
.date {
display: block;
text-transform: uppercase;
color: #BE0000;
}
p.quote {
float: left;
padding: 8px 0 0 8px;
margin: 5px 0 20px 5px !important;
margin: 5px 0 10px 3px;
background: #D3F9FF url(softenedcells-images/quote_top.gif) no-repeat top right;
border-left: 2px solid #4EE8FF;
}
p.quote span.bottom {
float: right;
width: 20px;
background: url(softenedcells-images/quote_bottom.gif) no-repeat bottom right;
}
img.right {
float: right;
padding: 3px;
}
img.left {
float: left;
padding: 3px;
}
.grey {
color: #AAA;
}
</style>
</head>
<body>
<div id="siteBox">
<div id="header">
<h1 class="title">Softened Cells</h1>
<h2 class="subTitle"><a href="http://www.free-css.com/">Slogan Here</a></h2>
<!-- Opera bug fix -->
</div>
<div id="menu"> <a href="http://www.free-css.com/" class="active">Home</a> <a href="http://www.free-css.com/">About</a> <a href="http://www.free-css.com/">Gallery</a> <a href="http://www.free-css.com/">Projects</a> <a href="http://www.free-css.com/">Journal</a> <a href="http://www.free-css.com/">Contact</a> </div>
<div id="content">
<div id="news">
<div class="block">
<h1> Blocks </h1>
<p> Here's a spot you could stick some side content relavent to the page you're on. There's also a special link class for anything you decide to put here: </p>
<div class="links"> <a href="http://www.free-css.com/">Pinecone Theme</a> <a href="http://www.free-css.com/">ThreeTree</a> <a href="http://www.free-css.com/">FullAhead</a> </div>
<p> Tried for an open and soft design on this one. You can see the similarities in this design proposal I did last month. </p>
<div class="bottom"> </div>
</div>
<div class="block">
<h1> Recent </h1>
<p> <span class="date">2005.08.28</span> Template finished. Two versions available, each one weighing in at a modest 15<acronym title="kilobytes: unit of computer data size">kb</acronym> in size ... <a href="http://www.free-css.com/"><img src="softenedcells-images/link_arrow.gif" alt="" /></a> </p>
<p> <span class="date">2005.08.20</span> Played in the Tree-oh discgolf tournament. Went pretty well, but the body is not happy about the 8 hours of play ... <a href="http://www.free-css.com/"><img src="softenedcells-images/link_arrow.gif" alt="" /></a> </p>
<p> <span class="date">2005.08.16</span> Tires suck. Went to get my bike out of my friends garage - flat tire. Next day, the car decides to do the same ... <a href="http://www.free-css.com/"><img src="softenedcells-images/link_arrow.gif" alt="" /></a> </p>
<div class="bottom"> </div>
</div>
</div>
<div id="text">
<h1> Template </h1>
<p> A tableless <acronym title="eXtensible Hyptertext Markup Language">XHTML</acronym>/<acronym title="Cascading Style Sheet">CSS</acronym> template that focuses on customization. After the success of my last template, reflection, I decided to stick with the "easy-to-modify" theme. The header is simple to change for one of your own, as is the accent colour. </p>
<p class="quote"> To change the accent colour, search the style sheet for <acronym title="hexidecimal: base 16 numbering system">hex</acronym> value <acronym title="green">#56B600</acronym> and replace it with one of your own. The top header image is added by the #header class definition. <span class="bottom"> </span> </p>
<h2> Semantically Coded </h2>
<p> This template is coded using the <acronym title="fancy name for HTML tags">markup</acronym> as it was intended. The result is code that is simple to understand and widely supported in different browsers. Another benefit is that <acronym title="fancy word for browsers">user agents</acronym> that don't support CSS will still display the site's content coherently. You can test it yourself by disabling CSS in your browser. </p>
<h1> Specs </h1>
<p> <img src="softenedcells-images/firefox.jpg" alt="" class="right"/> Softened Cells is a fixed width template that will work out of the box at <acronym title="WIDTH by HEIGHT measurement of screen resolution in pixels">640x480</acronym> and above. You can change this if you want by altering the width definitions of the #siteBox, #news and #text CSS classes. </p>
<p> Browser support for the template is very good because of the simple markup structure. It renders consitently in the following: </p>
<ul>
<li>Firefox</li>
<li>Netscape</li>
<li>Opera</li>
<li>Safari</li>
<li><acronym title="dirty, dirty Internet Explorer">IE</acronym> (Windows/Mac)</li>
</ul>
<h2> Images </h2>
<p> Images are fully supported using the two custom CSS classes <acronym title="image will align right">.right</acronym> and <acronym title="image will align left">.left</acronym>. Simply place an image in the paragraph you'd like, apply the class and you're done. Headings <h1> and sub headings <h2> act as boundaries, so you're images will always remain in context. </p>
<h1> Big Links </h1>
<p> One last thing for you to play with is the .links CSS class. It lets you create large link blocks in your content for whatever you want to emphasis. I used them on my site for the portfolio and links sections. </p>
<ul class="links">
<li> <a href="http://www.free-css.com/"> <span class="title">Deviant ART</span> <span class="desc">Just about the largest art site on the Interweb.</span> <span class="bottom"> </span> </a> </li>
<li> <a href="http://www.free-css.com/"> <span class="title">CSS Zen Garden</span> <span class="desc">Showcasing what is possible using only pure CSS design.</span> <span class="bottom"> </span> </a> </li>
<li> <a href="http://www.free-css.com/"> <span class="title">FullAhead</span> <span class="desc">My design portfolio site (completely shameless plug).</span> <span class="bottom"> </span> </a> </li>
</ul>
<h1> Terms of Use </h1>
<p> The template is released for free, but I would appreciate it you gave me, <a href="http://fullahead.org">FullAhead</a>, credit. If you keep either of the header images that come with the template, you should also leave a link to <a href="http://www.free-css.com/">ThreeTree</a>, since he took them. </p>
<p> If you end up using this template, send me an message. It's always interesting to see how people modify my work. I enjoyed making it, so I hope you enjoy using it. </p>
<p id="footer"> <a href="http://www.free-css.com/"><img src="softenedcells-images/logo_fullahead.gif" class="right" alt=""/></a> <a href="http://www.free-css.com/"><img src="softenedcells-images/logo_threetree.gif" class="right" alt="ThreeTree logo"/></a> ©2005 No Rights Reserved<br/>
Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator">CSS</a> </p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category