Layout & CSS

Zine articles/comments are all formatted primarily using DIVs for layout and markup. Some CSS is necessary to "dress up" the content.

The Basic Zine CSS structure is as follows:

Zine                             Wraps all Zine output
    Zine[TYPE]*                  Wraps a single article
        ZineHeader		 Contains the title, subtitle, and abstract
	ZineAboutBody		 Wraps the About and Body sections
	    ZineAbout		 Contains author info & date
	    ZineBody		 Contains the article text
	        ZineImage	 Contains inlined image, if any
	        ZineQuote	 Contains any quoted elements in comments
		ZineAttachment	 Contains any attachments
	ZineFooter		 Contains footnotes, etc. 

* [TYPE] = Article | Comment

Other Groupings/Wrappers include:

ZineIndex                        Wraps lists of articles
ZineItem                         Wraps a single entry in an index
ZineTitle                        Contains the article title
ZineAuthor                       Contains the author attribution
ZineDate                         Contains the posting date

The ZineAboutBody wrapper is useful if you want to display comments in a two-column format, as is popular in some forums. The CSS technique for doing this is illustrated below. Otherwise it can be ignored.

Note all article classes have the same basic structure. However, each article type has its own unique wrapper, which you can use to differentiate between them stylistically. The sample CSS and HTML in the example below shows how this can be done.

View the source of this page to see the actual HTML structure. The stylesheet to achieve these effects can be viewed here.

Floating Images

Pictures are automatically inserted at the top of the article. Attachments are automatically shown in a thumbnail gallery at the end of the article.

If the picture width is lower than img_max_wrap_size, and the article body is longer than body_min_wrap_size, then the picture and caption will be wrapped in the following HTML:

<div class="ZinePicture">
<img ...>
</div>

This code is only added if the image is small and the article is large, because those are good conditions for wrapping the article body around the image. The following CSS will accomplish this (also illustrated in the example below):

div.ZinePicture { float:right; }

Attachment thumbnails will tend to stack vertically on the page. To have them line up left-to-right, use the following CSS:

div.ZineAttachment {
    height:125px;  /* enough to contain the thumb and caption */
}
div.ZineAttachment table {
    float:left; padding-right:10px;
}

Pseudo-Table Layouts

The basic layout uses divs, which means elements will stack vertically by default. If you want a side-by-side layout, with different elements positioned beside each other as if in table columns, you can use CSS to reposition certain elements.

The most common application is for structuring comments in boxes with meta-information about the post in the left column, and the comment body in the right column, like so:

To accomplish this layout, you need the following minimum CSS to get the two-column layout:

.ZineComment .ZineAbout {
    float:left;
    width:80px;
}
.ZineComment .ZineBody {
    margin-left:100px;
}

You can get the same effect with regular articles by replacing "ZineComment" with "ZineArticle", or by removing ".ZineComment" altogether to have it apply to both types.

Some additional padding will also be needed to make things attractively spaced. Multi-column CSS layouts do not handle rules and borders very well, so if using borders, you will have to simulate the rules and backgrounds using a background image. All of this is done in the example below, so use the associated stylesheet and HTML as a guideline.

In this case, the left column is a float, and its contents may overflow the "box" containing it if the right column is unexpectedly brief. To avoid this, you can add a minimum-height strut to the comment body, by adding the following setting to your config file:

body_strut_size = 60

The size is the minimum height in pixels of the body area. Increase or decrease as necessary. Set it to 0 to eliminate the strut entirely and let the text flow where it may.

Example

This example illustrates that even though articles and comments have essentially the same markup, you can give them markedly different presentations by making your CSS rules sensitive to their context. This uses the same CSS rules as the Zine Control Panel: