DHTML Jigsaw Puzzle: NN4; The CSS Elements | WebReference

DHTML Jigsaw Puzzle: NN4; The CSS Elements


The DHTML Lab Jigsaw Puzzle, Part III: NN4
defining the CSS elements

The Stylesheet

The CSS stylesheet that defines the elements that comprise the puzzle is listed below and a brief explanation follows. The parts rendered in blue are new to our puzzle and vital to the Navigator version.

    <STYLE TYPE="text/css"> &lt!-- #elPuzzle { position: absolute; left: 0; top: 0; background-color: black; layer-background-color: black; visibility: hidden; } #elImage { position: absolute; left: 3; top: 3; } #elBlank { position: absolute; background-color: white; layer-background-color: white; left: 3; top: 3; visibility: hidden; } #elGrid { position: absolute; left: 3; top: 3; visibility: hidden; } #elControls { position: absolute; background-color: #EEEEEE; layer-background-color: #EEEEEE; left: 3; top: 0; padding: 5; } --> </STYLE>

Absolute or Relative?

Navigator 4, as we know, will not adapt its layout to any dynamic changes. For example, when the puzzle image is replaced, the size of the containing element and the position of the controls will not be automatically adjusted to compensate. We can either update the content in all elements or we can write code that will make the necessary adjustments. The latter approach is preferred, but in order to accomplish it, all our nested elements must have a position value of absolute. It is this non-adjustment, and compensation for it, that necessitates the creation of particular elements and the values their properties will contain.

The Elements

The parent, containing elPuzzle element, serves a dual purpose. It not only hosts all the other elements, it provides us with a border, as well. Since a CSS declaration of the border property will not adjust automatically, we fake a border through the use of a background color and the offset placement of the nested elements. Navigator needs both the proprietary layer-background-color and the standard background-color properties (see Column 2).

Next we create an element to contain our puzzle image, elImage. We will write HTML to this element to import new images. In this way, the width and height of the new image will be recorded in the document.images array of the element. If we changed images with a simple src change, like rollovers, all new images would be forced into the original image's width and height.

For display formatting purposes, we create an element elBlank, to replace elImage when the puzzle is broken. elBlank will provide a white working area for puzzle solving and help fake the black border.

The grid element houses the grid image, as before, but the element that contains our control panel, elControls, is given the layer-background-color property and its position is absolute, since, as mentioned, we will set its new position every time through a script.

How these elements will relate to each other, depends on the nesting order defined by their HTML placement.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column10/puzzNScss.html