Norbert Blei Kafka Page

The Problem

An author, Norbert Blei, wanted to create a page that looked like a school notebook page. He wanted the spiral binding down the left side and lines across the page except in the top margin where he wanted plain white. There was a picture for the top of the page and text below. The final page can be seen by clicking here. How can you get the repeated background with lines across the page that appears the same on different monitors? One thought was to use JavaScript. Place the background with a spiral and line, then create white backgrounds of various sizes for the picture and only show the version that fits perfectly on the page. The one problem with this is once you start altering the page dynamically, you loose the background. Other thoughts included using nested DIV statements (also not a viable options-Never nest DIV tags)

The Solution

The Screen Placement

After wasting much time, the simplest solution was the best. Place the entire page in a table with two fixed width columns and center the table on the page. This overcomes the problem of different size monitors. It also assures the text will start at almost the same place on every screen. The first cell in each row will be used for the spiral while the second cell will hold the picture or the text depending on the row. The first cell is always the same, so just make the first cell have rowspan 2

The Background

This is a bit more complicated. Instead of using the single gif file with both the spiral and the line, I used two gif files. The one with the spiral and one with the line. This way I could use the spiral (with a repeat-y) as the background for the table containing the picture, and for the first column of the table containing the text. Then use the line gif file (with a repeat-y) for the text cell in the table. One problem with this is that in order for the first column of the second table to appear, you have to place the special charactor &#nbsp, non-breaking white space, in the first cell. Now you get a black vertical bar in the first column. This is a background showing through. To get rid of the bar just resize the cell until it is a bit (2 pixels) smaller than the width of the rule image.

The Code

The code for the page is shown here. The

is used to position the table at the top of the page so the title is completely visible at the bottom when the page is openned.

<BODY TEXT=#000000  BGCOLOR=#FFFFFF > 
<DIV CLASS= "positioncl">
<CENTER><TABLE >
<TR>
<TD WIDTH=48  ROWSPAN=2 STYLE = "background: URL(smallrule.gif); background-repeat: repeat-y;"> &#160 </TD>
<TD WIDTH=700> <CENTER><IMG SRC = "bleiHead.jpg"  HEIGHT = 415>  </CENTER>  </TD>
</TR>
<TR >
<TD WIDTH=700 STYLE = "background: URL(line.gif); background-repeat: repeat-y;" >  <BR>
<FONT SIZE=+2><CENTER><i><b> Locatio</i>: </b>A Placing</CENTER></FONT>
<P>&#160</P> 
<P>&#160</P> 
The text in the page.
  </TD> 
</TR></TABLE></CENTER> </DIV>