My CSS Zen Garden Theme

Why Bother With It?

CSS Zen Garden.com is a showcase of what amazing designs can be achieved with CSS mark-up.

Hundreds of artists have submitted beautiful works of art. Each artist submits CSS and graphic files which are referenced by the same static html file with a specific set of CSS id's and classes.

I think some submitted because they want to show off their personality and skill.

Why can't I, like many people, simply hire one of those good designers to create or modify a theme for me?

Why do I want to embarass myself by putting an inferior one out there for people to laugh at?

Why am I doing this when I can be watching ... on TV or playing ...?

I'm a stupid clown, I guess.

Although many of the samples are gorgeous to look at and admire, for some reason I don't feel like I can make any of them "mine".

But this has become a hobby ... an obsession, really. I don't really know why. If you're good at psychology, can you please explain it to me?

Maybe I want to conquer CSS like mountain climbers long to be able to walk past frozen dead bodies on their way to plant their own pole at the world's tallest mountaintop. CSS (to me) is as tough as anything else I've done. Unlike a programming language, where one just has to figure out the correct incantation, CSS is evolving because the browsers are evolving. CSS has to be seduced.

In The Real World

In the real world, there would be more in the html:

A search box
Icons to change font size, switch to a high contrast layout, etc.
clear-block divs in the HTML and Holly Hack code in the CSS
Google ads
RSS links to Digg, Feedburner, Technorati, etc.
Icons for links to social networking sites such as Linked In contacts, Flickr photos, etc.
More items in lists.
Clickable images for top-of-page positioning. I like being able to click on a heading icon which aligns that paragraph at the top of the page, for easier reading. This means a <a name=... tag for every section of the page.
Icons to go directly to the bottom or the top.

But CSS Zen Garden is meant to be an example. So...

Classes in CSS Zen Garden HTML

Here is a table, in the order that tags are in the html file.

HTML Section CSS Note

<html Common html

<body id="css-zen-garden"> Common body

<div id="container"> Layout #container
* html #container

<div id="intro"> - #intro

<div id="intro"> ... <h3> Headings #intro h3 {

<div id="pageHeader" Header #pageHeader

<h1><span>css Zen Garden Header #pageHeader h1

<h2><span>The Beauty of ... Header #pageHeader h2

<acronym title="Cascading Style Sheets">CSS Common acronymn

<div id="quickSummary" Layout #quickSummary

<p class="p1"><span>A demonstration of what can be ... Text #quickSummary p.p1 span {

<p class="p2"><span>lDownload the sample ... Text #quickSummary p.p2 span {

<a href= ... css file Text #quickSummary a,
#quickSummary a:link,
#quickSummary a:visited {
#quickSummary a:hover {

<div="preamble - #preamble

<h3><span>The Road to Enlightenment Headings #preamble h3 {

<p class="p1"><span>Littering ... Headings #preamble p.p1 {

<div id="supportingText" - #supportingText

<div id="explanation" - #explanation

<div id="participation" - #participation

<div id="benefits" - #benefits

<div id="requirements" - #requirements

<div id="footer" Layout #footer

<a href= .. - #footer a, #footer a:link, #footer a:visited {
#footer a:hover

<div id="linkList" Layout #linkList

<div id="linkList2" - #linkList2

<div id="lselect - #linkList #lselect {

<h3 class="select"><span>Select a Design: - -

<ul> Lists #linkList ul {

<li> Lists #linkList ul li {

<a href= - #linkList a,
#linkList a:link,
#linkList a:visited { -

<a href= - #linkList a:hover {
#linkList a.c:hover { -

<a href= - #linkList #lselect a:link,
#linkList #lselect a:visited display:block;

<a href= - #linkList a.c,
#linkList a.c:link,
#linkList a.c:visited { display:inline;

<div id="larchives" Lists #larchives #archive

<h3 class="archives"<span>Archives: Headings #larchives h3 {

<ul> - -

<li><a href=... next design »</a> - -

<li><a href=... View All Designs</a> - -

<div id="lresources" Lists #linkList #lresources

<h3 class="resources"><span>Resources: Headings #lresources h3 {

<ul> - -

<li><a href=... View This Design</a> - -

<div id="extraDiv1"><span></span></div> - #extraDiv1

<div id="extraDiv2"><span></span></div> - #extraDiv2

<div id="extraDiv3"><span></span></div> - #extraDiv3

<div id="extraDiv4"><span></span></div> - #extraDiv4

<div id="extraDiv5"><span></span></div> - #extraDiv5

<div id="extraDiv6"><span></span></div> - #extraDiv6

HTML	Section	CSS	Note
<html	Common	html
<body id="css-zen-garden">	Common	body
<div id="container">	Layout	#container * html #container
<div id="intro">	-	#intro
<div id="intro"> ... <h3>	Headings	#intro h3 {
<div id="pageHeader"	Header	#pageHeader
<h1><span>css Zen Garden	Header	#pageHeader h1
<h2><span>The Beauty of ...	Header	#pageHeader h2
<acronym title="Cascading Style Sheets">CSS	Common	acronymn
<div id="quickSummary"	Layout	#quickSummary
<p class="p1"><span>A demonstration of what can be ...	Text	#quickSummary p.p1 span {
<p class="p2"><span>lDownload the sample ...	Text	#quickSummary p.p2 span {
<a href= ... css file	Text	#quickSummary a, #quickSummary a:link, #quickSummary a:visited { #quickSummary a:hover {
<div="preamble	-	#preamble
<h3><span>The Road to Enlightenment	Headings	#preamble h3 {
<p class="p1"><span>Littering ...	Headings	#preamble p.p1 {
<div id="supportingText"	-	#supportingText
<div id="explanation"	-	#explanation
<div id="participation"	-	#participation
<div id="benefits"	-	#benefits
<div id="requirements"	-	#requirements
<div id="footer"	Layout	#footer
<a href= ..	-	#footer a, #footer a:link, #footer a:visited { #footer a:hover
<div id="linkList"	Layout	#linkList
<div id="linkList2"	-	#linkList2
<div id="lselect	-	#linkList #lselect {
<h3 class="select"><span>Select a Design:	-	-
<ul>	Lists	#linkList ul {
<li>	Lists	#linkList ul li {
<a href=	-	#linkList a, #linkList a:link, #linkList a:visited {	-
<a href=	-	#linkList a:hover { #linkList a.c:hover {	-
<a href=	-	#linkList #lselect a:link, #linkList #lselect a:visited	display:block;
<a href=	-	#linkList a.c, #linkList a.c:link, #linkList a.c:visited {	display:inline;
<div id="larchives"	Lists	#larchives #archive
<h3 class="archives"<span>Archives:	Headings	#larchives h3 {
<ul>	-	-
<li><a href=... next design »</a>	-	-
<li><a href=... View All Designs</a>	-	-
<div id="lresources"	Lists	#linkList #lresources
<h3 class="resources"><span>Resources:	Headings	#lresources h3 {
<ul>	-	-
<li><a href=... View This Design</a>	-	-
<div id="extraDiv1"><span></span></div>	-	#extraDiv1
<div id="extraDiv2"><span></span></div>	-	#extraDiv2
<div id="extraDiv3"><span></span></div>	-	#extraDiv3
<div id="extraDiv4"><span></span></div>	-	#extraDiv4
<div id="extraDiv5"><span></span></div>	-	#extraDiv5
<div id="extraDiv6"><span></span></div>	-	#extraDiv6

Basic Rules

Notice that the HTML mark-up does NOT fall into a common mistake:

 <span class="p1"> text ... </span>

The correct HTML mark-up uses <span> tag:

 <p class="p1"><span> text ... </span></p>

Pet Peeves with Others' Themes

I (with the putrid yellow background on my website for a decade) should be the last person to criticize others' designs.

But I heard it is useful to vocalize what does and doesn't thrill me. It's like holding a new shirt in front of the mirror to see "how it looks on me".

There are several design elements that I like about the base 'Tranquille' theme
- The red Japanese arch at the upper right corner provides a solid visual anchor for the list of contributed themes -- the main attraction of the page.
- The chiseled stone is a cool effect, gives the site a solid feel.
- The gradient soft-edge zen-bg.jpg at top left provides elegance, the essence of tranquility.
- The blossoms.jpg graphic gives a nice finishing touch to anchor the bottom right.

I prefer gradients. Headings are too solid at the Some Leafs theme.
When an image file replaces HTML text specified in a heading, this CSS is used to hide the text:
```
 h3 { display:none; } 
```
This is followed by:
```
 #preamble h3 {
	background: transparent url(h3_preamble.jpg) no-repeat top left;
	}
```

The Elegance in Simplicity theme has a check mark in front of the footer. That makes sense to give readers a clue about the function of those links. So I clipped Mani Sheriar's #footer code:
```
background:url(check.gif) no-repeat left center;
padding-left:18px;
```
The padding-left is needed to avoid having the graphic overlap the text.

I prefer bullets that align vertically with text rather than midway between lines, such as in the Lonely Flower theme.
I like icons in front of paragraph headings. But I prefer the heading and its text to be aligned horizontally such that the icon hangs out (with white space under the icon).
I like being able to click on a heading icon which aligns that paragraph at the top of the page, for easier reading. This means a <a name=... tag for every section of the page.
I like contrast. I found it really difficult to read the gray text in the Elegance in Simplicity theme.
I prefer underlines to show up only on mouse over. I find underlined links distracting in the Floral Touch theme.
I don't like graphics to be under text, such as in the Vertigo theme. Its text is too difficult to read.
The Business Style theme is what I'm talking about!
- I like the rounded corners, especially at the footer.
- Download links are conveniently up top.
- But the black silohettes are kinda creepy.
- And the links can be set off a little more from the text.
I like left-aligned text for English. The centered text in the Cube Garden theme is difficult to read.
I don't like to waste space at the top (like Manhatten Edition theme), forcing users the hassle of scrolling down to read the text.
Italics are difficult to read.
The cartoon look of the Wiggles the Wonderworm theme by Joseph Pearson, is fantastic! Notice that it turnes #intro into a page container using CSS code position:relative; after supressing #pageHeader and replacing it with graphics.
Text is added using CSS code such as this:
#footer:before { content:"Approved by the Comics Code of America. ..."; }
Notice its use of a graphic paperedge.jpg:

It is is positioned using #extraDiv1 tags such as:
```
 
#extraDiv1 {
	position:absolute;
	height:40px;
	width:820px;
	top:0;
	background:url(paperedge.jpg) no-repeat bottom;
	left:50%;
	margin-left:-410px;
}
#extraDiv2 {
	position:absolute;
	height:100px;
	width:820px;
	top:1420px;
	background:url(paperedge.jpg) no-repeat bottom;
	left:50%;
	margin-left:-410px;
}
#extraDiv3 {
	position:absolute;
	height:100px;
	width:820px;
	top:2840px;
	background:url(paperedge.jpg) no-repeat bottom;
	left:50%;
	margin-left:-410px;
}
#extraDiv4 {
	position:absolute;
	height:48px;
	width:820px;
	background:url(paperedge.jpg) no-repeat;
	left:50%;
	margin-left:-410px;
	margin-bottom:0px;
}
```
- background:url(paperedge.jpg) no-repeat bottom; specifies the graphic location.
- The bottom spec combines with
- height:40px; in #extraDiv1 to cut the top part of the graphic so that only the ender part of the graphic is shown.
- height:48px; for the #extraDiv4 at the bottom of the page shows only the ender (top) part of the graphic because the corresponding background tag defaults to top, not bottom.
- margin-bottom:0px;
- height:100px; for the middle #extraDivs displays both the started and ender parts of the graphic.
- top: is used to position the graphic between page text.
  On IE6 browsers, there is a white edge on top (but not on Firefox).
- width:820px; is always specified for all because the graphic is 820 pixels wide and 100 pixels high.
- margin-left:-410px; is specified for all because ???.
I prefer to use text rather than gif files on headers like this design uses.

The Look I Covet

I wrote down some words to describe the theme I wanted. Then I figured out aspect of the theme.

I had started on one, but didn't have time to finish it. If I were to finish it, it would be:

Clean. That's why I used a light (white) background. Alignment of boxes.
Uncluttered. (unlike parts of my living space).
Expansive. That's why I used a panarama photo.
Personable. I always thought that it's important to have a smiling face to humanize a site. (Sorry, I couldn't find a better looking face to pose for me)

Solid. No pastel colors.
Manly. Hence the big thick sans-serif fonts.

What are nav bars?

Get Going

Here's how to begin creating your own CSS Zen Garden design.

Create a folder
Download into that folder the html file. I rename it to "c.htm"
Edit the html file to point to your own css file from:
to (for example):
Create your CSS file by creating a blank file or saving an example. For example, to download the CSS file for theme at address
click the "View This Design's CSS" link or change the Address URL by removing the "?cssfile=" for
I like the 080 example CSS for its sections (common styles, layout, header, text, headings, lists, links)

Edit your CSS file and change the name.
Copy graphics you want to use in the folder.
Change the CSS to reference your graphic.
Change the positioning of graphics.
Change the font text colors based on the graphics' colors.

Design Ideas

Spreading CSS over several files is useful when several people are involved. One can focus on each aspect:

The main attraction of the page is the list of sites. So I wanted to make it so by ???
Wide side margins gives the page breathing room.
The right margin I wanted to leave room for Google ads. (Show me the money, baby!)
For the graphic at the bottom right, I cut out the grass section from inside the header image, to give some continuity.
Color.

Test on Various Browsers

Include both Mac and PC fonts on your list.

Rounded Corners

There are two approaches: one for fixed width boxes such as navigation bars and a more complex one for variable width boxes.

Submitting

Before you submit a theme

change the urls to the format of "001/001.css".
Repate on different browsers
Repeat this for several transalations
create a preview graphic of the page
zip up files and make it available on your website

Search for word:	feeds for Performance and Capacity Engineers...
		Performance Testing Performance Tuning Performance Reports Mercury LoadRunner TCP/IP Addressing ISO-OSI Layers Routing & Switching

Your first name:

Your family name:

Your location (city, country):

Your Email address:

Email updates (subscribe)

Top of Page

Thank you!

Human verify:

Please retype:

Visitor comments are owned by the poster. Our Privacy Policy
All trademarks and copyrights on this page are owned by their respective owners.
The rest ©Copyright 1996-2011 Wilson Mar. All rights reserved.
Last updated | HTMLHELP | W3C XHTML | CSS | Cynthia 508