Zengarden Analysis

Sketch Photoshop. Use the rulers for the positions.

From the CssZengarden HTML to the design sketch
Analyze the HTML structure by browser tools such as “Web Developer” or “Web Developer Tools” in Chrome or Firefox. This tool can give you information about the structure of divs and other tags.

Screen Shot 2013-11-21 at 7.40.28 PM

In Dreamweaver you can use “View” / “Inspect”. Then point in the html in order to get information about the tags, that you want to style.

Screen Shot 2013-11-21 at 6.31.34 PM
Dreamweaver inspector – in this case you can see, that the header is a h3 tag – and the name of the containing div.

When you know the names of the most important sections of the HTML in Zengarden you can make a rough sketch in Photoshop. Use the rulers and position the divs. An easy way to do this is:

  1. Find the position of the top left corner of the tag you want to position.
  2. Use absolute positioning.
/* use body for inheritance 
all tags after body will inherit the sans-serif font

body {
    font-family: Sans-serif;

/* positioning sample */

.page-wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;

/* give the divs width and position them */

.zen-summary {
    width: 300px;
    position: absolute;
    top: 20px;
    left: 100px;

/* etc. */