Aleenanne : Reference : DHTML Basics

Taylor's Dynamic HTML Tutorial
Lesson 2
by Taylor

Page 2 — Let's Dig In

Now, the first part of any play or dramatic story contains the dramatis personae, a cast of characters. So let's create a file with that name and do a simple layout.

Most everything in dHTML is done using the <DIV> tag as a container. (In the spec for cascading stylesheets and the CSS positioning draft, it states that any object may be positioned, but Netscape browsers don't support this yet. So to author for both, you should get used to using the <DIV> tag as your generic container.) Fill it with stuff and then position it.

First let's create a box for the hero of our story: Tim, the Webmonkey editor:


<html>

   <head>

      <title>dramatis personae</title>

      <style>

         <!--



          #tim {position: absolute;

                left: 10px;

                top: 10px;

                width: 140px;

                height: 91px;

               }

         -->

       </style>

    </head>

    <body>

       <div id="tim">



       </div>

   </body>

</html>

So here's what the box looks like (red border added for clarity).

[On this page you are seeing GIFs instead of actual dynamic HTML because you're using a pre-4.0 browser.]

So now we have an empty box with an ID of tim, placed 10 pixels from the left-hand side of the window and ten pixels from the top of the window. Now this doesn't make for very interesting dHTML, so we had best fill the box with an image of Tim and a little description of him:

Tim, the hero. Webmonkey editor and resident banjo-picker.

When placed out in the open, on an HTML 3.2 page (meaning a page that can't handle dHTML), you'll notice that the text streams off to the edge of the screen and the image of Tim floats up toward the left.

Tim, the hero. Webmonkey editor and resident banjo-picker.

Actually it floats to the left of the table cell that this article is written in. That's an important distinction. When you place some HTML inside a <DIV> that has been positioned, you can think of it as placing HTML inside a table cell (or working like most other publishing systems).

In a post-HTML 3.2 page, you can see that the text wraps to fill the space available:

Now that you have a <DIV> with stuff in it, let's position it around using CSS-P's LEFT and TOP selectors.


<html>

   <head>

      <title>dramatis personae</title>

      <style>

         <!--



          #tim {position: absolute;

                left: 300px;

                top: 10px;

                width: 140px;

                height: 91px;

               }

         -->

       </style>

    </head>

    <body>

       <div id="tim">



      </div>

   </body>

</html>

The result:

next page»