TUTORIAL: "Liquid" Paper

Introduction

In this tutorial you'll learn how to make a box that looks like a piece of paper using a Liquid Layout concept without using a <table>.
The paper can be as wide and as tall as you want without the pattern ever overlapping, all the while keeping the image size very small. (less than 1KB total)

The basic applications required to complete this tutorial are

1. Notepad (or your favorite text editor)
2. Image application capable of saving a transparent GIF image

This tutorial assumes you're familiar with the basics of creating a web page using a text editor or the code view of an application such as Dreamweaver.
The tutorial also assumes you're comfortable enough with your image application to create a GIF image that has a transparent background.

The Images

The first thing we need to do is make two images. One image for the papers lines named "paper.gif", and a second image for the holes & gutter border named "paper-holes.gif".
If you aren't up to creating your own images, you're free to use the images attached in figures 2 & 3.

For the example in Figure 1 I used a simple image with horizontal lines. I choose lines that were close together so it will fit with a lot of font sizes.


The holes & gutter border are a mostly transparent image with a single hole near the top and a line running down the right side for the gutter border.

For the example in Figure 1 I used a black circle & bluish line. If you plan on using this over a non-solid background, try copying a circle area of that background & using that instead. Finding a neutral area which is common throughout the background will work best.

The HTML

The HTML for this is fairly simple. There's a single container element with header & an inner container for content.

The CSS

The CSS for this is fairly simple, for the most part.

First we have the style for the highlighted container element.


A class selector is being used so multiple pieces of paper can be used on the same page.
The background-image is set to the horizontal lines, the contained elements will be covering parts of this background-image up.

I decided to set the color to a graphite color to sort of match pencil lead. The color is set on the container element so that it will cascade & it doesn't need to be set for the other elements.



Next we have the style for the highlighted header element.


A decendant selector is used so there's no need to assign a class to the <h2> element.

The background-color is set equal to the background-color of paper.gif. This gives the paper a solid header background-color like a piece of paper usually has.

The margin is set to zero so that there is no gap between the <h2> bottom-border and the gutter border.

The header is given an all-around padding of 10px to give the header a roomy feel no matter what the font-size.

I decided to set the left padding slightly larger than the size of the gutter.


After the header we have the style for the highlighted inner-container element.


The inner container has been given a class because a <div> element is much more likely to be used inside the inner container than another <h2> element is likely to be. child selectors could be used instead of the container class, but with people still using Internet Explorer 6 which doesn't support them it's a better idea to stick with the descendant selectors.

The majority of these rules could be combined into a single background rule, but I've left them separated for example sake.

The background-image is set to the image with the holes and gutter line. The image will cover up parts of the container element, and the horizontal lines will show through all of the transparent parts of the image.

The background-color is transparent so that the containers background can show through.

background-repeat is set to repeat-y so that the holes and gutter border only tile vertically.

The left padding is set to the width of the "paper-holes.gif" image, plus a little extra to give the appearance of padding between the gutter line and the content.


Finally we have the style for the highlighted inner-containers content elements.


The margin is zeroed out on these so there's no gap between the gutter border and the headers bottom border.
padding is used instead for creating space between the text and the edges of the paper.

Conclusion

That about does it.
Because the container element uses a background that can tile in either direction, you can have a piece of paper limited only by the size of your screen.

Since the <h2> element is a block-level element, it will always grow as wide as the container element, covering the pattern with the solid background and extending the bottom border.
The padding applied to the <h2> element ensures there's always a little space between the header text and the paper edges & headers bottom border.

The inner-container basically uses a transparent background color and an image that only tiles vertically to create the illusion of an infinite number of holes going down with the infinite gutter border line.