Database Front End: CSS elements for fields

Database Front End:
CSS elements for field display

With our database ready and safely stored away in a separate file, we can create the data insertion points in our page.

Here, we assume that we are dealing with a real-world HTML page, succeptable to editor changes, additions, ad insertions, and so on. That is, we do not have the luxury of absolutely positioning CSS elements on a blank page.

Instead of the <DIV> tag, which is a block-level tag and forces a new line, we will use <SPAN>, an in-line tag, that does not affect flow.

Using our example, the beginning of the database display area will be defined as:

    Sampling Code Number: <SPAN ID="elField1"></SPAN><BR>
    Catalog Number: <SPAN ID="elField2"></SPAN><BR>

Here we have created 2 CSS-positioned elements, named elField1 and elField2, to help us identify which field is to be displayed by each and to help automate our functions later. They are completely blank as our functions will update them later.

To make our code even simpler, we will use an in-line style definition, as opposed to a separate definition with the <STYLE> tag:

    Sampling Code Number: <SPAN ID="elField1" STYLE="position: absolute"></SPAN><BR>
    Catalog Number: <SPAN ID="elField2" STYLE="position: absolute"></SPAN><BR>

Why absolute ?

Indeed, why? The position of the element is obviously relative. Because we have a bug to contend with, once again. If we positioned this element relatively, Navigator would have a hard time updating it. In fact, our recent experience is that it would crash. Explorer would do fine, however. Navigator will correctly write to any absolutely positioned element only. We can place an absolutely positioned element relative to the text flow by omitting the left and top properties. Both browsers will accept this.

Complete the HTML

We can now write the complete HTML to be inserted anywhere on our page. We add SPANs for all our fields, insert our image, and add a couple of links to the functions we will write to move between records:

    <IMG NAME="imPic" SRC="Cynic001.jpg" WIDTH=200 HEIGHT=150 HSPACE=10 ALIGN=LEFT>
    Sampling Code Number: <SPAN ID="elField1" STYLE="position: absolute"></SPAN><BR>
          Catalog Number: <SPAN ID="elField2" STYLE="position: absolute"></SPAN><BR>
              Provenance: <SPAN ID="elField3" STYLE="position: absolute"></SPAN><BR>
              Chronology: <SPAN ID="elField4" STYLE="position: absolute"></SPAN><BR>
          Style-Typology: <SPAN ID="elField5" STYLE="position: absolute"></SPAN><BR>
                   Shape: <SPAN ID="elField6" STYLE="position: absolute"></SPAN><BR>
    <A HREF="javascript:showPrev()">
    <IMG SRC='Prev.gif' NAME='imPrevBut' ALT='Previous Sampling' WIDTH=58 HEIGHT=30 BORDER=0>
    </A>
    <A HREF="javascript:showNext()">
    <IMG SRC='Next.gif' NAME='imNextBut' ALT='Next Sampling' WIDTH=58 HEIGHT=30 BORDER=0>
    </A>

There are many options here. A blank image can be used as the original displayed image; the first record values could be displayed; text links could be used, etc. In the interest of simplicity, we have chosen to load the initial image and to keep the fields blank.

We have the what, a database, and we know where it is to be displayed. Now, we need the how to do it.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/09/97
Revised: 09/28/97

URL: https://www.webreference.com/dhtml/column4/spanIt.html