View Site Here
There are many ways to go about creating a CSS Zen Garden and everyone views their Zen in a different way. But what is Zen? Dictionary.com define's it as this:
"A Japanese school, of 12th-century Chinese origin, teaching that contemplation of one's essentialnature to the exclusion of all else is the only way of achieving pure enlightenment "
"Achieving Pure Enlightenment"... how do you do that? Well to me Zen is nature. Nature is pure, it is enlightenment. After taking that in consideration, I thought about the origin of man. If you believe in God or if you believe in evolution, nature, humans, and everything in between seems to have come from Africa. Now creating what my vision of the world might have been would be a bit difficult, I came to a conclusion on what my design is going to be.
To me, Africa is the purest part of life, thus my design concept.
The most important part of any website is to have a good foundation. So having an idea on how you want to layout your project is a good start. The original design looked like this:
I went ahead and stripped this entire site down to nothing. My first design was a horizontal scroll site. It looked nice and organized but I already made a site like that. Another though was to making the site extra flexible, bout found that challenging after looking at the code and the rules of not being allowed to change things around so I came up with a vertical layout. I wanted the main content to occupy the top along with the links and then move on to show the heavier content on the left and the content with less to say to the right, almost like bullet on what is going on. This gave gaps, but good gaps allowing me to start the design of the graphics.
Now that I knew what my layout looked like I went into the second part of the design. I wanted it to look somewhat monochromatic but warm at the same time. Since the sunsets in Africa can be very orange, a monochromatic layout was in place. A good mixture of different types of oranges and finishing it off with the main color being brown, came out to be a very good choice. Now to fill the holes. So I started with my main content.
With this alone it was bringing my site together well. But still there was things missing. After aligning everything up to look slick and that it goes together I added an image to the footer:
With this it brought my content area together very well. But it needed a few more touches by using the following images for the rest:
html {
margin:0;
padding:0;
width:100%;
height:100%;
border:0; /* remove borders */
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
}
body {
background-color:#5E4B37;
color:#fff;
background-image:url(../background3.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
margin:0;
padding:0;
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
font-size:75%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
padding:1.5%;
}
h3 {
}
a:link {
color:#F90;
text-decoration: none;
}
a:visited {
color:#0C0;
}
a:hover, a:active {
color:#900;
}
acronym {
}
/* specific divs */
#container {
background-color:#5E4B37;
width:800px;
/*min-height:100%;
max-height:100%;*/
margin-right: auto;
margin-left: auto;
margin-bottom:0;
margin-top:0;
padding:0;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CE8C43;
border-left-color: #CE8C43;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #725D49;
overflow:auto;
cursor: help;
}
#intro {
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background-image:url(../background_fade.jpg);/*the sun*/
background-repeat:no-repeat;
background-position:top;
background-attachment: fixed;
min-height:250px;
padding:0;
margin:0;
}
#pageHeader h1 span {
visibility:hidden;
}
#pageHeader h2 {
background-image:url(../block.jpg);/*the beauty of css design*/
margin:0;
padding:0;
min-height:100px;
}
#pageHeader h2 span {
visibility:hidden;
}
#pageHeader {
}
#quickSummary {
float:right;
margin-left:450px;
padding:10px;
}
#quickSummary p {
text-align: right;
font-size: .8em;
font-style: italic;
}
#preamble {
font-size:1.15em;
float:left;
margin-left:175px;
position:relative;
clear:both;
margin-top:-25px;
padding-left:10px;
}
#preamble h3 {
background-image:url(../enlightment.png);
min-height:55px;
}
#preamble h3 span {
visibility:hidden;
}
#preamble p {
padding-left:10px;
padding-right:2px;
}
#supportingText {
font-size:1em;
}
#explanation {
float:right;
width:350px;
position:relative;
margin:0;
padding:0;
clear:both;
margin-top:-50px;
}
#explanation h3 {
background-image:url(../about_bird.png);
min-height:189px;
}
#explanation h3 span{
visibility:hidden;
}
#participation {
float:right;
width:350px;
position:relative;
margin:0;
padding:0;
clear:both;
margin-top:-50px;
}
#participation h3 {
background-image:url(../participation.png);
min-height:189px;
}
#participation h3 span{
visibility:hidden;
}
#benefits {
float:right;
width:350px;
position:relative;
margin:0;
padding:0;
clear:both;
margin-top:-35px;
}
#benefits h3 {
background-image:url(../benefits.png);
min-height:189px;
}
#benefits h3 span{
visibility:hidden;
}
#requirements {
font-size:1.3em;
float:left;
width:450px;
position:relative;
margin-top:-900px;
padding:0;
}
#requirements h3{
background-image:url(../back_req.png);
min-height:269px;
}
#requirements h3 span{
visibility:hidden;
}
#footer {
float:right;
position:relative;
clear:both;
background-image:url(../footer.png);
min-height:531px;
min-width:800px;
margin-top:-175px;
word-spacing: -10px;
font-variant: small-caps;
}
#footer a {
background-color:#000;
padding-right:30px;
padding-left:13px;
}
#footer a:link, #footer a:visited {
}
#linkList {
width:168px;
/*background-image:url(../background.png);*/
position:absolute;
z-index:1001;
top: 362px;
margin-left:0;
text-decoration: none;
padding:5px;
font-size:0.85em;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: solid;
border-top-color: #000;
border-right-color: #FF972B;
border-bottom-color: #FF972B;
border-left-color: #000;
}
#linkList2 {
text-decoration: none;
text-align:left;
}
#linkList h3.select {
}
#linkList h3.select span {
font-style: italic;
}
#linkList h3.favorites {
}
#linkList h3.favorites span {
font-style: italic;
}
#linkList h3.archives {
}
#linkList h3.archives span {
font-style: italic;
}
#linkList h3.resources {
}
#linkList h3.resources span {
font-style: italic;
}
#linkList ul {
text-decoration: none;
}
#linkList li {
text-decoration: none;
}
#linkList li a:link {
text-decoration: none;
}
#linkList li a:visited {
}
#extraDiv1 {
}
#extraDiv2 {
}
.accesskey {
}
As you can see, the whole point of this CSS is to use as little as possible that way you can keep your options open on further expanding your design.
No comments:
Post a Comment