DHTML Jigsaw Puzzle: IE4; The CSS elements

The DHTML Lab Jigsaw Puzzle, Part I: IE4
defining the CSS elements

Our puzzle has three unique positioned elements. The puzzle element is the most important as it contains the others. It is, therefore our parent element. We define it in our in-page style sheet:

<STYLE TYPE="text/css">
&lt!--
    #elPuzzle {
        position: absolute;
        left: 0; top: 0;
        width: 100;
        border: 3px black solid;
        visibility: hidden;
    }
-->
</STYLE>
The left and top properties above are placeholders. Set them to whatever coordinates you want the puzzle to appear in your page. The width property is set to any value. It is required by IE4, but will be modified later when our image is loaded. Our visibility is set to hidden to allow our puzzle to fully load before the user sees it. The border property can also be modified to any that you prefer. If a border is used, remember that a border is appended to an element's boundaries. It is not contained within them. Thus, in the above example, our element would be 106 pixels wide on the page:
left border width + elPuzzle width + right border width = total width
        3         +       100      +          3         = 106
Within our puzzle element, we will be placing:
the puzzle image,
the background grid, and
the control panel.

The image will be placed with the IMG tag and be part of the page flow. The grid, however, must occupy the same physical space as the image, which places it outside the regular HTML flow. It must be a positioned element with a position value of absolute. The grid element will be nested within the elPuzzle parent element. The left and top properties are set to 0, placing it in the top-left corner of elPuzzle. This nesting of elements is described in detail in column2. Define the grid element:
#elGrid {
    position: absolute;
    left: 0; top: 0;
    visibility: hidden;
}
The third element, the control panel, is also nested within elPuzzle, but it appears after the puzzle image. The control panel must be part of the HTML flow, and always appear below our image. Our puzzle images are all different sizes, so our controls should adjust position with each new image. This element, therefore, has a position value of relative:
#elControls {
    position: relative;
    background-color: #EEEEEE;
    text-align: center;
    border-top: 1px red solid;
    padding: 5px;
    height: 40;
}
We have added some CSS formatting to our panel for better display. The padding property will give us some minimum space around the control panel HTML. A <BR> tag would give us too much space. The height property is, like width in elPuzzle, required for our element to format properly and is given a placeholder minimum value.
 
We can now place the elements in our HTML.
<DIV ID="elPuzzle">
    <DIV ID="elGrid"></DIV>     // these two elements are
    <DIV ID="elControls"></DIV> // nested in elPuzzle parent
</DIV>
The next step is to flesh out the HTML.



Produced by Peter Belesis and
 
All Rights Reserved. Legal Notices.

Created: Nov. 5, 1997

Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column8/puzzCSS.html