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: 
https://www.webreference.com/dhtml/column10/puzzNScss.html